add stats

Author: tomoemon

examples/react-backspace/src/backspace.ts

@@ -12,7 +12,7 @@ export class BackspaceRequirdAutomaton {
 	}
 
 	input(stroke: InputEvent): InputResult {
-		const { result, acceptedEdge } = this.base.testInput(stroke);
+		const [result, apply] = this.base.testInput(stroke);
 		if (result.isIgnored) {
 			return result;
 		}
@@ -25,7 +25,7 @@ export class BackspaceRequirdAutomaton {
 			this._failedInputs.push(stroke);
 		}
 		// 状態遷移する
-		this.base.applyState(stroke, result, acceptedEdge);
+		apply()
 		return result;
 	}
 

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

@@ -1,6 +1,6 @@
 import "./App.css";
 import * as emiel from "emiel";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Typing } from "./Typing";
 import { Record, WordRecordValue } from "./Record";
 
@@ -9,34 +9,40 @@ function App() {
   useEffect(() => {
     emiel.keyboard.detect(window).then(setLayout);
   }, []);
-  const [isFinished, setIsFinished] = useState(false);
+  const automatons = useMemo(() => {
+    const words = ["おをひく", "こんとん", "がっこう", "aから@"];
+    return words.map((w) => {
+      return emiel.rule.getRoman(layout).build(w);
+    })
+  }, [layout])
+  const [wordIndex, setWordIndex] = useState(0);
   const [wordRecords, setWordRecords] = useState<WordRecordValue[]>([]);
   const onWordFinished = (
     a: emiel.Automaton,
     displayedAt: Date,
-    missCount: number
   ) => {
-    console.log("missCount: ", missCount);
     setWordRecords((wordRecords) => [
       ...wordRecords,
       {
         automaton: a,
         displayedAt,
-        firstInputtedAt: a.succeededInputs[0].event.timestamp,
+        firstInputtedAt: a.histories[0].event.timestamp,
         finishedAt:
-          a.succeededInputs[a.succeededInputs.length - 1].event.timestamp,
-        missCount: missCount,
+          a.histories[a.histories.length - 1].event.timestamp,
       },
     ]);
+    setWordIndex((current) => {
+      return current + 1;
+    });
   };
   return layout ? (
-    isFinished ? (
+    wordIndex >= automatons.length ? (
       <Record wordRecords={wordRecords} />
     ) : (
       <Typing
         layout={layout}
+        automaton={automatons[wordIndex]}
         onWordFinished={onWordFinished}
-        onFinished={() => setIsFinished(true)}
       />
     )
   ) : (

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

@@ -3,35 +3,22 @@ import * as emiel from "emiel";
 export type WordRecordValue = {
   automaton: emiel.Automaton;
   displayedAt: Date;
-  firstInputtedAt: Date;
-  finishedAt: Date;
-  missCount: number;
 };
 
 export function Record(props: { wordRecords: WordRecordValue[] }) {
   const records = props.wordRecords.map((record) => {
     // ワードが表示されてから1打鍵めに成功するまでの経過時間
+    const automaton = record.automaton;
     const latency =
-      record.firstInputtedAt.getTime() - record.displayedAt.getTime();
-    // latency の時間を除いた、1分あたりの打鍵数
-    // 「latency の時間を除く」＝「1打鍵めに要する時間を除く」ということなので、
-    // 打鍵数を1減らして計算する
-    const rkpm = Math.trunc(
-      ((record.automaton.succeededInputs.length - 1) /
-        (record.finishedAt.getTime() - record.firstInputtedAt.getTime())) *
-      1000 *
-      60
-    );
+      automaton.firstInputTime.getTime() - record.displayedAt.getTime();
+    const rkpm = emiel.stats.rkpm(
+      automaton.histories.length,
+      automaton.firstInputTime,
+      automaton.lastInputTime);
+
     // latency の時間を含めた、1分あたりの打鍵数
-    const kpm = Math.trunc(
-      (record.automaton.succeededInputs.length /
-        (record.finishedAt.getTime() - record.displayedAt.getTime())) *
-      1000 *
-      60
-    );
-    const accuracy =
-      record.automaton.succeededInputs.length /
-      (record.missCount + record.automaton.succeededInputs.length);
+    const kpm = emiel.stats.kpm(automaton.histories.length, record.displayedAt, automaton.lastInputTime);
+    const accuracy = emiel.stats.accuracy(record.automaton.failedInputCount, record.automaton.totalInputCount);
     return {
       latency,
       kpm,
@@ -42,26 +29,27 @@ export function Record(props: { wordRecords: WordRecordValue[] }) {
     };
   });
   const totalLatency = records.reduce((acc, r) => acc + r.latency, 0);
-  const totalSucceededKeys = records.reduce(
-    (acc, r) => acc + r.record.automaton.succeededInputs.length,
+  const totalSucceededCount = records.reduce(
+    (acc, r) => acc + r.record.automaton.histories.length,
     0
   );
-  const totalMissedKeys = records.reduce(
-    (acc, r) => acc + r.record.missCount,
+  const totalFailedCount = records.reduce(
+    (acc, r) => acc + r.record.automaton.failedInputCount,
     0
   );
+  const totalAccuracy = emiel.stats.accuracy(totalFailedCount, totalSucceededCount);
   return (
     <div>
       <h1>Finished!</h1>
       <div style={{ display: "flex", justifyContent: "center" }}>
         <table style={{ border: "0" }}>
           <tr>
             <td>inputs</td>
-            <td>{totalSucceededKeys}</td>
+            <td>{totalSucceededCount}</td>
           </tr>
           <tr>
             <td>miss</td>
-            <td>{totalMissedKeys}</td>
+            <td>{totalFailedCount}</td>
           </tr>
           <tr>
             <td>avg latency</td>
@@ -70,11 +58,7 @@ export function Record(props: { wordRecords: WordRecordValue[] }) {
           <tr>
             <td>accuracy</td>
             <td>
-              {(
-                (totalSucceededKeys / (totalSucceededKeys + totalMissedKeys)) *
-                100
-              ).toFixed(2)}
-              %
+              {(totalAccuracy * 100).toFixed(2)} %
             </td>
           </tr>
         </table>

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

@@ -2,50 +2,28 @@ import "./App.css";
 import * as emiel from "emiel";
 import { useEffect, useState } from "react";
 
-const words = ["おをひく", "こんとん", "がっこう", "aから@"];
-
 export function Typing(props: {
   layout: emiel.KeyboardLayout;
+  automaton: emiel.Automaton;
   onWordFinished: (
     a: emiel.Automaton,
     displayedAt: Date,
-    missCount: number
   ) => void;
-  onFinished: () => void;
 }) {
-  const [automatons] = useState(
-    words.map((w) => {
-      return emiel.rule.getRoman(props.layout).build(w);
-    })
-  );
-  const [wordIndex, setWordIndex] = useState(0);
-  const [wordDisplayedAt, setWordDisplayedAt] = useState(new Date());
-  const [missCount, setMissCount] = useState(0);
   const [lastInputKey, setLastInputKey] = useState<
     emiel.InputStroke | undefined
   >();
-  const automaton = automatons[wordIndex];
+  const automaton = props.automaton;
   useEffect(() => {
-    setWordDisplayedAt(new Date());
+    const wordDisplayedAt = 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();
-        }
-        setWordIndex((current) => current + 1);
-        setWordDisplayedAt(new Date());
-        setMissCount(0);
-      }
-      if (result.isFailed) {
-        setMissCount((current) => current + 1);
+        props.onWordFinished(automaton, wordDisplayedAt);
       }
     });
-  }, [wordIndex]);
+  }, [automaton]);
   return (
     <>
       <h1>
@@ -59,7 +37,7 @@ export function Typing(props: {
       <h2>
         Miss:{" "}
         <code>
-          {missCount}
+          {automaton.failedInputCount}
         </code>
       </h2>
       <h2>