diff --git a/assets/css/style.css b/assets/css/style.css index f67c98c..9a81e6b 100644 --- a/assets/css/style.css +++ b/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; +} diff --git a/assets/docs/resume.pdf b/assets/docs/resume.pdf new file mode 100644 index 0000000..845b0cb Binary files /dev/null and b/assets/docs/resume.pdf differ diff --git a/assets/img/sprites/controls.png b/assets/img/sprites/controls.png new file mode 100644 index 0000000..58ef5f9 Binary files /dev/null and b/assets/img/sprites/controls.png differ diff --git a/assets/img/sprites/sprite-map-1.ase b/assets/img/sprites/sprite-map-1.ase index bc08ebc..337d2f1 100644 Binary files a/assets/img/sprites/sprite-map-1.ase and b/assets/img/sprites/sprite-map-1.ase differ diff --git a/assets/js/app.js b/assets/js/app.js index 4cbea68..d28e7ec 100644 --- a/assets/js/app.js +++ b/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() { diff --git a/assets/js/dialog.js b/assets/js/dialog.js index 0b1d6a6..4d0565d 100644 --- a/assets/js/dialog.js +++ b/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 } diff --git a/assets/js/indicator.js b/assets/js/indicator.js index 03f6a55..24bc315 100644 --- a/assets/js/indicator.js +++ b/assets/js/indicator.js @@ -22,7 +22,6 @@ class Indicator { } show(indicatorName) { - console.log(indicatorName) this.indicatorMap[indicatorName].style.display = 'block' } diff --git a/assets/js/keystroke.js b/assets/js/keystroke.js index d3810de..39fe698 100644 --- a/assets/js/keystroke.js +++ b/assets/js/keystroke.js @@ -8,45 +8,49 @@ 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 ) { - var playerPosition = [player.canvasX, player.canvasY] - if (player.direction === 'up') { - if (computerInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) { - terminal.show(); - } - 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') { - if (musicInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) { - music.show(); - } - } - - if (player.direction === 'down' || player.direction === 'up') { - if (resumeInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) { - indicator.hide('resume'); - indicator.resumeIndicatorShown = true; - resume.show() - } - } + 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]))) { + terminal.show(); + } + 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') { + if (musicInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) { + music.show(); + } + } + + if (player.direction === 'down' || player.direction === 'up') { + if (resumeInteractionZones.some(a => playerPosition.every((v, i) => v === a[i]))) { + indicator.hide('resume'); + indicator.resumeIndicatorShown = true; + resume.show() + } + } +} diff --git a/assets/js/terminal.js b/assets/js/terminal.js index ddcbe02..f6d5601 100644 --- a/assets/js/terminal.js +++ b/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 ) { diff --git a/index.html b/index.html index e3689fa..24c68fe 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,10 @@ Software Developer & Architect
+ + @@ -39,9 +41,51 @@
-
PRESS ENTER
+
PRESS ENTER
+
+ +
+ + + + + + + + + + + + + +
@@ -72,7 +116,11 @@
- Resume placeholder + + + +

Unable to display PDF file. Download instead.

+
@@ -239,8 +287,20 @@
+ + +
+
+
+ + + + +
+
+
- +