diff --git a/assets/css/style.css b/assets/css/style.css index a729c62..aa796c3 100644 --- a/assets/css/style.css +++ b/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; diff --git a/assets/js/app.js b/assets/js/app.js index 3031f0b..2ddad25 100644 --- a/assets/js/app.js +++ b/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(); } diff --git a/assets/js/constants.js b/assets/js/constants.js index 801e697..f4107c0 100644 --- a/assets/js/constants.js +++ b/assets/js/constants.js @@ -31,3 +31,8 @@ var resumeInteractionZones = [ [4, 4], [4, 2] ] + +var portfolioInteractionZones = [ + [0, 0], + [1, 0] +] diff --git a/assets/js/dialog.js b/assets/js/dialog.js index 945e0ad..0b1d6a6 100644 --- a/assets/js/dialog.js +++ b/assets/js/dialog.js @@ -9,8 +9,9 @@ class Dialog { this.dialogMap = { 'intro': 'Hello! Welcome to my Interactive Portfolio!
Press ENTER to continue, or click the links below for quick access to my Resume & Projects.', 'controls': 'Use ARROW KEYS or WASD or VIM keys (HJKL) to move around.
Press the ENTER key to interact with what you see on the screen.

', - 'resume': 'Walk over to the DESK and click on my RESUME.
The RESUME is marked by the flashing red indicator light
.', - 'portfolio': 'Thanks for looking at my Resume!
Check out my PORTFOLIO by clicking on the BOOKSHELF
.' + 'resume': 'Walk over to the DESK and click on my RESUME.
The RESUME is marked by the flashing red indicator light.

', + 'portfolio': 'Thanks for looking at my Resume!
Check out my PORTFOLIO by clicking on the BOOKSHELF.
', + 'other': 'Now that you have looked through my Porfolio, go explore the rest of the site! 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 } } diff --git a/assets/js/games.js b/assets/js/games.js index 9d9777d..bb8d4af 100644 --- a/assets/js/games.js +++ b/assets/js/games.js @@ -1,23 +1,10 @@ -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' + handleDialog() { + indicator.hide('tv') } - 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'; - } } diff --git a/assets/js/keystroke.js b/assets/js/keystroke.js index dfa0d50..f5f2779 100644 --- a/assets/js/keystroke.js +++ b/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() } } } diff --git a/assets/js/music.js b/assets/js/music.js index 2cf96c0..50997f2 100644 --- a/assets/js/music.js +++ b/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]) diff --git a/assets/js/portfolio.js b/assets/js/portfolio.js index 9f4d38f..f3edb43 100644 --- a/assets/js/portfolio.js +++ b/assets/js/portfolio.js @@ -1,23 +1,20 @@ -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() { + if (!indicator.computerIndicatorShown) { + indicator.hide('portfolio') + dialog.display('other') - hide() { - this.container.style.display = 'none' - } + indicator.computerIndicatorShown = true; + indicator.tvIndicatorShown = true; + indicator.guitarIndicatorShown = true; - 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'; + indicator.show('computer') + indicator.show('tv') + indicator.show('guitar') + } } } diff --git a/assets/js/resume.js b/assets/js/resume.js index da68609..ea7d317 100644 --- a/assets/js/resume.js +++ b/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') + } + } } diff --git a/assets/js/terminal.js b/assets/js/terminal.js index 781366e..88d6d5d 100644 --- a/assets/js/terminal.js +++ b/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() { diff --git a/assets/js/window.js b/assets/js/window.js index 199c574..7426a8b 100644 --- a/assets/js/window.js +++ b/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';