54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
class Dialog {
|
|
constructor() {
|
|
this.dialogElem = document.getElementById('dialog')
|
|
this.dialogTextElem = document.getElementById('dialog-text')
|
|
|
|
this.currentDialogIndex = 0
|
|
this.dialogOrder = ['intro', 'controls', 'resume']
|
|
|
|
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>.'
|
|
}
|
|
|
|
this.resumeIndicator = document.getElementById('resume-indicator')
|
|
}
|
|
|
|
dialogListener(event) {
|
|
console.log(event)
|
|
if (event.key === 'Enter') {
|
|
event.currentTarget.self.startIntroDialogSequence()
|
|
}
|
|
}
|
|
|
|
startIntroDialogSequence() {
|
|
document.removeEventListener("keydown", this.dialogListener);
|
|
console.log('hit')
|
|
if (this.currentDialogIndex > this.dialogOrder.length - 1) {
|
|
this.dialogElem.style.display = 'none'
|
|
|
|
} else {
|
|
var dialog = this.dialogMap[this.dialogOrder[this.currentDialogIndex]]
|
|
this.display(dialog)
|
|
|
|
if (this.dialogOrder[this.currentDialogIndex] in indicator.indicatorMap) {
|
|
indicator.show(this.dialogOrder[this.currentDialogIndex])
|
|
}
|
|
|
|
this.currentDialogIndex++
|
|
|
|
var self = this
|
|
document.addEventListener('keydown', this.dialogListener)
|
|
document.self = self
|
|
}
|
|
|
|
}
|
|
|
|
display(dialog) {
|
|
this.dialogElem.style.display = 'block'
|
|
this.dialogTextElem.innerHTML = this.dialogMap[this.dialogOrder[this.currentDialogIndex]]
|
|
}
|
|
|
|
}
|