onscreen controller

assets/css/style.css

@@ -281,3 +281,62 @@ tr:nth-child(even) {
 	top: 570px;
 	left: 60px;
 }
+
+.download-resume {
+	font-family: monospace;
+	margin: 10px;
+	position: absolute;
+	bottom: 0px;
+	right: 15px;
+}
+
+.download-resume button {
+	font-size: 15px;
+	font-family: monospace;
+	border-radius: 0%;
+	border-top: white;
+	border-left: white;
+	margin-right: 3px;
+}
+
+.nav-bar {
+	margin-top: 5px;
+}
+
+.nav-bar button {
+	background-color: #ededed;
+	font-size: 16.9px;
+	font-family: monospace;
+	border-width: 3px;
+	border-radius: 0%;
+	border-top: white;
+	border-left: white;
+	margin-right: 2px;
+}
+
+.nav-bar button:hover {
+	background-color: #c3f6c3;
+	cursor: pointer;
+}
+
+.controls {
+	display: none;
+	opacity: 65%;
+	position: absolute;
+	bottom: 0px;
+	left: 0px
+}
+
+#on-screen-controller-button {
+	background-color: #ededed;
+	font-size: 16.9px;
+	font-family: monospace;
+	border-width: 3px;
+	border-radius: 0%;
+	border-top: white;
+	border-left: white;
+	margin-right: 2px;
+	position: absolute;
+	top: -35px;
+	right: 0px;
+}

assets/js/app.js

@@ -2,6 +2,7 @@ var TO_RADIANS = Math.PI/180;
 
 var _listener
 
+var controlsMode = false
 var dialogMode = true
 var terminalMode = false
 
@@ -131,7 +132,24 @@ function renderRoom() {
 
 dialog.startIntroDialogSequence()
 
+function toggleController() {
+	var enterIndicatorElem = document.getElementById('enter-indicator')
+	if (!controlsMode) {
+		controlsMode = true
+		enterIndicatorElem.innerHTML = 'TOUCH/CLICK ANYWHERE'
+	} else {
+		controlsMode = false
+		enterIndicatorElem.innerHTML = 'PRESS ENTER'
+	}
+}
+
 function gameLoop() {
+	if (!dialogMode && controlsMode) {
+		dialog.controlsElem.style.display = 'block'
+	} else if (!controlsMode || dialogMode) {
+		dialog.controlsElem.style.display = 'none'
+	}
+
 	renderRoom()
 	document.removeEventListener("keydown", _listener);
 	if (terminalMode) {
@@ -139,6 +157,7 @@ function gameLoop() {
 	} else if (!dialogMode) {
 		this.getKeystroke();
 	}
+
 }
 
 spriteMap.onload = function() {

assets/js/dialog.js

@@ -2,6 +2,7 @@ class Dialog {
 	constructor() {
 		this.dialogElem = document.getElementById('dialog')
 		this.dialogTextElem = document.getElementById('dialog-text')
+		this.controlsElem = document.getElementById('controls')
 		
 		this.currentDialogIndex = 0
 		this.dialogOrder = ['intro', 'controls', 'resume']
@@ -19,14 +20,15 @@ class Dialog {
 
 	dialogListener(event) {
 		console.log(event)
-			if (event.key === 'Enter') {
+			if (event.key === 'Enter' || event.type === 'click' || event.type === 'touchend') {
 				event.currentTarget.self.startIntroDialogSequence()
 			}
 	}
 	
 	startIntroDialogSequence() {
 		document.removeEventListener("keydown", this.dialogListener);
-		console.log('hit')
+		document.removeEventListener('click', this.dialogListener)
+		document.removeEventListener('touchend', this.dialogListener)
 		if (this.currentDialogIndex > this.dialogOrder.length - 1) {
 			this.dialogElem.style.display = 'none'
 			dialogMode = false
@@ -51,6 +53,13 @@ class Dialog {
 
 		var self = this
 		document.addEventListener('keydown', this.dialogListener)
+
+		if (controlsMode) {
+			console.log('hello')
+			document.addEventListener('click', this.dialogListener)
+			document.addEventListener('touchend', this.dialogListener)
+		}
+
 		document.self = self
 	}
 

assets/js/indicator.js

@@ -22,7 +22,6 @@ class Indicator {
 	}
 
 	show(indicatorName) {
-		console.log(indicatorName)
 		this.indicatorMap[indicatorName].style.display = 'block'
 	}
 

assets/js/keystroke.js

@@ -8,18 +8,25 @@ function getKeystroke() {
 			event.preventDefault();
 		}
 
-		if (['h', 'a' 'ArrowLeft'].includes(event.key)) {
+		if (['h', 'a', 'ArrowLeft'].includes(event.key)) {
 			player.move('left')
-		} else if (['j', 's' 'ArrowDown'].includes(event.key)) {
+		} else if (['j', 's', 'ArrowDown'].includes(event.key)) {
 			player.move('down')
-		} else if (['k', 'w' 'ArrowUp'].includes(event.key)) {
+		} else if (['k', 'w', 'ArrowUp'].includes(event.key)) {
 			player.move('up')
-		} else if (['l', 'd' 'ArrowRight'].includes(event.key)) {
+		} else if (['l', 'd', 'ArrowRight'].includes(event.key)) {
 			player.move('right')
 		} else if (
 			event.key === "Enter" &&
 			!terminal.active
 		) {
+			onEnter();
+		}
+	};
+	document.addEventListener("keydown", _listener);
+}
+
+function onEnter() {
 	var playerPosition = [player.canvasX, player.canvasY]
 	if (player.direction === 'up') {
 		if (computerInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) {
@@ -46,7 +53,4 @@ function getKeystroke() {
 			resume.show()
 		}
 	}
-		}
-	};
-	document.addEventListener("keydown", _listener);
 }

assets/js/terminal.js

@@ -29,7 +29,7 @@ class Terminal {
 		this.terminalElem.style.display = "none"
 		this.terminalContainerElem.style.display = "none"
 		terminalMode = false;
-		this.handleDialog)
+		this.handleDialog()
 	}
 
 	handleDialog() {
@@ -151,7 +151,6 @@ class Terminal {
 	getKeystroke() {
 		var self = this
 		_listener = function (event) {
-			console.log(event.code)
 			if (
 				["ArrowUp", "ArrowDown", "ControlLeft"].indexOf(event.code,) > -1
 			) {

index.html

@@ -29,8 +29,10 @@
 				Software Developer & Architect
 			</div>
 			<div class="container">
+
 				<canvas id="canvas"></canvas>
 
+				<button id="on-screen-controller-button" onclick="toggleController()">🎮 Toggle On Screen Controller</button>
 				<span class="indicator" id='resume-indicator'></span>	
 				<span class="indicator" id='portfolio-indicator'></span>	
 				<span class="indicator" id='computer-indicator'></span>	
@@ -39,9 +41,51 @@
 
 				<div class="dialog" id="dialog">
 					<span id="dialog-text"></span>
-					<div class="enter-indicator">PRESS ENTER</div>
+					<div class="enter-indicator" id="enter-indicator">PRESS ENTER</div>
 				</div>
 
+				<div class="controls" id="controls">
+					<img src="./assets/img/sprites/controls.png" alt="" usemap="#dpadmap">
+				</div>
+
+      <map name="dpadmap">
+        <!-- up -->
+        <area
+          shape="rect"
+          coords="110,55,180,120"
+          href="#"
+          onclick="player.move('up')"
+        />
+        <!-- down -->
+        <area
+          shape="rect"
+          coords="110,180,180,250"
+          href="#"
+          onclick="player.move('down')"
+        />
+        <!-- left -->
+        <area
+          shape="rect"
+          coords="50,125,110,190"
+          href="#"
+          onclick="player.move('left')"
+        />
+        <!-- right -->
+        <area
+          shape="rect"
+          coords="170,110,240,190"
+          href="#"
+          onclick="player.move('right')"
+        />
+        <!-- A-button -->
+        <area
+          shape="rect"
+          coords="580,110,680,190"
+          href="#"
+          onclick="onEnter()"
+        />
+      </map>
+
 				<!-- Terminal -->
 				<div class="window-container" id="term-container">
 					<div class="window-bar">
@@ -72,7 +116,11 @@
 						<div style="clear:both;"></div>
 					</div>
 					<div id="resume">
-						Resume placeholder
+						<a class="download-resume" href="./assets/docs/resume.pdf"><button>💾 Download</button></a>
+
+						    <object data="./assets/docs/resume.pdf#toolbar=0" type="application/pdf" width="100%" height="100%">
+      <p>Unable to display PDF file. <a href="./assets/docs/resume.pdf">Download</a> instead.</p>
+    </object>
 					</div>
 				</div>
 
@@ -239,6 +287,18 @@
 						</div>
 					</div>
 				</div>
+
+			</div>
+			<div class="container">
+				<div class="nav-bar">
+					<center>
+						<button>💼 View Portfolio</button>
+						<button>📄 Download Resume</button>
+						<button>📧 Contact Me</button>
+						<button>🕹️ Play Games</button>
+					</center>
+			</div>
+
 			</div>
 		</div>