Make main game section pretty

dist/index.html

@@ -20,11 +20,14 @@
       <div id="song-list"></div>
       <div id="game">
         <div class="track-progress">
+          <span class="total-label">Total Time</span>
+          <span class="interval-label">Interval</span>
           <template class="total" name="progress-bar"></template>
           <template class="interval" name="progress-bar"></template>
         </div>
         <div class="kana-line"></div>
         <div class="kanji-line"></div>
+        <div class="romaji-first"></div>
         <div class="romaji-line"></div>
       </div>
       <div id="loader">

dist/style.css

@@ -69,7 +69,7 @@
 #container {
   display: grid;
   grid-template-columns: [start] auto [right] 300px [end];
-  grid-template-rows: [top] 50px [header] auto [game] 150px [bottom];
+  grid-template-rows: [top] 50px [header] auto [game] 180px [bottom];
 
   height: 450px;
   width: 800px;
@@ -116,7 +116,7 @@
 }
 
 #game {
-  top: 150px;
+  top: 180px;
   grid-column: start / end;
   grid-row: game / bottom;
 }
@@ -364,6 +364,103 @@
 
 /* }}} */
 
+/* track-progress {{{ */
+
+.track-progress {
+  display: grid;
+  grid-template-columns: max-content auto;
+  grid-template-rows: 50% 50%;
+  grid-template-areas:
+    "tl tb"
+    "il ib";
+  grid-gap: 0px 10px;
+  align-items: center;
+  align-self: end;
+}
+
+.track-progress .total-label,
+.track-progress .interval-label {
+  justify-self: right;
+  font-variant-caps: small-caps;
+  font-size: 12px;
+}
+
+.track-progress .total-label {
+  grid-area: tl;
+}
+
+.track-progress .interval-label {
+  grid-area: il;
+  justify-self: right;
+}
+
+.track-progress .total {
+  grid-area: tb;
+}
+
+.track-progress .interval {
+  grid-area: ib;
+}
+
+
+/* }}} */
+
+/* typing area {{{ */
+
+#game {
+  display: grid;
+  grid-template-columns: 50px 50px auto;
+  grid-template-rows: auto 12px 30px 40px;
+  grid-template-areas:
+    ". . track"
+    ". . kana"
+    ". . kanji"
+    "romaji-first romaji romaji";
+  padding: 20px;
+}
+
+#game .track-progress {
+  grid-area: track;
+}
+
+#game .kana-line {
+  grid-area: kana;
+  font-size: 12px;
+  margin-left: 15px;
+}
+
+#game .kanji-line {
+  grid-area: kanji;
+  padding-left: 5px;
+  border-bottom: solid 2px rgba(255, 255, 255, 0.5);
+  border-left: solid 10px rgba(255, 255, 255, 0.5);
+  border-radius: 0px 0px 0px 10px;
+}
+
+#game .romaji-first,
+#game .romaji-line {
+  text-transform: uppercase;
+  align-self: baseline;
+}
+
+#game .romaji-first {
+  grid-area: romaji-first;
+  justify-self: right;
+  font-size: 36px;
+  padding: 0px 2px;
+}
+
+#game .romaji-line {
+  grid-area: romaji;
+  font-size: 20px;
+}
+
+#game .romaji-first.error {
+  animation: pulse 0.2s;
+}
+
+/* }}} */
+
 .kana {
   display: inline-block;
   position: relative;
@@ -391,25 +488,15 @@
   width: 100%;
 }
 
-.romaji {
-  display: inline-block;
-}
-
-.romaji.error {
-  animation-name: pulse;
-  animation-duration: 0.5s;
-  animation-iteration-count: 1;
-}
-
 @keyframes pulse {
   0% {
-    transform: scale(1, 1)
+    color: var(--base-color);
   }
   50% {
-    transform: scale(2, 2)
+    color: red;
   }
   100% {
-    transform: scale(1, 1)
+    color: var(--base-color);
   }
 }
 
@@ -418,7 +505,8 @@
   opacity: 0.5;
 }
 
-#game.waiting .romaji {
+#game.waiting .romaji-first,
+#game.waiting .romaji-line {
   color: transparent;
 }
 

src/display.ts

@@ -22,6 +22,7 @@ namespace display {
     element: HTMLElement;
     state: state.StateMachine;
     observer: state.Observer;
+    remove: () => void;
 
     constructor(kana: string, state: state.StateMachine) {
       this.state = state;
@@ -81,67 +82,53 @@ namespace display {
     }
   }
 
-  class RomajiDisplayComponent implements Component {
-    element: HTMLElement;
-    state: state.StateMachine;
+  export class RomajiDisplayController {
     observer: state.Observer;
+    inputState: InputState | null;
 
-    constructor(state: state.StateMachine) {
-      this.state = state;
-      this.observer = result => this.rerender(result);
-      this.state.addObserver(this.observer);
-      this.element = document.createElement('span');
-      this.element.classList.add('romaji');
-      this.element.textContent = this.state.getDisplay();
+    constructor(
+      readonly firstElement: HTMLElement,
+      readonly restElement: HTMLElement
+    ) {
+      this.observer = (result) => this.rerender(result);
     }
 
-    rerender(result: TransitionResult): void {
-      switch (result) {
-        case TransitionResult.FAILED:
-          this.element.classList.remove('error');
-          this.element.offsetHeight; // trigger reflow
-          this.element.classList.add('error');
-          break;
-        case TransitionResult.SUCCESS:
-        case TransitionResult.FINISHED:
-          this.element.textContent = this.state.getDisplay();
-          break;
+    setInputState(inputState: InputState) {
+      this.clearObservers();
+      this.inputState = inputState;
+      if (this.inputState != null) {
+        this.inputState.map((_, machine) => {
+          machine.addObserver(this.observer);
+        });
+        this.rerender(TransitionResult.SUCCESS);
+      } else {
+        this.firstElement.textContent = '';
+        this.restElement.textContent = '';
       }
     }
 
-    destroy(): void {
-      this.state.removeObserver(this.observer);
-    }
-  }
-
-  export class RomajiDisplayController implements Component {
-    children: KanaDisplayComponent[];
-
-    constructor(readonly element: HTMLElement) {
-      this.children = [];
-    }
-
-    setInputState(inputState: InputState) {
-      this.clearChildren();
-      if (inputState == null) {
-        this.children = [];
-      } else {
-        this.children = inputState.map((_, machine) => {
-          return new RomajiDisplayComponent(machine);
+    private clearObservers(): void {
+      if (this.inputState != null) {
+        this.inputState.map((_, machine) => {
+          machine.removeObserver(this.observer);
         });
-        this.children.forEach(child => this.element.appendChild(child.element));
       }
     }
 
-    private clearChildren(): void {
-      this.children.forEach(child => {
-        child.destroy();
-        this.element.removeChild(child.element);
-      });
+    rerender(result: TransitionResult): void {
+      if (result === TransitionResult.FAILED) {
+        this.firstElement.classList.remove('error');
+        this.firstElement.offsetHeight; // trigger reflow
+        this.firstElement.classList.add('error');
+      } else {
+        let remaining = this.inputState.getRemainingInput();
+        this.firstElement.textContent = remaining.charAt(0);
+        this.restElement.textContent = remaining.substring(1);
+      }
     }
 
     destroy(): void {
-      this.clearChildren();
+      this.clearObservers();
     }
   }
 

src/game/typing.ts

@@ -150,6 +150,7 @@ namespace game {
       this.inputState = null;
       this.kanjiElement = this.gameContainer.querySelector('.kanji-line');
       this.romajiController = new display.RomajiDisplayController(
+        this.gameContainer.querySelector('.romaji-first'),
         this.gameContainer.querySelector('.romaji-line')
       );
       this.kanaController = new display.KanaDisplayController(