feat: replay the typing speed result

Author: aradzie

package-lock.json

@@ -3,7 +3,7 @@ import {
   type TextDisplaySettings,
   TextInput,
 } from "@keybr/textinput";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { StaticText } from "./StaticText.tsx";
 import { type TextLineSize } from "./TextLines.tsx";
 
@@ -31,33 +31,29 @@ export function AnimatedText({
 }
 
 function useAnimatedTextState(text: string): readonly Char[] {
-  const [{ textInput, chars }, setState] = useState(() => makeState(text));
-  if (textInput.text !== text) {
-    setState(makeState(text));
-  }
+  const textInput = useMemo(
+    () =>
+      new TextInput(text, {
+        stopOnError: false,
+        forgiveErrors: false,
+        spaceSkipsWords: false,
+      }),
+    [text],
+  );
+  const [chars, setChars] = useState<readonly Char[]>([]);
   useEffect(() => {
-    const id = setInterval(() => {
+    setChars(textInput.chars);
+    const id = window.setInterval(() => {
       if (textInput.completed) {
         textInput.reset();
       } else {
         textInput.appendChar(0, textInput.at(textInput.pos).codePoint, 0);
       }
-      const { chars } = textInput;
-      setState({ textInput, chars });
+      setChars(textInput.chars);
     }, 500);
     return () => {
-      clearInterval(id);
+      window.clearInterval(id);
     };
   }, [textInput]);
   return chars;
 }
-
-function makeState(text: string) {
-  const textInput = new TextInput(text, {
-    stopOnError: false,
-    forgiveErrors: false,
-    spaceSkipsWords: false,
-  });
-  const { chars } = textInput;
-  return { textInput, chars };
-}

packages/keybr-textinput-ui/lib/AnimatedText.tsx

@@ -0,0 +1,38 @@
+import { type KeyId, useKeyboard } from "@keybr/keyboard";
+import { KeyLayer, VirtualKeyboard } from "@keybr/keyboard-ui";
+import { type AnyEvent } from "@keybr/textinput-events";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { ReplayState } from "../session/index.ts";
+
+export function Replay({
+  events,
+}: {
+  readonly events: readonly AnyEvent[];
+}): ReactNode {
+  const keyboard = useKeyboard();
+  const depressedKeys = useReplayState(events);
+  return (
+    <VirtualKeyboard keyboard={keyboard} height="16rem">
+      <KeyLayer depressedKeys={depressedKeys} />
+    </VirtualKeyboard>
+  );
+}
+
+function useReplayState(events: readonly AnyEvent[]) {
+  const stepper = useMemo(() => new ReplayState(events), [events]);
+  const [depressedKeys, setDepressedKeys] = useState<KeyId[]>([]);
+  useEffect(() => {
+    let id = 0;
+    const step = () => {
+      stepper.step();
+      setDepressedKeys(stepper.depressedKeys);
+      id = window.setTimeout(step, stepper.delay);
+    };
+    setDepressedKeys(stepper.depressedKeys);
+    id = window.setTimeout(step, stepper.delay);
+    return () => {
+      window.clearTimeout(id);
+    };
+  }, [stepper]);
+  return depressedKeys;
+}

packages/page-typing-test/lib/components/Replay.tsx

@@ -25,6 +25,7 @@ import {
 import { mdiSkipNext } from "@mdi/js";
 import { memo, type ReactNode } from "react";
 import { type TestResult } from "../session/index.ts";
+import { Replay } from "./Replay.tsx";
 import * as styles from "./Report.module.less";
 
 export const Report = memo(function Report({
@@ -110,6 +111,8 @@ export const Report = memo(function Report({
         </Name>
       </Para>
 
+      <Replay events={result.events} />
+
       <Spacer size={3} />
 
       <FieldList>