Merge pull request #2 from tomoemon/remove-key-generics

remove generic virtual key

Author: tomoemon

examples/react-keyboardguide/src/App.tsx

@@ -1,9 +1,9 @@
-import { KeyRect, KeyTop, KeyboardState, KeyboardStateReader, guide, keyboard } from 'emiel'
+import { KeyRect, KeyTop, KeyboardState, guide, keyboard } from 'emiel'
 import { useEffect, useState } from 'react';
 import * as emiel from 'emiel';
 
 function App() {
-  const [keyboardState, setKeyboardState] = useState<KeyboardStateReader>(new KeyboardState([]));
+  const [keyboardState, setKeyboardState] = useState<emiel.KeyboardStateReader>(new KeyboardState([]));
   useEffect(() => {
     emiel.activate(window, (evt) => {
       console.log("down", evt.input.key);
@@ -125,7 +125,7 @@ function KeyboardGuideComponent(props: {
   layoutName: string,
   physicalLayoutName: string,
   guideName: string,
-  kbdState: KeyboardStateReader,
+  kbdState: emiel.KeyboardStateReader,
   showVirtualKeyCodes: boolean,
 }) {
   // console.log("guide component", props.layout.name, props.kbdGuide.guideData.name);

examples/react-multi-word/src/App.tsx

@@ -2,7 +2,6 @@ import "./App.css";
 import * as emiel from "emiel";
 import { useEffect, useState } from "react";
 import { Word } from "./word";
-import { InputEvent } from "../../../dist/types/core/ruleStroke";
 
 // 繰り返し次のワードを生成するジェネレータ
 const wordGen = (function* wordGenerator(): Generator<string, string> {
@@ -26,7 +25,7 @@ const initialWords = Array.from({ length: 3 }, () => wordGen.next().value);
 class PositionAutomaton implements emiel.Inputtable {
   constructor(readonly base: emiel.Automaton, readonly position: number) {
   }
-  input(stroke: InputEvent<emiel.VirtualKey>): emiel.InputResult {
+  input(stroke: emiel.InputEvent): emiel.InputResult {
     return this.base.input(stroke);
   }
   reset(): void {

examples/react-result-record/src/App.tsx

@@ -16,7 +16,8 @@ function App() {
     displayedAt: Date,
     missCount: number
   ) => {
-    setWordRecords([
+    console.log("missCount: ", missCount);
+    setWordRecords((wordRecords) => [
       ...wordRecords,
       {
         automaton: a,

examples/react-result-record/src/Typing.tsx

@@ -28,9 +28,11 @@ export function Typing(props: {
   useEffect(() => {
     setWordDisplayedAt(new Date());
     return emiel.activate(window, (e) => {
+      console.log("missCount in activate: ", missCount);
       setLastInputKey(e.input);
       const result = automaton.input(e);
       if (result.isFinished) {
+        console.log("missCount in: ", missCount);
         props.onWordFinished(automaton, wordDisplayedAt, missCount);
         if (wordIndex === words.length - 1) {
           props.onFinished();
@@ -54,6 +56,12 @@ export function Typing(props: {
         <span style={{ color: "gray" }}>{automaton.finishedRoman}</span>{" "}
         {automaton.pendingRoman}
       </h1>
+      <h2>
+        Miss:{" "}
+        <code>
+          {missCount}
+        </code>
+      </h2>
       <h2>
         Key:{" "}
         <code style={{ border: "1px solid gray", padding: "0.2rem" }}>

examples/react-stroke-graph/src/typingGraph.tsx

@@ -44,21 +44,21 @@ export function TypingGraph(props: {
       }
     });
     return deactivate;
-  }, [props.automaton]);
+  }, [automaton, graphData.edges, graphData.nodes, graphData.nodesMap, props, props.automaton]);
 
-  const finishedRomanSubstr = automaton.finishedRomanSubstr;
-  const pendingRomanSubstr = automaton.pendingRomanSubstr;
+  const finishedRomanSubstr = automaton.finishedRoman;
+  const pendingRomanSubstr = automaton.pendingRoman;
   return (
     <>
       <h2>{props.ruleName}</h2>
       <h1>
-        <span style={{ color: "gray" }}>{automaton.finishedWordSubstr}</span>{" "}
-        {automaton.pendingWordSubstr}
+        <span style={{ color: "gray" }}>{automaton.finishedWord}</span>{" "}
+        {automaton.pendingWord}
       </h1>
       {finishedRomanSubstr || pendingRomanSubstr ? (
         <h1>
-          <span style={{ color: "gray" }}>{automaton.finishedRomanSubstr}</span>{" "}
-          {automaton.pendingRomanSubstr}
+          <span style={{ color: "gray" }}>{automaton.finishedRoman}</span>{" "}
+          {automaton.pendingRoman}
         </h1>
       ) : (
         <></>