cleanup

assets/css/style.css

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

assets/js/app.js

@@ -1,7 +1,10 @@
-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'
@@ -9,18 +12,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(1, 1, 'down')
+var player = new Player(5, 4, 'down')
 
 window.addEventListener("resize", function() {
 	terminal.resize();
@@ -124,7 +127,6 @@ function renderRoom() {
 	new Renderer(3, 2, 0, 7)
 	new Renderer(3, 3, 0, 8)
 	new Renderer(4, 2, 1, 8)
-
 }
 
 dialog.startIntroDialogSequence()
@@ -134,7 +136,7 @@ function gameLoop() {
 	document.removeEventListener("keydown", _listener);
 	if (terminalMode) {
 		terminal.getKeystroke();
-	} else {
+	} else if (!dialogMode) {
 		this.getKeystroke();
 	}
 }

assets/js/constants.js

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

assets/js/dialog.js

@@ -9,8 +9,9 @@ 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>.',
-			'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</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>',
+			'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</b>.<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')
@@ -28,9 +29,10 @@ class Dialog {
 		console.log('hit')
 		if (this.currentDialogIndex > this.dialogOrder.length - 1) {
 			this.dialogElem.style.display = 'none'
+			dialogMode = false
 
 		} else {
-			var dialog = this.dialogMap[this.dialogOrder[this.currentDialogIndex]]
+			var dialog = this.dialogOrder[this.currentDialogIndex]
 			this.display(dialog)
 
 			if (this.dialogOrder[this.currentDialogIndex] in indicator.indicatorMap) {
@@ -38,17 +40,18 @@ 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,23 +1,9 @@
-class Games {
+class Games extends Window {
 	constructor() {
-		this.gamesContainer = document.getElementById("games-container")
-		this.gamesInnerContainer = document.getElementById("games")
+		super('games')
 	}
 
-	show() {
-		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';
+	handleDialog() {
+		indicator.hide('tv')
 	}
 }

assets/js/indicator.js

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

assets/js/keystroke.js

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

assets/js/music.js

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

assets/js/player.js

@@ -29,18 +29,21 @@ 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,23 +1,21 @@
-class Portfolio {
+class Portfolio extends Window {
 	constructor() {
-		this.container = document.getElementById("portfolio-container")
-		this.innerContainer = document.getElementById("portfolio")
+		super('portfolio')
 	}
 
-	show() {
-		this.resize()
-		this.container.style.display = 'block'
+	handleDialog() {
+		indicator.hide('portfolio')
+		indicator.portfolioIndicatorShown = true;
+		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,4 +2,12 @@ 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,6 +29,11 @@ class Terminal {
 		this.terminalElem.style.display = "none"
 		this.terminalContainerElem.style.display = "none"
 		terminalMode = false;
+		this.handleDialog)
+	}
+
+	handleDialog() {
+		indicator.hide('computer')
 	}
 
 	createPrompt() {
@@ -127,7 +132,6 @@ class Terminal {
 
 		} else {
 			returnText = 'Unkown command, please type "help" for options'
-
 		}
 
 		if (returnText) {

assets/js/window.js

@@ -11,8 +11,11 @@ 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';