Implement score screen

dist/index.html

@@ -59,6 +59,14 @@
           </div>
         </div>
       </div>
+      <div id="score">
+        <span>Score</span><div class="score"></div>
+        <span>Max Combo</span><div class="max-combo"></div>
+        <span>Finished</span><div class="finished"></div>
+        <span>Hit</span><div class="hit"></div>
+        <span>Missed</span><div class="missed"></div>
+        <span>Skipped</span><div class="skipped"></div>
+      </div>
       <div id="loader">
         <template name="progress-bar"></template>
         <span class="label"></span>

dist/style.css

@@ -121,6 +121,12 @@
   grid-row: game / bottom;
 }
 
+#score {
+  grid-column: start / right;
+  grid-row: header / bottom;
+  left: -500px;
+}
+
 #loader {
   top: -50px;
   grid-column: right / end;
@@ -202,6 +208,11 @@
   top: 0;
 }
 
+#container.game.game-finished #score {
+  opacity: 1;
+  left: 0;
+}
+
 /* }}} */
 
 /* }}} */
@@ -527,6 +538,32 @@
 
 /* }}} */
 
+/* score screen {{{ */
+
+#score {
+  display: grid;
+  grid-template-columns: max-content auto;
+  align-items: baseline;
+  align-content: end;
+  grid-gap: 5px;
+  padding: 20px;
+}
+
+#score .class,
+#score .score {
+  text-shadow: 0px 0px 5px var(--highlight-color);
+}
+
+#score .class {
+  font-size: 40px;
+}
+
+#score .score {
+  font-size: 24px;
+}
+
+/* }}} */
+
 .kana {
   display: inline-block;
   position: relative;

src/display.ts

@@ -177,6 +177,45 @@ namespace display {
     }
   }
 
+  export class Score {
+    combo: number = 0;
+    score: number = 0;
+    maxCombo: number = 0;
+    finished: number = 0;
+    hit: number = 0;
+    missed: number = 0;
+    skipped: number = 0;
+
+    intervalEnd(finished: boolean): void {
+      if (finished) {
+        this.finished += 1;
+      } else {
+        this.combo = 0;
+      }
+    }
+
+    update(result: TransitionResult): void {
+      switch (result) {
+        case TransitionResult.SUCCESS:
+          this.hit += 1;
+          this.score += 100 + this.combo;
+          this.combo += 1;
+          break;
+        case TransitionResult.FAILED:
+          this.missed += 1;
+          this.combo = 0;
+          break;
+        case TransitionResult.SKIPPED:
+          this.skipped += 1;
+          this.combo = 0;
+          break;
+      }
+      if (this.combo > this.maxCombo) {
+        this.maxCombo = this.combo;
+      }
+    }
+  }
+
   export class ScoreController {
     comboElement: HTMLElement;
     scoreElement: HTMLElement;
@@ -188,14 +227,8 @@ namespace display {
 
     inputState: InputState | null;
     observer: state.Observer;
+    score: Score;
 
-    combo: number = 0;
-    score: number = 0;
-    maxCombo: number = 0;
-    finished: number = 0;
-    hit: number = 0;
-    missed: number = 0;
-    skipped: number = 0;
 
     constructor(
       private scoreContainer: HTMLElement,
@@ -209,6 +242,7 @@ namespace display {
       this.missedElement = statsContainer.querySelector('.missed');
       this.skippedElement = statsContainer.querySelector('.skipped');
       this.observer = result => this.update(result);
+      this.score = new Score();
       this.setValues();
     }
 
@@ -223,44 +257,23 @@ namespace display {
     }
 
     intervalEnd(finished: boolean): void {
-      if (finished) {
-        this.finished += 1;
-      } else {
-        this.combo = 0;
-      }
+      this.score.intervalEnd(finished);
       this.setValues();
     }
 
     update(result: TransitionResult): void {
-      switch (result) {
-        case TransitionResult.SUCCESS:
-          this.hit += 1;
-          this.score += 100 + this.combo;
-          this.combo += 1;
-          break;
-        case TransitionResult.FAILED:
-          this.missed += 1;
-          this.combo = 0;
-          break;
-        case TransitionResult.SKIPPED:
-          this.skipped += 1;
-          this.combo = 0;
-          break;
-      }
-      if (this.combo > this.maxCombo) {
-        this.maxCombo = this.combo;
-      }
+      this.score.update(result);
       this.setValues();
     }
 
     setValues(): void {
-      this.comboElement.textContent = this.combo == 0 ? '' : this.combo+' combo';
-      this.scoreElement.textContent = this.score+'';
-      this.maxComboElement.textContent = this.maxCombo+'';
-      this.finishedElement.textContent = this.finished+'';
-      this.hitElement.textContent = this.hit+'';
-      this.missedElement.textContent = this.missed+'';
-      this.skippedElement.textContent = this.skipped+'';
+      this.comboElement.textContent = this.score.combo == 0 ? '' : this.score.combo+' combo';
+      this.scoreElement.textContent = this.score.score+'';
+      this.maxComboElement.textContent = this.score.maxCombo+'';
+      this.finishedElement.textContent = this.score.finished+'';
+      this.hitElement.textContent = this.score.hit+'';
+      this.missedElement.textContent = this.score.missed+'';
+      this.skippedElement.textContent = this.score.skipped+'';
     }
 
     private clearObservers(): void {

src/game/typing.ts

@@ -51,20 +51,17 @@ namespace game {
     }
 
     handleInput(key: string): void {
-      if (key === 'Escape') {
-        this.returnToSelect();
-      } else {
-        this.activeScreen.handleInput(key);
-      }
+      this.activeScreen.handleInput(key);
     }
 
-    returnToSelect(): void {
-      this.context.switchScreen(this.prevScreen);
+    switchScreen(screen: Screen): void {
+      super.switchScreen(screen);
+      if (screen == null) {
+        this.context.switchScreen(this.prevScreen);
+      }
     }
 
-    exit(): void {
-      this.switchScreen(null);
-    }
+    exit(): void {}
 
     transitionExit(): void {}
   }
@@ -120,7 +117,9 @@ namespace game {
     }
 
     handleInput(key: string): void {
-      if (this.isReady && key === ' ') {
+      if (key == 'Escape') {
+        this.context.switchScreen(null);
+      } else if (this.isReady && key === ' ') {
         this.context.switchScreen(new TypingPlayingScreen(this.context));
       }
     }
@@ -199,7 +198,7 @@ namespace game {
 
     checkComplete(): void {
       let currentLine = this.lines[this.currentIndex];
-      if (currentLine.kana == '@' && currentLine.kanji == '@') {
+      if (currentLine != null && currentLine.kana == '@' && currentLine.kanji == '@') {
         this.onComplete(true);
       }
     }
@@ -211,6 +210,9 @@ namespace game {
         this.nextLine();
         this.scoreController.intervalEnd(false);
       }
+      if (this.currentIndex >= this.lines.length) {
+        this.finish();
+      }
       this.checkComplete();
     }
 
@@ -225,7 +227,9 @@ namespace game {
     }
 
     handleInput(key: string): void {
-      if (!this.isWaiting) {
+      if (key === 'Escape') {
+        this.finish();
+      } else if (!this.isWaiting) {
         if (this.inputState !== null && /^[-_ a-z]$/.test(key)) {
           if (this.inputState.handleInput(key)) {
             this.onComplete();
@@ -235,8 +239,10 @@ namespace game {
     }
 
     nextLine(): void {
-      if (this.currentIndex + 1 < this.lines.length) {
+      if (this.currentIndex < this.lines.length) {
         this.currentIndex += 1;
+      }
+      if (this.currentIndex < this.lines.length) {
         this.setLine(this.lines[this.currentIndex]);
       } else {
         this.setLine({ kanji: '@', kana: '@' });
@@ -264,12 +270,15 @@ namespace game {
       this.scoreController.setInputState(this.inputState);
     }
 
-    exit(): void {
-      if (this.context.track !== null) {
-        this.context.track.stop();
-      }
+    finish(): void {
+      this.context.switchScreen(new TypingFinishScreen(
+        this.context,
+        this.scoreController.score
+      ));
     }
 
+    exit(): void {}
+
     transitionExit(): void {
       if (this.context.track !== null) {
         this.kanaController.destroy();
@@ -279,4 +288,37 @@ namespace game {
       this.scoreController.destroy();
     }
   }
+
+  class TypingFinishScreen implements Screen {
+    name: string = 'game-finished';
+
+    constructor(
+      readonly context: TypingScreenContext,
+      readonly score: display.Score
+    ) {
+      let container = this.context.container.querySelector('#score');
+      container.querySelector('.score').textContent = this.score.score+'';
+      container.querySelector('.max-combo').textContent = this.score.maxCombo+'';
+      container.querySelector('.finished').textContent = this.score.finished+'';
+      container.querySelector('.hit').textContent = this.score.hit+'';
+      container.querySelector('.missed').textContent = this.score.missed+'';
+      container.querySelector('.skipped').textContent = this.score.skipped+'';
+    }
+
+    enter(): void {}
+
+    handleInput(key: string): void {
+      if (key === ' ' || key === 'Escape') {
+        this.context.switchScreen(null);
+      }
+    }
+
+    exit(): void {
+      if (this.context.track !== null) {
+        this.context.track.stop();
+      }
+    }
+
+    transitionExit(): void {}
+  }
 }