dominic/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding indicator flow

Browse source
This commit is contained in:
Dominic DiTaranto 2025-12-28 20:22:26 -05:00
parent 97f25feb09
commit 6cff38073a
11 changed files with 71 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/style.css
View file

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

5
assets/js/app.js
View file

@ -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();
}

5
assets/js/constants.js
View file

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

21
assets/js/dialog.js
View file

@ -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++
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
}
}

21
assets/js/games.js
View file

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

5
assets/js/keystroke.js
View file

@ -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()
}
}
}

4
assets/js/music.js
View file

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

29
assets/js/portfolio.js
View file

@ -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')
}
}
}

8
assets/js/resume.js
View file

@ -2,4 +2,12 @@ class Resume extends Window {
constructor() {
super('resume')
}
handleDialog() {
if (!indicator.portfolioIndicatorShown) {
dialog.display('portfolio')
indicator.portfolioIndicatorShown = true;
indicator.show('portfolio')
}
}
}

5
assets/js/terminal.js
View file

@ -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() {

3
assets/js/window.js
View file

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