adding indicator flow

assets/css/style.css

@@ -166,6 +166,14 @@ canvas {
 	background: #a3acbe;
 }
 
+#resume-container {
+	background: #a3acbe;
+}
+
+#portfolio-container {
+	background: #a3acbe;
+}
+
 .games-inner-container {
 	position: relative;
 	height: inherit;

assets/js/app.js

@@ -1,6 +1,7 @@
 var _listener
 var TO_RADIANS = Math.PI/180; 
 
+var dialogMode = true
 var terminalMode = false
 var spriteSize = 16 * 5
 var spriteMap = new Image()
@@ -19,6 +20,8 @@ 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')
 
@@ -134,6 +137,8 @@ function gameLoop() {
 	document.removeEventListener("keydown", _listener);
 	if (terminalMode) {
 		terminal.getKeystroke();
+	} else if (dialogMode) {
+		// pass
 	} else {
 		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>.',
+			'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</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++
-
-			var self = this
-			document.addEventListener('keydown', this.dialogListener)
-			document.self = self
 		}
-
 	}
 
 	display(dialog) {
+		dialogMode = true
+		dialog = this.dialogMap[dialog]
 		this.dialogElem.style.display = 'block'
-		this.dialogTextElem.innerHTML = this.dialogMap[this.dialogOrder[this.currentDialogIndex]]
+		this.dialogTextElem.innerHTML = dialog
+
+		var self = this
+		document.addEventListener('keydown', this.dialogListener)
+		document.self = self
 	}
 
 }

assets/js/games.js

@@ -1,23 +1,10 @@
-class Games {
+class Games extends Window {
 	constructor() {
-		this.gamesContainer = document.getElementById("games-container")
+		super('games')
-		this.gamesInnerContainer = document.getElementById("games")
 	}
 
-	show() {
+	handleDialog() {
-		this.resize()
+		indicator.hide('tv')
-		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/keystroke.js

@@ -40,6 +40,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 +55,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/portfolio.js

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

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';