feat: sentence trainer prototype

feat: layout learner prototype

src/lib/charrecorder/TrackText.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { ReplayPlayer } from "./core/player";
+  import { TextPlugin } from "./core/plugins/text";
+
+  const player: { player: ReplayPlayer | undefined } = getContext("replay");
+
+  let { text = $bindable("") } = $props();
+
+  $effect(() => {
+    if (!player.player) return;
+    const tracker = new TextPlugin();
+    tracker.register(player.player);
+    const unsubscribe = tracker.subscribe((value) => {
+      text = value;
+    });
+
+    return unsubscribe;
+  });
+</script>

src/lib/charrecorder/TrackWpm.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { WpmReplayPlugin } from "./core/plugins/wpm";
+  import type { ReplayPlayer } from "./core/player";
+
+  const player: { player: ReplayPlayer | undefined } = getContext("replay");
+
+  let { wpm = $bindable(0) } = $props();
+
+  $effect(() => {
+    if (!player.player) return;
+    const tracker = new WpmReplayPlugin();
+    tracker.register(player.player);
+    const unsubscribe = tracker.subscribe((value) => {
+      wpm = value;
+    });
+
+    return unsubscribe;
+  });
+</script>

src/lib/charrecorder/core/plugins/chords.ts

@@ -85,7 +85,6 @@ export class ChordsReplayPlugin
           }
         }
       }
-      console.log(this.tokens);
 
       clearTimeout(this.timeout);
       if (replay.stepper.held.size === 0) {

src/lib/charrecorder/core/plugins/text.ts

@@ -0,0 +1,23 @@
+import type { ReplayPlayer } from "../player";
+import type { ReplayPlugin, StoreContract } from "../types";
+
+export class TextPlugin implements StoreContract<string>, ReplayPlugin {
+  private subscribers = new Set<(value: string) => void>();
+
+  register(replay: ReplayPlayer) {
+    replay.subscribe(() => {
+      if (this.subscribers.size === 0) return;
+      const text = replay.stepper.text
+        .filter((it) => it.source !== "ghost")
+        .map((it) => it.text)
+        .join("");
+      for (const subscription of this.subscribers) {
+        subscription(text);
+      }
+    });
+  }
+  subscribe(subscription: (value: string) => void) {
+    this.subscribers.add(subscription);
+    return () => this.subscribers.delete(subscription);
+  }
+}

src/lib/charrecorder/renderer/renderer.ts

@@ -36,6 +36,7 @@ export class TextRenderer {
     );
     this.cursorNode.setAttribute("x", "0");
     this.cursorNode.setAttribute("y", "0");
+    this.cursorNode.setAttribute("class", "cursor");
     this.svg.appendChild(this.cursorNode);
   }