assets/css/style.css

@@ -155,10 +155,6 @@ canvas {
 	font-size: 20px;
 }
 
-.audio-controls:hover {
-	cursor: pointer;
-}
-
 #album-thumb img {
 	border: solid 3px #dbe0e7;
 	margin-top: 10px;
@@ -170,14 +166,6 @@ canvas {
 	background: #a3acbe;
 }
 
-#resume-container {
-	background: #a3acbe;
-}
-
-#portfolio-container {
-	background: #a3acbe;
-}
-
 .games-inner-container {
 	position: relative;
 	height: inherit;

assets/js/app.js

@@ -1,10 +1,7 @@
+var _listener
 var TO_RADIANS = Math.PI/180; 
 
-var _listener
-
-var dialogMode = true
 var terminalMode = false
-
 var spriteSize = 16 * 5
 var spriteMap = new Image()
 spriteMap.src = './assets/img/sprites/sprite-map-1.png'
@@ -12,18 +9,18 @@ spriteMap.src = './assets/img/sprites/sprite-map-1.png'
 var canvasOffset = 9
 var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext("2d")
+
 canvas.width = spriteSize * canvasOffset
 canvas.height = canvas.width
 
 var audio = null
+
 var terminal = new Terminal()
 var games = new Games()
 var music = new Music()
 var dialog = new Dialog()
-var resume = new Resume()
-var portfolio = new Portfolio()
 var indicator = new Indicator()
-var player = new Player(5, 4, 'down')
+var player = new Player(1, 1, 'down')
 
 window.addEventListener("resize", function() {
 	terminal.resize();
@@ -127,6 +124,7 @@ function renderRoom() {
 	new Renderer(3, 2, 0, 7)
 	new Renderer(3, 3, 0, 8)
 	new Renderer(4, 2, 1, 8)
+
 }
 
 dialog.startIntroDialogSequence()
@@ -136,7 +134,7 @@ function gameLoop() {
 	document.removeEventListener("keydown", _listener);
 	if (terminalMode) {
 		terminal.getKeystroke();
-	} else if (!dialogMode) {
+	} else {
 		this.getKeystroke();
 	}
 }

assets/js/constants.js

@@ -31,8 +31,3 @@ var resumeInteractionZones = [
 	[4, 4], 
 	[4, 2]
 ]
-
-var portfolioInteractionZones = [
-	[0, 0], 
-	[1, 0]
-]

assets/js/dialog.js

@@ -9,9 +9,8 @@ class Dialog {
 		this.dialogMap = {
 			'intro': 'Hello! Welcome to my Interactive Portfolio!<br>Press <b>ENTER</b> to continue, or click the links below for quick access to my Resume & Projects.',
 			'controls': 'Use <b>ARROW KEYS</b> or <b>WASD</b> or <b>VIM</b> keys (HJKL) to move around. <br>Press the <b>ENTER</b> key to interact with what you see on the screen.<br><br>',
-			'resume': 'Walk over to the <b>DESK</b> and click on my <b>RESUME</b>.<br> The <b>RESUME</b> is marked by the flashing red indicator light.<br><br>',
+			'resume': 'Walk over to the <b>DESK</b> and click on my <b>RESUME</b>.<br> The <b>RESUME</b> is marked by the flashing red indicator light<br>.',
-			'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</b>.<br>',
+			'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</br>.'
-			'other': 'Now that you have looked through my Porfolio, go explore the rest of the site! <ul><li>Click on the <b>GUITAR</b> to hear my music.</li><li>Mess around on the Terminal on the <b>COMPUTER</b></li><li>And before you leave, go to the <b>TV</b> and play some of the games I have made!</li></ul> Thanks for stopping by!'
 		}
 
 		this.resumeIndicator = document.getElementById('resume-indicator')
@@ -29,10 +28,9 @@ class Dialog {
 		console.log('hit')
 		if (this.currentDialogIndex > this.dialogOrder.length - 1) {
 			this.dialogElem.style.display = 'none'
-			dialogMode = false
 
 		} else {
-			var dialog = this.dialogOrder[this.currentDialogIndex]
+			var dialog = this.dialogMap[this.dialogOrder[this.currentDialogIndex]]
 			this.display(dialog)
 
 			if (this.dialogOrder[this.currentDialogIndex] in indicator.indicatorMap) {
@@ -40,18 +38,17 @@ class Dialog {
 			}
 
 			this.currentDialogIndex++
-		}
-	}
-
-	display(dialog) {
-		dialogMode = true
-		dialog = this.dialogMap[dialog]
-		this.dialogElem.style.display = 'block'
-		this.dialogTextElem.innerHTML = dialog
 
 			var self = this
 			document.addEventListener('keydown', this.dialogListener)
 			document.self = self
 		}
 
+	}
+
+	display(dialog) {
+		this.dialogElem.style.display = 'block'
+		this.dialogTextElem.innerHTML = this.dialogMap[this.dialogOrder[this.currentDialogIndex]]
+	}
+
 }

assets/js/games.js

@@ -1,9 +1,23 @@
-class Games extends Window {
+class Games {
 	constructor() {
-		super('games')
+		this.gamesContainer = document.getElementById("games-container")
+		this.gamesInnerContainer = document.getElementById("games")
 	}
 
-	handleDialog() {
+	show() {
-		indicator.hide('tv')
+		this.resize()
+		this.gamesContainer.style.display = 'block'
+	}
+
+	hide() {
+		this.gamesContainer.style.display = 'none'
+	}
+
+	resize() {
+		this.gamesContainer.style.width = canvas.getBoundingClientRect().width - 40 + 'px';
+		this.gamesContainer.style.height = canvas.getBoundingClientRect().height - 40 + 'px';
+		this.gamesContainer.style.minHeight = canvas.getBoundingClientRect().width - 40 + 'px';
+
+		this.gamesInnerContainer.style.height = canvas.getBoundingClientRect().height - 77 + 'px';
 	}
 }

assets/js/indicator.js

@@ -29,4 +29,5 @@ class Indicator {
 	hide(indicatorName) {
 		this.indicatorMap[indicatorName].style.display = 'none'
 	}
+
 }

assets/js/keystroke.js

@@ -8,13 +8,25 @@ function getKeystroke() {
 			event.preventDefault();
 		}
 
-		if (['h', 'a' 'ArrowLeft'].includes(event.key)) {
+		if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
 			player.move('left')
-		} else if (['j', 's' 'ArrowDown'].includes(event.key)) {
+		} else if (
+			event.key === "j" ||
+			event.key === "s" ||
+			event.key === "ArrowDown"
+		) {
 			player.move('down')
-		} else if (['k', 'w' 'ArrowUp'].includes(event.key)) {
+		} else if (
+			event.key === "k" ||
+			event.key === "w" ||
+			event.key === "ArrowUp"
+		) {
 			player.move('up')
-		} else if (['l', 'd' 'ArrowRight'].includes(event.key)) {
+		} else if (
+			event.key === "l" ||
+			event.key === "d" ||
+			event.key === "ArrowRight"
+		) {
 			player.move('right')
 		} else if (
 			event.key === "Enter" &&
@@ -28,9 +40,6 @@ function getKeystroke() {
 				if (gamesInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
 					games.show();
 				}
-				if (portfolioInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
-					portfolio.show();
-				}
 			}
 
 			if (player.direction === 'down' || player.direction === 'left') {
@@ -43,7 +52,7 @@ function getKeystroke() {
 				if (resumeInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
 					indicator.hide('resume');
 					indicator.resumeIndicatorShown = true;
-					resume.show()
+					// show resume
 				}
 			}
 		}

assets/js/music.js

@@ -47,10 +47,6 @@ class Music extends Window {
 		}
 	}
 
-	handleDialog() {
-		indicator.hide('guitar')
-	}
-
 	resume() {
 		if (!this.currentSong) {
 			this.play(this.songOrder[0])

assets/js/player.js

@@ -29,21 +29,18 @@ class Player {
 				this.canvasX -= 1;
 			}
 		}
-
 		if (direction === 'right' && this.canvasX + 1 < canvas.width/spriteSize) {
 			nextPosition = [this.canvasX + 1, this.canvasY]
 			if (!this.isBoundary(nextPosition)) {
 				this.canvasX += 1;
 			}
 		}
-
 		if (direction === 'up' && this.canvasY - 1 >= 0) {
 			nextPosition = [this.canvasX, this.canvasY - 1]
 			if (!this.isBoundary(nextPosition)) {
 				this.canvasY -= 1;
 			}
 		} 
-
 		if (direction === 'down' && this.canvasY + 2 < canvas.height/spriteSize){
 			nextPosition = [this.canvasX, this.canvasY + 1]
 			if (!this.isBoundary(nextPosition)) {

assets/js/portfolio.js

@@ -1,21 +1,23 @@
-class Portfolio extends Window {
+class Portfolio {
 	constructor() {
-		super('portfolio')
+		this.container = document.getElementById("portfolio-container")
+		this.innerContainer = document.getElementById("portfolio")
 	}
 
-	handleDialog() {
+	show() {
-		indicator.hide('portfolio')
+		this.resize()
-		indicator.portfolioIndicatorShown = true;
+		this.container.style.display = 'block'
-		if (!indicator.computerIndicatorShown) {
-			dialog.display('other')
-
-			indicator.computerIndicatorShown = true;
-			indicator.tvIndicatorShown = true;
-			indicator.guitarIndicatorShown = true;
-
-			indicator.show('computer')
-			indicator.show('tv')
-			indicator.show('guitar')
 	}
+
+	hide() {
+		this.container.style.display = 'none'
+	}
+
+	resize() {
+		this.container.style.width = canvas.getBoundingClientRect().width - 40 + 'px';
+		this.container.style.height = canvas.getBoundingClientRect().height - 40 + 'px';
+		this.container.style.minHeight = canvas.getBoundingClientRect().width - 40 + 'px';
+
+		this.innerContainer.style.height = canvas.getBoundingClientRect().height - 77 + 'px';
 	}
 }

assets/js/resume.js

@@ -2,12 +2,4 @@ class Resume extends Window {
 	constructor() {
 		super('resume')
 	}
-
-	handleDialog() {
-		if (!indicator.portfolioIndicatorShown) {
-			dialog.display('portfolio')
-			indicator.portfolioIndicatorShown = true;
-			indicator.show('portfolio')
-		}
-	}
 }

assets/js/terminal.js

@@ -29,11 +29,6 @@ class Terminal {
 		this.terminalElem.style.display = "none"
 		this.terminalContainerElem.style.display = "none"
 		terminalMode = false;
-		this.handleDialog)
-	}
-
-	handleDialog() {
-		indicator.hide('computer')
 	}
 
 	createPrompt() {
@@ -132,6 +127,7 @@ class Terminal {
 
 		} else {
 			returnText = 'Unkown command, please type "help" for options'
+
 		}
 
 		if (returnText) {

assets/js/window.js

@@ -11,11 +11,8 @@ class Window {
 
 	hide() {
 		this.container.style.display = 'none'
-		this.handleDialog();
 	}
 
-	handleDialog(){}
-
 	resize() {
 		this.container.style.width = canvas.getBoundingClientRect().width - 40 + 'px';
 		this.container.style.height = canvas.getBoundingClientRect().height - 40 + 'px';