57 lines
2.2 KiB
JavaScript
57 lines
2.2 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><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')
|
|
}
|
|
|
|
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'
|
|
dialogMode = false
|
|
|
|
} else {
|
|
var dialog = this.dialogOrder[this.currentDialogIndex]
|
|
this.display(dialog)
|
|
|
|
if (this.dialogOrder[this.currentDialogIndex] in indicator.indicatorMap) {
|
|
indicator.show(this.dialogOrder[this.currentDialogIndex])
|
|
}
|
|
|
|
this.currentDialogIndex++
|
|
}
|
|
}
|
|
|
|
display(dialog) {
|
|
dialogMode = true
|
|
dialog = this.dialogMap[dialog]
|
|
this.dialogElem.style.display = 'block'
|
|
this.dialogTextElem.innerHTML = dialog
|
|
|
|
var self = this
|
|
document.addEventListener('keydown', this.dialogListener)
|
|
document.self = self
|
|
}
|
|
|
|
}
|