diff --git a/css/main-window.css b/css/main-window.css index dd32383..48e4227 100644 --- a/css/main-window.css +++ b/css/main-window.css @@ -59,6 +59,8 @@ body { padding: 20px; position: relative; cursor: pointer; + transition-property: all; + transition-duration: 0.25s; } .main-view-selector-option:hover { @@ -77,7 +79,7 @@ body { .main-content-view { margin-left: 2vw; margin-right: 2vw; - height: 88vh; + height: 98vh; position: relative; } @@ -145,6 +147,10 @@ body { /** Value Training View */ +#character-trainer-container { + height: 88vh; +} + #character-trainer-view-header { display: flex; flex-direction: row; @@ -171,6 +177,7 @@ body { flex-direction: row; max-width: 100%; margin-top: 10vh; + justify-content: space-around; } .battle-view-timer-container { @@ -195,13 +202,17 @@ body { background-color: rgba(200, 200, 200, 0.59); padding: 20px; cursor: pointer; - width: 30vw; - height: 20vh; + width: 24vw; + height: 16vh; text-align: center; display: flex; align-items: center; justify-content: center; - font-size: x-large; + font-size: 2em; +} + +#character-trainer-view-center-text { + font-size: 1.5em; } .countdown-progress-bar { @@ -214,7 +225,6 @@ body { border-color: black; border-radius: 8px; cursor: pointer; - width: 100%; text-align: center; } @@ -236,6 +246,10 @@ body { text-align: center; } +#session-time-view { + margin-left: .4em; +} + /** Value List */ .value-list-container { @@ -255,6 +269,8 @@ body { z-index: 999; padding-right: 10px; max-height: 100%; + width: 1em; + height: 1em; } .value-list-label { diff --git a/js/views/character-trainer-view.js b/js/views/character-trainer-view.js index 553fe0a..5b7210e 100644 --- a/js/views/character-trainer-view.js +++ b/js/views/character-trainer-view.js @@ -75,13 +75,6 @@ module.exports = class CharacterTrainerView extends MainBaseView { this.skipButton.innerHTML = `Skip` this.buttonContainer.appendChild(this.skipButton) - this.showTimerSwitch = document.createElement("div") - this.showTimerSwitch.setAttribute("id", "battle-view-show-timer") - this.showTimerSwitch.setAttribute("class", "battle-view-button") - this.showTimerSwitch.innerHTML = "Hide Timer" - this.showTimerSwitch.addEventListener("click", this.toggleTimerView.bind(this)) - this.buttonContainer.appendChild(this.showTimerSwitch) - this.footerView = document.createElement("div") this.footerView.setAttribute("id", "value-list-footer") this.footerView.classList.add("footer") @@ -90,20 +83,28 @@ module.exports = class CharacterTrainerView extends MainBaseView { this.battleCountView = document.createElement("div") this.battleCountView.setAttribute("id", "value-list-battle-count") this.footerView.appendChild(this.battleCountView) - - let battleTypeView = document.createElement("div") - this.battleTypeView = battleTypeView - this.battleTypeView.classList.add("battle-type-view") - this.footerView.appendChild(this.battleTypeView) this.sessionView = document.createElement("div") this.sessionView.setAttribute("id", "value-list-session") this.sessionCountView = document.createElement("div") this.sessionView.appendChild(this.sessionCountView) this.sessionTimeView = document.createElement("div") + this.sessionTimeView.setAttribute("id", "session-time-view") this.sessionView.appendChild(this.sessionTimeView) this.footerView.appendChild(this.sessionView) + let battleTypeView = document.createElement("div") + this.battleTypeView = battleTypeView + this.battleTypeView.classList.add("battle-type-view") + this.footerView.appendChild(this.battleTypeView) + + this.showTimerSwitch = document.createElement("div") + this.showTimerSwitch.setAttribute("id", "battle-view-show-timer") + this.showTimerSwitch.setAttribute("class", "battle-view-button") + this.showTimerSwitch.innerHTML = "Hide Timer" + this.showTimerSwitch.addEventListener("click", this.toggleTimerView.bind(this)) + this.footerView.appendChild(this.showTimerSwitch) + this.characterSessionStartTime = Date.now() } @@ -181,11 +182,12 @@ module.exports = class CharacterTrainerView extends MainBaseView { this.battleCountView.innerHTML = `${this.character.name} // ${this.getCharacterBattleCount(this.character.id)} Questions` let session = this.getCharacterSession(this.character.id) - this.sessionCountView.innerHTML = `${session.battleCount} Questions ` - if(this.characterSessionStartTime) { + if(this.characterSessionStartTime && this.showTimer) { this.startSessionTimerView() + this.sessionCountView.innerHTML = `${session.battleCount} Questions in ` } else { this.sessionTimeView.innerHTML = `` + this.sessionCountView.innerHTML = `${session.battleCount} Questions` } } @@ -200,14 +202,14 @@ module.exports = class CharacterTrainerView extends MainBaseView { updateTimerView() { let now = Date.now() let elapsed = getFriendlyMS(now - this.characterSessionStartTime) - this.sessionTimeView.innerHTML = ` // ${elapsed.h ? elapsed.h+':' : ''}${elapsed.m}:${elapsed.s}` + this.sessionTimeView.innerHTML = `${elapsed.h ? elapsed.h+':' : ''}${elapsed.m}:${elapsed.s}` } clearSessionTimer() { if(this.timerID) { clearInterval(this.timerID) this.timerID = null - this.sessionTimeView.innerHTML = ` // 00:00:00` + this.sessionTimeView.innerHTML = `` } } @@ -307,6 +309,8 @@ module.exports = class CharacterTrainerView extends MainBaseView { } toggleTimerView(event) { + + let session = this.getCharacterSession(this.character.id) this.showTimer = !this.showTimer if(this.showTimer) { this.showTimerSwitch.innerHTML = "Hide Timer" @@ -315,12 +319,14 @@ module.exports = class CharacterTrainerView extends MainBaseView { this.startBattleTimerView() this.emit("show-timer") this.startSessionTimerView() + this.sessionCountView.innerHTML = `${session.battleCount} Questions in ` } else { this.showTimerSwitch.innerHTML = "Show Timer" this.timerContainer.classList.add("hidden") this.clearBattleTimer() this.emit("hide-timer") this.clearSessionTimer() + this.sessionCountView.innerHTML = `${session.battleCount} Questions` } } } \ No newline at end of file