首页 发现 帮助
登录
games
/
typingfreaks
镜像自地址 https://github.com/thatsmydoing/typingfreaks.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Implement display controllers

Thomas Dy 7 年之前
父节点
efb0c06a97
当前提交
c42f1d43e6
共有 8 个文件被更改，包括 294 次插入 和 16 次删除
合并视图 显示文件统计
  1. 1 0
      dist/index.html
  2. 48 0
      dist/style.css
  3. 6 0
      package-lock.json
  4. 1 0
      package.json
  5. 198 0
      src/display.ts
  6. 4 16
      src/index.ts
  7. 8 0
      src/kana.ts
  8. 28 0
      src/state.ts

+ 1 - 0
dist/index.html
查看文件 

@@ -1,6 +1,7 @@
 
 <html>
 
 <html>
 
   <head>
 
   <head>
 
     <title>Typing Freaks</title>
 
     <title>Typing Freaks</title>
 
+    <link rel="stylesheet" href="style.css" />
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="container"></div>
 
     <div id="container"></div>

+ 48 - 0
dist/style.css
查看文件 

@@ -0,0 +1,48 @@
 
+.kana {
 
+  display: inline-block;
 
+  position: relative;
 
+  color: black;
 
+}
 
+
 
+.kana::after {
 
+  display: inline-block;
 
+  content: attr(data-text);
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  color: red;
 
+  font-weight: bold;
 
+  overflow: hidden;
 
+  width: 0px;
 
+  transition: width 0.1s;
 
+}
 
+
 
+.kana.half::after {
 
+  width: 50%;
 
+}
 
+
 
+.kana.full::after {
 
+  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)
 
+  }
 
+  50% {
 
+    transform: scale(2, 2)
 
+  }
 
+  100% {
 
+    transform: scale(1, 1)
 
+  }
 
+}

+ 6 - 0
package-lock.json
查看文件 

@@ -4,6 +4,12 @@
 
   "lockfileVersion": 1,
 
   "lockfileVersion": 1,
 
   "requires": true,
 
   "requires": true,
 
   "dependencies": {
 
   "dependencies": {
 
+    "@types/es6-collections": {
 
+      "version": "0.5.31",
 
+      "resolved": "https://registry.npmjs.org/@types/es6-collections/-/es6-collections-0.5.31.tgz",
 
+      "integrity": "sha512-djEvbdTH5Uw7V0WqdMQLG4NK3+iu/FMZy/ylyhWEFnW5xOsXEWpivo/dhP+cR43Az+ipytza7dTSnpsWCxKYAw==",
 
+      "dev": true
 
+    },
 
     "typescript": {
 
     "typescript": {
 
       "version": "2.6.2",
 
       "version": "2.6.2",
 
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
 
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",

+ 1 - 0
package.json
查看文件 

@@ -9,6 +9,7 @@
 
   "author": "Thomas Dy <thatsmydoing@gmail.com",
 
   "author": "Thomas Dy <thatsmydoing@gmail.com",
 
   "license": "ISC",
 
   "license": "ISC",
 
   "devDependencies": {
 
   "devDependencies": {
 
+    "@types/es6-collections": "^0.5.31",
 
     "typescript": "^2.6.2"
 
     "typescript": "^2.6.2"
 
   }
 
   }
 
 }
 
 }

+ 198 - 0
src/display.ts
查看文件 

@@ -0,0 +1,198 @@
 
+/*
 
+ * This module handles displaying the UI. The most important one is the main
 
+ * area which contains the text to be typed in. Progress is displayed on the
 
+ * kana part of the area, while errors are shown via the romaji section. The
 
+ * kanji is simply just for reading.
 
+ */
 
+
 
+/// <reference path="kana.ts" />
 
+/// <reference path="state.ts" />
 
+
 
+namespace display {
 
+  import InputState = kana.KanaInputState;
 
+  import TransitionResult = state.TransitionResult;
 
+
 
+  interface Component {
 
+    element: HTMLElement;
 
+    destroy(): void;
 
+  }
 
+
 
+  class KanaDisplayComponent implements Component {
 
+    element: HTMLElement;
 
+    state: state.StateMachine;
 
+    observer: state.Observer;
 
+
 
+    constructor(kana: string, 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('kana');
 
+      this.element.textContent = kana;
 
+      this.element.setAttribute('data-text', kana);
 
+    }
 
+
 
+    rerender(result: TransitionResult): void {
 
+      switch (result) {
 
+        case TransitionResult.SUCCESS:
 
+          this.element.classList.add('half');
 
+          break;
 
+        case TransitionResult.FINISHED:
 
+          this.element.classList.remove('half');
 
+          this.element.classList.add('full');
 
+          break;
 
+      }
 
+    }
 
+
 
+    destroy(): void {
 
+      this.state.removeObserver(this.observer);
 
+    }
 
+  }
 
+
 
+  class KanaDisplayController implements Component {
 
+    element: HTMLElement;
 
+    children: KanaDisplayComponent[];
 
+
 
+    constructor() {
 
+      this.element = document.createElement('div');
 
+      this.children = [];
 
+    }
 
+
 
+    setInputState(inputState: InputState) {
 
+      if (inputState == null) {
 
+        this.children = [];
 
+      } else {
 
+        this.children = inputState.map((kana, machine) => {
 
+          return new KanaDisplayComponent(kana, machine);
 
+        });
 
+        this.children.forEach(child => this.element.appendChild(child.element));
 
+      }
 
+    }
 
+
 
+    private clearChildren(): void {
 
+      this.children.forEach(child => {
 
+        child.destroy();
 
+        this.element.removeChild(child.element);
 
+      });
 
+    }
 
+
 
+    destroy(): void {
 
+      this.clearChildren();
 
+    }
 
+  }
 
+
 
+  class RomajiDisplayComponent implements Component {
 
+    element: HTMLElement;
 
+    state: state.StateMachine;
 
+    observer: state.Observer;
 
+
 
+    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();
 
+    }
 
+
 
+    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;
 
+      }
 
+    }
 
+
 
+    destroy(): void {
 
+      this.state.removeObserver(this.observer);
 
+    }
 
+  }
 
+
 
+  class RomajiDisplayController implements Component {
 
+    element: HTMLElement;
 
+    children: KanaDisplayComponent[];
 
+
 
+    constructor() {
 
+      this.element = document.createElement('div');
 
+      this.children = [];
 
+    }
 
+
 
+    setInputState(inputState: InputState) {
 
+      this.clearChildren();
 
+      if (inputState == null) {
 
+        this.children = [];
 
+      } else {
 
+        this.children = inputState.map((_, machine) => {
 
+          return new RomajiDisplayComponent(machine);
 
+        });
 
+        this.children.forEach(child => this.element.appendChild(child.element));
 
+      }
 
+    }
 
+
 
+    private clearChildren(): void {
 
+      this.children.forEach(child => {
 
+        child.destroy();
 
+        this.element.removeChild(child.element);
 
+      });
 
+    }
 
+
 
+    destroy(): void {
 
+      this.clearChildren();
 
+    }
 
+  }
 
+
 
+  export 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('p');
 
+
 
+      this.element.appendChild(this.kanaController.element);
 
+      this.element.appendChild(this.kanjiHTMLElement);
 
+      this.element.appendChild(this.romajiController.element);
 
+
 
+      document.addEventListener('keydown', event => {
 
+        if (this.inputState !== null) {
 
+          this.inputState.handleInput(event.key);
 
+        }
 
+      });
 
+    }
 
+
 
+    setData(kanji: string, kana: string) {
 
+      if (kanji === '@') {
 
+        this.kanjiHTMLElement.textContent = '';
 
+      } else {
 
+        this.kanjiHTMLElement.textContent = kanji;
 
+      }
 
+
 
+      if (kana === '@') {
 
+        this.inputState = null;
 
+      } else {
 
+        this.inputState = new InputState(kana);
 
+      }
 
+      this.kanaController.setInputState(this.inputState);
 
+      this.romajiController.setInputState(this.inputState);
 
+    }
 
+
 
+    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);
 
+    }
 
+  }
 
+}

+ 4 - 16
src/index.ts
查看文件 

@@ -1,18 +1,6 @@
 
-/// <reference path="kana.ts" />
 
-
 
-let input = 'ちっじゃう';
 
-let inputState = new kana.KanaInputState(input);
 
+/// <reference path="display.ts" />
 
 
 
 let container = document.querySelector('#container');
 
 let container = document.querySelector('#container');
 
-let kanaElement = document.createElement('p');
 
-kanaElement.textContent = input;
 
-container.appendChild(kanaElement);
 
-let romajiElement = document.createElement('p');
 
-romajiElement.textContent = input;
 
-container.appendChild(romajiElement);
 
-
 
-romajiElement.textContent = inputState.getRemainingInput();
 
-document.addEventListener('keydown', event => {
 
-  inputState.handleInput(event.key);
 
-  romajiElement.textContent = inputState.getRemainingInput();
 
-});
 
+let controller = new display.MainAreaController();
 
+container.appendChild(controller.element);
 
+controller.setData('大丈夫ですか', 'だいじょうぶですか');

+ 8 - 0
src/kana.ts
查看文件 

@@ -287,6 +287,14 @@ namespace kana {
 
       this.currentIndex = 0;
 
       this.currentIndex = 0;
 
     }
 
     }
 
 
 
+    map<T>(func: (s: string, m: StateMachine) => T): T[] {
 
+      let result: T[] = [];
 
+      for (let i = 0; i < this.kana.length; ++i) {
 
+        result.push(func(this.kana[i], this.stateMachines[i]));
 
+      }
 
+      return result;
 
+    }
 
+
 
     handleInput(input: string): boolean {
 
     handleInput(input: string): boolean {
 
       if (this.currentIndex >= this.stateMachines.length) return false;
 
       if (this.currentIndex >= this.stateMachines.length) return false;

+ 28 - 0
src/state.ts
查看文件 

@@ -23,6 +23,10 @@ namespace state {
 
     [index: string]: State
 
     [index: string]: State
 
   }
 
   }
 
 
 
+  export interface Observer {
 
+    (result: TransitionResult): void
 
+  }
 
+
 
   export class State {
 
   export class State {
 
     display: string;
 
     display: string;
 
     transitions: StateTransitionList;
 
     transitions: StateTransitionList;
 
@@ -60,14 +64,22 @@ namespace state {
 
     initialState: State;
 
     initialState: State;
 
     finalState: State;
 
     finalState: State;
 
     currentState: State;
 
     currentState: State;
 
+    observers: Set<Observer>;
 
 
 
     constructor(initialState: State, finalState: State) {
 
     constructor(initialState: State, finalState: State) {
 
       this.initialState = initialState;
 
       this.initialState = initialState;
 
       this.currentState = initialState;
 
       this.currentState = initialState;
 
       this.finalState = finalState;
 
       this.finalState = finalState;
 
+      this.observers = new Set();
 
     }
 
     }
 
 
 
     transition(input: string): TransitionResult {
 
     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);
 
       let newState = this.currentState.transition(input);
 
       if (newState == null) {
 
       if (newState == null) {
 
         return TransitionResult.FAILED;
 
         return TransitionResult.FAILED;
 
@@ -81,6 +93,10 @@ namespace state {
 
       }
 
       }
 
     }
 
     }
 
 
 
+    isNew(): boolean {
 
+      return this.currentState === this.initialState;
 
+    }
 
+
 
     isFinished(): boolean {
 
     isFinished(): boolean {
 
       return this.currentState === this.finalState;
 
       return this.currentState === this.finalState;
 
     }
 
     }
 
@@ -105,6 +121,18 @@ namespace state {
 
     getDisplay(): string {
 
     getDisplay(): string {
 
       return this.currentState.display;
 
       return this.currentState.display;
 
     }
 
     }
 
+
 
+    addObserver(observer: Observer): void {
 
+      this.observers.add(observer);
 
+    }
 
+
 
+    removeObserver(observer: Observer): void {
 
+      this.observers.delete(observer);
 
+    }
 
+
 
+    notify(result: TransitionResult): void {
 
+      this.observers.forEach(o => o(result));
 
+    }
 
   }
 
   }
 
 
 
   interface Transition {
 
   interface Transition {