feat: replay a typing test

Author: aradzie

package-lock.json

@@ -1,3 +1,4 @@
+export * from "./use-animation-frames.ts";
 export * from "./use-clipboard.ts";
 export * from "./use-debounced.ts";
 export * from "./use-deferred.tsx";

packages/keybr-textinput-events/lib/.editorconfig packages/keybr-textinput-events/.editorconfig

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+import { AnimationFrames } from "../utils/index.ts";
+
+export const useAnimationFrames = () => {
+  const ref = useRef<AnimationFrames>(null!);
+  if (ref.current == null) {
+    ref.current = new AnimationFrames();
+  }
+  useEffect(() => {
+    return () => {
+      ref.current.cancel();
+    };
+  }, []);
+  return ref.current;
+};

packages/keybr-widget/lib/hooks/index.ts

@@ -0,0 +1,25 @@
+export class AnimationFrames {
+  #id = 0;
+  #started = 0;
+
+  start(callback: (elapsed: DOMHighResTimeStamp) => void | boolean) {
+    this.cancel();
+    this.#started = 0;
+    const step = (time: DOMHighResTimeStamp) => {
+      if (this.#started === 0) {
+        this.#started = time;
+      }
+      if (callback(time - this.#started) !== false) {
+        this.#id = requestAnimationFrame(step);
+      }
+    };
+    this.#id = requestAnimationFrame(step);
+  }
+
+  cancel() {
+    if (this.#id) {
+      cancelAnimationFrame(this.#id);
+    }
+    this.#id = 0;
+  }
+}

packages/keybr-widget/lib/hooks/use-animation-frames.ts

@@ -1,3 +1,4 @@
+export * from "./animationframes.ts";
 export * from "./format-duration.ts";
 export * from "./geometry.ts";
 export * from "./point.ts";

packages/keybr-widget/lib/utils/animationframes.ts

@@ -0,0 +1,2 @@
+[*.test.*]
+max_line_length = 120

packages/keybr-widget/lib/utils/index.ts

@@ -1,6 +1,6 @@
 import { useSettings } from "@keybr/settings";
 import { makeStats } from "@keybr/textinput";
-import { type ReactNode, useMemo, useState } from "react";
+import { type ReactNode, useState } from "react";
 import { Report } from "./components/Report.tsx";
 import { SettingsScreen } from "./components/SettingsScreen.tsx";
 import { TestScreen } from "./components/TestScreen.tsx";
@@ -15,10 +15,7 @@ export function TypingTestPage(): ReactNode {
     Settings,
   }
   const { settings } = useSettings();
-  const compositeSettings = useMemo(
-    () => toCompositeSettings(settings),
-    [settings],
-  );
+  const compositeSettings = toCompositeSettings(settings);
   const [view, setView] = useState(View.Test);
   const [result, setResult] = useState(emptyResult());
   switch (view) {
@@ -46,6 +43,7 @@ export function TypingTestPage(): ReactNode {
     case View.Report:
       return (
         <Report
+          settings={compositeSettings}
           result={result}
           onNext={() => {
             setView(View.Test);
@@ -66,13 +64,17 @@ export function TypingTestPage(): ReactNode {
 function emptyResult(): TestResult {
   return {
     stats: makeStats([]),
+    steps: [],
     events: [],
   };
 }
 
 function makeResult(session: Session): TestResult {
+  const steps = session.getSteps();
+  const events = session.getEvents();
   return {
-    stats: makeStats(session.getSteps()),
-    events: session.getEvents(),
+    stats: makeStats(steps),
+    steps,
+    events,
   };
 }

packages/page-typing-test/.editorconfig

@@ -0,0 +1,45 @@
+import { useFormatter } from "@keybr/lesson-ui";
+import {
+  AnimationFrames,
+  formatDuration,
+  NameValue,
+  Para,
+} from "@keybr/widget";
+import { useEffect, useState } from "react";
+import { type ReplayState } from "../session/index.ts";
+
+export function Progress({ stepper }: { readonly stepper: ReplayState }) {
+  const { formatSpeed } = useFormatter();
+  const { progress, time } = useProgress(stepper);
+  return (
+    <Para align="center">
+      <NameValue
+        name="Progress"
+        value={`${progress.progress}/${progress.length}`}
+      />
+      <NameValue
+        name="Time"
+        value={formatDuration(time, { showMillis: true })}
+      />
+      <NameValue name="Speed" value={formatSpeed(progress.speed)} />
+    </Para>
+  );
+}
+
+function useProgress(stepper: ReplayState) {
+  const { state, progress } = stepper;
+  const [time, setTime] = useState(0);
+  useEffect(() => {
+    setTime(0);
+    const frames = new AnimationFrames();
+    frames.start(() => {
+      if (state === "running" || state === "finished") {
+        setTime(progress.time);
+      }
+    });
+    return () => {
+      frames.cancel();
+    };
+  }, [state, progress]);
+  return { progress, time };
+}

packages/page-typing-test/lib/TypingTestPage.tsx

@@ -0,0 +1,7 @@
+.root {
+  margin-block: 1rem;
+}
+
+.text {
+  margin-block: 1rem;
+}

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

@@ -1,38 +1,75 @@
 import { type KeyId, useKeyboard } from "@keybr/keyboard";
 import { KeyLayer, VirtualKeyboard } from "@keybr/keyboard-ui";
+import { Tasks } from "@keybr/lang";
+import {
+  type LineList,
+  type Step,
+  type TextInputSettings,
+} from "@keybr/textinput";
 import { type AnyEvent } from "@keybr/textinput-events";
+import { StaticText } from "@keybr/textinput-ui";
+import { Box, useDocumentVisibility } from "@keybr/widget";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
-import { ReplayState } from "../session/index.ts";
+import { ReplayState, Session, type TestResult } from "../session/index.ts";
+import { type CompositeSettings } from "../settings.ts";
+import { Progress } from "./Progress.tsx";
+import * as styles from "./Replay.module.less";
 
 export function Replay({
-  events,
+  settings: { textInput, textDisplay },
+  result: { steps, events },
 }: {
-  readonly events: readonly AnyEvent[];
+  readonly settings: CompositeSettings;
+  readonly result: TestResult;
 }): ReactNode {
   const keyboard = useKeyboard();
-  const depressedKeys = useReplayState(events);
+  const { stepper, lines, depressedKeys } = useReplayState(
+    textInput,
+    steps,
+    events,
+  );
   return (
-    <VirtualKeyboard keyboard={keyboard} height="16rem">
-      <KeyLayer depressedKeys={depressedKeys} />
-    </VirtualKeyboard>
+    <div className={styles.root}>
+      <Progress stepper={stepper} />
+      <Box className={styles.text} alignItems="center" justifyContent="center">
+        <StaticText settings={textDisplay} lines={lines} cursor={true} />
+      </Box>
+      <VirtualKeyboard keyboard={keyboard} height="16rem">
+        <KeyLayer depressedKeys={depressedKeys} />
+      </VirtualKeyboard>
+    </div>
   );
 }
 
-function useReplayState(events: readonly AnyEvent[]) {
-  const stepper = useMemo(() => new ReplayState(events), [events]);
+function useReplayState(
+  settings: TextInputSettings,
+  steps: readonly Step[],
+  events: readonly AnyEvent[],
+) {
+  const stepper = useMemo(
+    () => new ReplayState(settings, steps, events),
+    [settings, steps, events],
+  );
+  const visible = useDocumentVisibility();
+  const [lines, setLines] = useState<LineList>(Session.emptyLines);
   const [depressedKeys, setDepressedKeys] = useState<KeyId[]>([]);
   useEffect(() => {
-    let id = 0;
+    const tasks = new Tasks();
     const step = () => {
       stepper.step();
+      setLines(stepper.lines);
       setDepressedKeys(stepper.depressedKeys);
-      id = window.setTimeout(step, stepper.delay);
+      tasks.delayed(stepper.delay, step);
     };
-    setDepressedKeys(stepper.depressedKeys);
-    id = window.setTimeout(step, stepper.delay);
+    if (visible) {
+      stepper.reset();
+      setLines(stepper.lines);
+      setDepressedKeys(stepper.depressedKeys);
+      tasks.delayed(stepper.delay, step);
+    }
     return () => {
-      window.clearTimeout(id);
+      tasks.cancelAll();
     };
-  }, [stepper]);
-  return depressedKeys;
+  }, [stepper, visible]);
+  return { stepper, lines, depressedKeys };
 }

packages/page-typing-test/lib/components/Replay.module.less

@@ -24,13 +24,16 @@ import {
 import { mdiSkipNext } from "@mdi/js";
 import { memo, type ReactNode } from "react";
 import { type TestResult } from "../session/index.ts";
+import { type CompositeSettings } from "../settings.ts";
 import { Replay } from "./Replay.tsx";
 import * as styles from "./Report.module.less";
 
 export const Report = memo(function Report({
+  settings,
   result,
   onNext,
 }: {
+  readonly settings: CompositeSettings;
   readonly result: TestResult;
   readonly onNext: () => void;
 }) {
@@ -110,7 +113,9 @@ export const Report = memo(function Report({
         </Name>
       </Para>
 
-      <Replay events={result.events} />
+      <Spacer size={3} />
+
+      <Replay settings={settings} result={result} />
 
       <Spacer size={3} />
 

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

@@ -1,7 +1,7 @@
 import { BookContentLoader } from "@keybr/content-books";
 import { WordListLoader } from "@keybr/content-words";
 import { PhoneticModelLoader } from "@keybr/phonetic-model-loader";
-import { LCG, type RNGStream } from "@keybr/rand";
+import { LCG } from "@keybr/rand";
 import { type ReactNode } from "react";
 import { type TextSource, TextSourceType } from "../settings.ts";
 import { BookParagraphsGenerator } from "./book.ts";
@@ -14,7 +14,7 @@ export function TextGeneratorLoader({
   children,
 }: {
   readonly textSource: TextSource;
-  readonly children: (textGenerator: TextGenerator) => ReactNode;
+  readonly children: (generator: TextGenerator) => ReactNode;
 }): ReactNode {
   switch (textSource.type) {
     case TextSourceType.CommonWords:
@@ -42,6 +42,6 @@ export function TextGeneratorLoader({
   }
 }
 
-function rng(): RNGStream {
+function rng() {
   return LCG(Date.now());
 }

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

@@ -1,28 +1,12 @@
 import { test } from "node:test";
-import { type WordList } from "@keybr/content";
 import { FakeRNGStream } from "@keybr/rand";
 import { assert } from "chai";
 import { CommonWordsGenerator } from "./commonwords.ts";
 
 test("generate words", () => {
-  const wordList: WordList = [
-    "one",
-    "two",
-    "three",
-    "four",
-    "five",
-    "six",
-    "seven",
-    "eight",
-    "nine",
-    "ten",
-  ];
-  const random = FakeRNGStream(wordList.length);
-  const generator = new CommonWordsGenerator(
-    { wordListSize: 1000 },
-    wordList,
-    random,
-  );
+  const words = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
+  const random = FakeRNGStream(words.length);
+  const generator = new CommonWordsGenerator({ wordListSize: 1000 }, words, random);
 
   const mark0 = generator.mark();
 

packages/page-typing-test/lib/generators/TextGeneratorLoader.tsx

@@ -5,18 +5,7 @@ import { assert } from "chai";
 import { PseudoWordsGenerator } from "./pseudowords.ts";
 
 test("generate words", () => {
-  const words = [
-    "one",
-    "two",
-    "three",
-    "four",
-    "five",
-    "six",
-    "seven",
-    "eight",
-    "nine",
-    "ten",
-  ];
+  const words = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
   const random = FakeRNGStream(words.length);
   const model = new FakePhoneticModel(words, LCG(1));
   const generator = new PseudoWordsGenerator(model, random);