Migrate core game logic to typing

dist/index.html

@@ -16,7 +16,12 @@
       </div>
       <div id="song-info"></div>
       <div id="song-list"></div>
-      <div id="game"></div>
+      <div id="game">
+        <div class="track-progress"></div>
+        <div class="kana-line"></div>
+        <div class="kanji-line"></div>
+        <div class="romaji-line"></div>
+      </div>
       <div id="loader"></div>
       <div id="ready">
         <div class="status"></div>

dist/style.css

@@ -413,11 +413,12 @@
   }
 }
 
-.level-control.waiting span {
+#game.waiting .kana-line,
+#game.waiting .kanji-line {
   opacity: 0.5;
 }
 
-.level-control.waiting .romaji {
+#game.waiting .romaji {
   color: transparent;
 }
 

src/display.ts

@@ -7,7 +7,6 @@
 
 /// <reference path="kana.ts" />
 /// <reference path="state.ts" />
-/// <reference path="audio.ts" />
 /// <reference path="util.ts" />
 
 namespace display {
@@ -51,12 +50,10 @@ namespace display {
     }
   }
 
-  class KanaDisplayController implements Component {
-    element: HTMLElement;
+  export class KanaDisplayController implements Component {
     children: KanaDisplayComponent[];
 
-    constructor() {
-      this.element = document.createElement('div');
+    constructor(readonly element: HTMLElement) {
       this.children = [];
     }
 
@@ -117,12 +114,10 @@ namespace display {
     }
   }
 
-  class RomajiDisplayController implements Component {
-    element: HTMLElement;
+  export class RomajiDisplayController implements Component {
     children: KanaDisplayComponent[];
 
-    constructor() {
-      this.element = document.createElement('div');
+    constructor(readonly element: HTMLElement) {
       this.children = [];
     }
 
@@ -150,177 +145,18 @@ namespace display {
     }
   }
 
-  class MainAreaController implements Component {
-    element: HTMLElement;
-    inputState: InputState | null;
-    kanaController: KanaDisplayController;
-    romajiController: RomajiDisplayController;
-    kanjiHTMLElement: HTMLElement;
-
-    constructor() {
-      this.element = document.createElement('div');
-      this.kanaController = new KanaDisplayController();
-      this.romajiController = new RomajiDisplayController();
-      this.kanjiHTMLElement = document.createElement('span');
-
-      this.element.appendChild(this.kanaController.element);
-      this.element.appendChild(this.kanjiHTMLElement);
-      this.element.appendChild(this.romajiController.element);
-    }
-
-    setData(kanji: string, kana: InputState) {
-      this.kanjiHTMLElement.textContent = kanji;
-      this.kanaController.setInputState(kana);
-      this.romajiController.setInputState(kana);
-    }
-
-    destroy(): void {
-      this.kanaController.destroy();
-      this.romajiController.destroy();
-      this.element.removeChild(this.kanaController.element);
-      this.element.removeChild(this.kanjiHTMLElement);
-      this.element.removeChild(this.romajiController.element);
-    }
-  }
-
-  enum LevelState {
-    PLAYING,
-    WAITING,
-    FINISH
-  }
-
-  export class LevelController implements Component {
-    element: HTMLElement;
-    currentIndex: number;
-    inputState: InputState | null;
-    mainAreaController: MainAreaController;
-    progressController: TrackProgressController | null;
-    state: LevelState;
-
-    constructor(readonly level: level.Level, readonly track: audio.Track | null) {
-      this.element = document.createElement('div');
-      this.level = level;
-      this.currentIndex = -1;
-      this.inputState = null;
-      this.mainAreaController = new MainAreaController();
-      this.progressController = null;
-      this.state = LevelState.PLAYING;
-
-      this.element.className = 'level-control';
-      this.element.appendChild(this.mainAreaController.element);
-
-      if (this.level.audio == null) {
-        this.level.lines = this.level.lines.filter(line => line.kana != "@");
-      } else {
-        this.progressController = new TrackProgressController(this.level);
-        this.element.insertBefore(
-          this.progressController.element,
-          this.mainAreaController.element
-        );
-        this.progressController.setListener(event => this.onIntervalEnd());
-      }
-    }
-
-    onStart(): void {
-      this.nextLine();
-      if (this.track !== null) {
-        this.progressController.start();
-        this.track.play();
-      }
-
-      this.setState(LevelState.PLAYING);
-      this.checkComplete();
-    }
-
-    checkComplete(): void {
-      let currentLine = this.level.lines[this.currentIndex];
-      if (currentLine.kana == '@' && currentLine.kanji == '@') {
-        this.onComplete();
-      }
-    }
-
-    onIntervalEnd(): void {
-      if (this.state === LevelState.WAITING) {
-        this.setState(LevelState.PLAYING);
-      } else if (this.state === LevelState.PLAYING) {
-        this.nextLine();
-      }
-      this.checkComplete();
-    }
-
-    onComplete(): void {
-      this.nextLine();
-      if (this.track !== null) {
-        this.setState(LevelState.WAITING);
-      }
-    }
-
-    setState(state: LevelState): void {
-      if (state === LevelState.WAITING) {
-        this.element.classList.add('waiting');
-      } else {
-        this.element.classList.remove('waiting');
-      }
-      this.state = state;
-    }
-
-    handleInput(key: string): void {
-      switch (this.state) {
-        case LevelState.PLAYING:
-          if (this.inputState !== null && /^[-_ a-z]$/.test(key)) {
-            if (this.inputState.handleInput(key)) {
-              this.onComplete();
-            }
-          }
-          break;
-      }
-    }
-
-    nextLine(): void {
-      if (this.currentIndex + 1 < this.level.lines.length) {
-        this.currentIndex += 1;
-        this.setLine(this.level.lines[this.currentIndex]);
-      } else {
-        this.setLine({ kanji: '@', kana: '@' });
-      }
-    }
-
-    setLine(line: level.Line): void {
-      let kanji, inputState;
-      if (line.kanji === '@') {
-        kanji = '';
-      } else {
-        kanji = line.kanji;
-      }
-
-      if (line.kana === '@') {
-        inputState = null;
-      } else {
-        inputState = new InputState(line.kana);
-      }
-
-      this.inputState = inputState;
-      this.mainAreaController.setData(kanji, inputState);
-    }
-
-    destroy(): void {
-      if (this.track != null) {
-        this.track.stop();
-      }
-    }
-  }
-
-  class TrackProgressController implements Component {
-    element: HTMLElement;
+  export class TrackProgressController {
     totalBar: HTMLElement;
     intervalBar: HTMLElement;
 
-    constructor(level: level.Level) {
-      this.element = document.createElement('div');
-      this.totalBar = this.createBar();
-      this.intervalBar = this.createBar();
-
-      let lines = level.lines;
+    constructor(private element: HTMLElement, lines: level.Line[]) {
+      if (element.firstChild === null) {
+        this.totalBar = this.createBar();
+        this.intervalBar = this.createBar();
+      } else {
+        this.totalBar = element.children[0].querySelector('.shade');
+        this.intervalBar = element.children[1].querySelector('.shade');
+      }
 
       let totalDuration = lines[lines.length - 1].end;
       this.totalBar.style.animationName = 'progress';
@@ -353,6 +189,9 @@ namespace display {
       this.intervalBar.addEventListener('animationend', func);
     }
 
-    destroy(): void {}
+    destroy(): void {
+      this.intervalBar.style.animationName = '';
+      this.totalBar.style.animationName = '';
+    }
   }
 }

src/game/typing.ts

@@ -1,4 +1,5 @@
 /// <reference path="../audio.ts" />
+/// <reference path="../kana.ts" />
 /// <reference path="../level.ts" />
 /// <reference path="../display.ts" />
 /// <reference path="common.ts" />
@@ -134,24 +135,129 @@ namespace game {
 
   class TypingPlayingScreen implements Screen {
     readonly name: string = 'game-playing';
-    gameController: display.LevelController;
+    gameContainer: HTMLElement;
+    currentIndex: number;
+    inputState: kana.KanaInputState | null;
+    isWaiting: boolean;
+    kanjiElement: HTMLElement;
+    kanaController: display.KanaDisplayController;
+    romajiController: display.RomajiDisplayController;
+    progressController: display.TrackProgressController | null;
+    lines: level.Line[];
 
-    constructor(readonly context: TypingScreenContext) {}
+    constructor(readonly context: TypingScreenContext) {
+      this.gameContainer = this.context.container.querySelector('#game');
+      this.currentIndex = -1;
+      this.inputState = null;
+      this.kanjiElement = this.gameContainer.querySelector('.kanji-line');
+      this.romajiController = new display.RomajiDisplayController(
+        this.gameContainer.querySelector('.romaji-line')
+      );
+      this.kanaController = new display.KanaDisplayController(
+        this.gameContainer.querySelector('.kana-line')
+      );
+      this.progressController = null;
+      this.lines = this.context.level.lines;
+    }
 
     enter(): void {
-      let gameContainer = this.context.container.querySelector('#game');
-      util.clearChildren(gameContainer);
-      this.gameController = new display.LevelController(this.context.level, this.context.track);
-      gameContainer.appendChild(this.gameController.element);
-      this.gameController.onStart();
+      if (this.context.level.audio == null) {
+        this.lines = this.context.level.lines.filter(line => line.kana != "@");
+      } else {
+        this.progressController = new display.TrackProgressController(
+          this.gameContainer.querySelector('.track-progress'),
+          this.lines
+        );
+        this.progressController.setListener(event => this.onIntervalEnd());
+      }
+      this.onStart();
+    }
+
+    setWaiting(waiting: boolean): void {
+      this.gameContainer.classList.toggle('waiting', waiting);
+      this.isWaiting = waiting;
+    }
+
+    onStart(): void {
+      this.nextLine();
+      if (this.context.track !== null) {
+        this.progressController.start();
+        this.context.track.play();
+      }
+
+      this.setWaiting(false);
+      this.checkComplete();
+    }
+
+    checkComplete(): void {
+      let currentLine = this.lines[this.currentIndex];
+      if (currentLine.kana == '@' && currentLine.kanji == '@') {
+        this.onComplete();
+      }
+    }
+
+    onIntervalEnd(): void {
+      if (this.isWaiting) {
+        this.setWaiting(false);
+      } else {
+        this.nextLine();
+      }
+      this.checkComplete();
+    }
+
+    onComplete(): void {
+      this.nextLine();
+      if (this.context.track !== null) {
+        this.setWaiting(true);
+      }
     }
 
     handleInput(key: string): void {
-      this.gameController.handleInput(key);
+      if (!this.isWaiting) {
+        if (this.inputState !== null && /^[-_ a-z]$/.test(key)) {
+          if (this.inputState.handleInput(key)) {
+            this.onComplete();
+          }
+        }
+      }
+    }
+
+    nextLine(): void {
+      if (this.currentIndex + 1 < this.lines.length) {
+        this.currentIndex += 1;
+        this.setLine(this.lines[this.currentIndex]);
+      } else {
+        this.setLine({ kanji: '@', kana: '@' });
+      }
+    }
+
+    setLine(line: level.Line): void {
+      let kanji, inputState;
+      if (line.kanji === '@') {
+        kanji = '';
+      } else {
+        kanji = line.kanji;
+      }
+
+      if (line.kana === '@') {
+        inputState = null;
+      } else {
+        inputState = new kana.KanaInputState(line.kana);
+      }
+
+      this.inputState = inputState;
+      this.kanjiElement.textContent = kanji;
+      this.kanaController.setInputState(this.inputState);
+      this.romajiController.setInputState(this.inputState);
     }
 
     exit(): void {
-      this.gameController.destroy();
+      if (this.context.track !== null) {
+        this.kanaController.destroy();
+        this.romajiController.destroy();
+        this.progressController.destroy();
+        this.context.track.stop();
+      }
     }
   }
 }