Reorient scoring to be based on kana

src/display.ts

@@ -13,34 +13,53 @@ namespace display {
   import InputState = kana.KanaInputState;
   import TransitionResult = state.TransitionResult;
 
-  interface Component {
+  class SingleKanaDisplayComponent {
     element: HTMLElement;
-    destroy(): void;
+    finished: boolean;
+
+    constructor(kana: string) {
+      this.element = document.createElement('span');
+      this.element.classList.add('kana');
+      this.element.textContent = kana;
+      this.element.setAttribute('data-text', kana);
+      this.finished = false;
+    }
+
+    setPartial() {
+      if (!this.finished) {
+        this.element.classList.add('half');
+      }
+    }
+
+    setFull() {
+      this.finished = true;
+      this.element.classList.remove('half');
+      this.element.classList.add('full');
+    }
   }
 
-  class KanaDisplayComponent implements Component {
-    element: HTMLElement;
+  class KanaMachineController {
     state: state.StateMachine;
-    observer: state.Observer;
+    children: SingleKanaDisplayComponent[];
+    current: number;
+
+    get elements() {
+      return this.children.map(kanaComponent => kanaComponent.element);
+    }
 
     constructor(kana: string, state: state.StateMachine) {
       this.state = state;
-      this.observer = result => this.rerender(result);
+      this.current = 0;
       this.state.addObserver(this.observer);
-      this.element = document.createElement('span');
-      this.element.classList.add('kana');
-      this.element.textContent = kana;
-      this.element.setAttribute('data-text', kana);
+      this.children = kana.split('').map(c => new SingleKanaDisplayComponent(c));
     }
 
-    rerender(result: TransitionResult): void {
-      if (result != TransitionResult.FAILED) {
-        if (this.state.isFinished()) {
-          this.element.classList.remove('half');
-          this.element.classList.add('full');
-        } else {
-          this.element.classList.add('half');
-        }
+    observer: state.Observer = (result, boundary) => {
+      if (boundary) {
+        this.children[this.current].setFull();
+        this.current += 1;
+      } else if (result != TransitionResult.FAILED) {
+        this.children[this.current].setPartial();
       }
     }
 
@@ -49,8 +68,8 @@ namespace display {
     }
   }
 
-  export class KanaDisplayController implements Component {
-    children: KanaDisplayComponent[];
+  export class KanaDisplayController {
+    children: KanaMachineController[];
 
     constructor(readonly element: HTMLElement) {
       this.children = [];
@@ -62,15 +81,21 @@ namespace display {
         this.children = [];
       } else {
         this.children = inputState.map((kana, machine) => {
-          return new KanaDisplayComponent(kana, machine);
+          return new KanaMachineController(kana, machine);
+        });
+        this.children.forEach(child => {
+          child.elements.forEach(kanaElement => {
+            this.element.appendChild(kanaElement);
+          });
         });
-        this.children.forEach(child => this.element.appendChild(child.element));
       }
     }
 
     private clearChildren(): void {
       this.children.forEach(child => {
-        this.element.removeChild(child.element);
+        child.elements.forEach(kanaElement => {
+          this.element.removeChild(kanaElement);
+        });
         child.destroy();
       });
     }
@@ -81,14 +106,12 @@ namespace display {
   }
 
   export class RomajiDisplayController {
-    observer: state.Observer;
     inputState: InputState | null;
 
     constructor(
       readonly firstElement: HTMLElement,
       readonly restElement: HTMLElement
     ) {
-      this.observer = (result) => this.rerender(result);
       this.inputState = null;
     }
 
@@ -99,7 +122,7 @@ namespace display {
         this.inputState.map((_, machine) => {
           machine.addObserver(this.observer);
         });
-        this.rerender(TransitionResult.SUCCESS);
+        this.observer(TransitionResult.SUCCESS, false);
       } else {
         this.firstElement.textContent = '';
         this.restElement.textContent = '';
@@ -114,7 +137,7 @@ namespace display {
       }
     }
 
-    rerender(result: TransitionResult): void {
+    observer: state.Observer = (result) => {
       if (result === TransitionResult.FAILED) {
         this.firstElement.classList.remove('error');
         this.firstElement.offsetHeight; // trigger reflow
@@ -198,13 +221,8 @@ namespace display {
       }
     }
 
-    update(result: TransitionResult): void {
+    update(result: TransitionResult, boundary: boolean): 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;
@@ -214,6 +232,11 @@ namespace display {
           this.combo = 0;
           break;
       }
+      if (boundary) {
+        this.hit += 1;
+        this.score += 100 + this.combo;
+        this.combo += 1;
+      }
       if (this.combo > this.maxCombo) {
         this.maxCombo = this.combo;
       }
@@ -230,10 +253,8 @@ namespace display {
     skippedElement: HTMLElement;
 
     inputState: InputState | null = null;
-    observer: state.Observer;
     score: Score;
 
-
     constructor(
       private scoreContainer: HTMLElement,
       private statsContainer: HTMLElement
@@ -245,7 +266,6 @@ namespace display {
       this.hitElement = util.getElement(statsContainer, '.hit');
       this.missedElement = util.getElement(statsContainer, '.missed');
       this.skippedElement = util.getElement(statsContainer, '.skipped');
-      this.observer = result => this.update(result);
       this.score = new Score();
       this.setValues();
     }
@@ -265,8 +285,8 @@ namespace display {
       this.setValues();
     }
 
-    update(result: TransitionResult): void {
-      this.score.update(result);
+    observer: state.Observer = (result, boundary) => {
+      this.score.update(result, boundary);
       this.setValues();
     }
 

src/kana.ts

@@ -23,13 +23,14 @@ namespace kana {
   import TransitionResult = state.TransitionResult;
   import t = state.makeTransition;
 
-  function literal(source: string): StateMachine {
-    let transitions = [];
+  function literal(source: string, ...extraBoundaries: number[]): StateMachine {
+    let transitions: state.Transition[] = [];
     for (let i = 0; i < source.length; ++i) {
       let from = source.substring(i);
       let input = source.charAt(i);
       let to = source.substring(i+1);
-      transitions.push(t(from, input, to));
+      let boundary = i === (source.length - 1) || extraBoundaries.indexOf(i) >= 0;
+      transitions.push(t(from, input, to, boundary));
     }
     return state.buildFromTransitions(source, transitions);
   }
@@ -38,8 +39,8 @@ namespace kana {
     return state.buildFromTransitions('shi', [
       t('shi', 's', 'hi'),
       t('hi', 'h', 'i'),
-      t('hi', 'i', ''),
-      t('i', 'i', '')
+      t('hi', 'i', '', true),
+      t('i', 'i', '', true)
     ]);
   }
 
@@ -48,7 +49,7 @@ namespace kana {
       t('chi', 'c', 'hi'),
       t('chi', 't', 'i'),
       t('hi', 'h', 'i'),
-      t('i', 'i', '')
+      t('i', 'i', '', true)
     ]);
   }
 
@@ -56,8 +57,8 @@ namespace kana {
     return state.buildFromTransitions('tsu', [
       t('tsu', 't', 'su'),
       t('su', 's', 'u'),
-      t('su', 'u', ''),
-      t('u', 'u', '')
+      t('su', 'u', '', true),
+      t('u', 'u', '', true)
     ]);
   }
 
@@ -65,7 +66,7 @@ namespace kana {
     return state.buildFromTransitions('fu', [
       t('fu', 'f', 'u'),
       t('fu', 'h', 'u'),
-      t('u', 'u', '')
+      t('u', 'u', '', true)
     ]);
   }
 
@@ -73,7 +74,7 @@ namespace kana {
     return state.buildFromTransitions('ji', [
       t('ji', 'j', 'i'),
       t('ji', 'z', 'i'),
-      t('i', 'i', '')
+      t('i', 'i', '', true)
     ]);
   }
 
@@ -81,10 +82,10 @@ namespace kana {
     let source = 'sh' + end;
     let middle = 'h' + end;
     return state.buildFromTransitions(source, [
-      t(source, 's', middle),
+      t(source, 's', middle, true),
       t(middle, 'h', end),
       t(middle, 'y', end),
-      t(end, end, '')
+      t(end, end, '', true)
     ]);
   }
 
@@ -95,10 +96,10 @@ namespace kana {
 
     return state.buildFromTransitions(source, [
       t(source, 'c', middle),
-      t(middle, 'h', end),
-      t(source, 't', altMiddle),
+      t(middle, 'h', end, true),
+      t(source, 't', altMiddle, true),
       t(altMiddle, 'y', end),
-      t(end, end, '')
+      t(end, end, '', true)
     ]);
   }
 
@@ -107,11 +108,11 @@ namespace kana {
     let altMiddle = 'y' + end;
 
     return state.buildFromTransitions(source, [
-      t(source, 'j', end),
+      t(source, 'j', end, true),
       t(source, 'z', altMiddle),
       t(end, 'y', end),
-      t(altMiddle, 'y', end),
-      t(end, end, '')
+      t(altMiddle, 'y', end, true),
+      t(end, end, '', true)
     ]);
   }
 
@@ -120,11 +121,11 @@ namespace kana {
 
     let newState = new State(display.charAt(0) + display);
     Object.keys(transitions).forEach(k => {
-      let nextState = transitions[k];
+      let [nextState, _] = transitions[k];
       let intermediateDisplay = k + nextState.display;
       let intermediateState = new State(intermediateDisplay);
       intermediateState.addTransition(k, nextState);
-      newState.addTransition(k, intermediateState);
+      newState.addTransition(k, intermediateState, true);
     })
 
     return new StateMachine(newState, base.finalState);
@@ -328,50 +329,50 @@ namespace kana {
   });
 
   const DOUBLE_KANA_MAPPING: KanaMapping = {
-    "きゃ": literal('kya'),
-    "きゅ": literal('kyu'),
-    "きょ": literal('kyo'),
+    "きゃ": literal('kya', 0),
+    "きゅ": literal('kyu', 0),
+    "きょ": literal('kyo', 0),
     "しゃ": sh('a'),
     "しゅ": sh('u'),
     "しょ": sh('o'),
     "ちゃ": ch('a'),
     "ちゅ": ch('u'),
     "ちょ": ch('o'),
-    "にゃ": literal('nya'),
-    "にゅ": literal('nyu'),
-    "にょ": literal('nyo'),
-    "ひゃ": literal('hya'),
-    "ひゅ": literal('hyu'),
-    "ひょ": literal('hyo'),
-    "みゃ": literal('mya'),
-    "みゅ": literal('myu'),
-    "みょ": literal('myo'),
-    "りゃ": literal('rya'),
-    "りゅ": literal('ryu'),
-    "りょ": literal('ryo'),
-    "ぎゃ": literal('gya'),
-    "ぎゅ": literal('gyu'),
-    "ぎょ": literal('gyo'),
+    "にゃ": literal('nya', 0),
+    "にゅ": literal('nyu', 0),
+    "にょ": literal('nyo', 0),
+    "ひゃ": literal('hya', 0),
+    "ひゅ": literal('hyu', 0),
+    "ひょ": literal('hyo', 0),
+    "みゃ": literal('mya', 0),
+    "みゅ": literal('myu', 0),
+    "みょ": literal('myo', 0),
+    "りゃ": literal('rya', 0),
+    "りゅ": literal('ryu', 0),
+    "りょ": literal('ryo', 0),
+    "ぎゃ": literal('gya', 0),
+    "ぎゅ": literal('gyu', 0),
+    "ぎょ": literal('gyo', 0),
     "じゃ": j('a'),
     "じゅ": j('u'),
     "じょ": j('o'),
-    "ぢゃ": literal('dya'),
-    "ぢゅ": literal('dyu'),
-    "ぢょ": literal('dyo'),
-    "びゃ": literal('bya'),
-    "びゅ": literal('byu'),
-    "びょ": literal('byo'),
-    "ぴゃ": literal('pya'),
-    "ぴゅ": literal('pyu'),
-    "ぴょ": literal('pyo'),
-    "ふぁ": literal('fa'),
-    "ふぃ": literal('fi'),
-    "ふぇ": literal('fe'),
-    "ふぉ": literal('fo'),
-    "ゔぁ": literal('va'),
-    "ゔぃ": literal('vi'),
-    "ゔぇ": literal('ve'),
-    "ゔぉ": literal('vo')
+    "ぢゃ": literal('dya', 0),
+    "ぢゅ": literal('dyu', 0),
+    "ぢょ": literal('dyo', 0),
+    "びゃ": literal('bya', 0),
+    "びゅ": literal('byu', 0),
+    "びょ": literal('byo', 0),
+    "ぴゃ": literal('pya', 0),
+    "ぴゅ": literal('pyu', 0),
+    "ぴょ": literal('pyo', 0),
+    "ふぁ": literal('fa', 0),
+    "ふぃ": literal('fi', 0),
+    "ふぇ": literal('fe', 0),
+    "ふぉ": literal('fo', 0),
+    "ゔぁ": literal('va', 0),
+    "ゔぃ": literal('vi', 0),
+    "ゔぇ": literal('ve', 0),
+    "ゔぉ": literal('vo', 0)
   }
 
   const TRIPLE_KANA_MAPPING: KanaMapping = {};
@@ -482,7 +483,7 @@ namespace kana {
       if (this.currentIndex >= this.stateMachines.length) return false;
 
       let currentMachine = this.stateMachines[this.currentIndex];
-      let result = currentMachine.transition(input);
+      currentMachine.transition(input);
       while (currentMachine.isFinished()) {
         this.currentIndex += 1;
         currentMachine = this.stateMachines[this.currentIndex];

src/state.ts

@@ -13,11 +13,11 @@ namespace state {
   }
 
   interface StateTransitionList {
-    [index: string]: State
+    [index: string]: [State, boolean]
   }
 
   export interface Observer {
-    (result: TransitionResult): void
+    (result: TransitionResult, boundary: boolean): void;
   }
 
   export class State {
@@ -29,11 +29,11 @@ namespace state {
       this.transitions = {};
     }
 
-    addTransition(input: string, state: State): void {
-      this.transitions[input] = state;
+    addTransition(input: string, state: State, boundary: boolean = false): void {
+      this.transitions[input] = [state, boundary];
     }
 
-    transition(input: string): State | null {
+    transition(input: string): [State, boolean] | null {
       return this.transitions[input];
     }
 
@@ -59,48 +59,45 @@ namespace state {
       this.nextMachine = null;
     }
 
-    transition(input: string): TransitionResult {
-      let result = this._transition(input);
-      this.notify(result);
-      return result;
-    }
-
-    private _transition(input: string): TransitionResult {
-      let newState = this.currentState.transition(input);
-      if (newState == null) {
-        if (this.skipTransition(input)) {
-          return TransitionResult.SKIPPED;
-        } else {
-          return TransitionResult.FAILED;
-        }
+    transition(input: string) {
+      let result = this.currentState.transition(input);
+      if (result == null) {
+        this.skipTransition(input);
       } else {
+        let [newState, boundary] = result;
         this.currentState = newState;
-        return TransitionResult.SUCCESS;
+        this.notifyResult(TransitionResult.SUCCESS, boundary);
       }
     }
 
     private skipTransition(input: string): boolean {
-      let potentialNextStates: State[] = Object.keys(this.currentState.transitions).map(k => this.currentState.transitions[k]);
+      let potentialNextStates: Array<[State, boolean]> = Object.keys(this.currentState.transitions).map(k => this.currentState.transitions[k]);
       for (let i = 0; i < potentialNextStates.length; ++i) {
-        let state = potentialNextStates[i];
+        let [state, skippedBoundary] = potentialNextStates[i];
         if (state === this.finalState) {
           if (this.nextMachine != null) {
             let result = this.nextMachine.initialState.transition(input);
             if (result != null) {
+              const [newState, boundary] = result;
               this.currentState = state;
-              this.nextMachine.currentState = result;
-              this.nextMachine.notify(TransitionResult.SUCCESS);
+              this.nextMachine.currentState = newState;
+              this.notifyResult(TransitionResult.SKIPPED, skippedBoundary);
+              this.nextMachine.notifyResult(TransitionResult.SUCCESS, boundary);
               return true;
             }
           }
         } else {
           let result = state.transition(input);
           if (result != null) {
-            this.currentState = result;
+            let [newState, boundary] = result;
+            this.currentState = newState;
+            this.notifyResult(TransitionResult.SKIPPED, skippedBoundary);
+            this.notifyResult(TransitionResult.SUCCESS, boundary);
             return true;
           }
         }
       }
+      this.notifyResult(TransitionResult.FAILED, false);
       return false;
     }
 
@@ -136,15 +133,16 @@ namespace state {
       this.observers.delete(observer);
     }
 
-    notify(result: TransitionResult): void {
-      this.observers.forEach(o => o(result));
+    notifyResult(result: TransitionResult, boundary: boolean): void {
+      this.observers.forEach(o => o(result, boundary));
     }
   }
 
-  interface Transition {
+  export interface Transition {
     from: string,
     input: string,
-    to: string
+    to: string,
+    boundary: boolean
   }
 
   export function buildFromTransitions(initial: string, transitions: Transition[]): StateMachine {
@@ -158,14 +156,19 @@ namespace state {
     transitions.forEach(t => {
       let fromState = getState(t.from);
       let toState = getState(t.to);
-      fromState.addTransition(t.input, toState);
+      fromState.addTransition(t.input, toState, t.boundary);
     })
     let initialState = getState(initial);
     let finalState = getState('');
     return new StateMachine(initialState, finalState);
   }
 
-  export function makeTransition(from: string, input: string, to: string): Transition {
-    return { from, input, to };
+  export function makeTransition(
+    from: string,
+    input: string,
+    to: string,
+    boundary: boolean = false
+  ): Transition {
+    return { from, input, to, boundary };
   }
 }