Updated trainer view layout.

wonderunit · Oct 24, 2017 · 0cfee09 · 0cfee09
1 parent dbd6055
commit 0cfee09
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 deletions.
diff --git 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
@@ -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`
     }
   } 
 }