feat: compute speed in the typing test progress

Author: aradzie

packages/page-typing-test/lib/session/duration.test.ts

@@ -0,0 +1,35 @@
+import { test } from "node:test";
+import { type Step } from "@keybr/textinput";
+import { expect, use } from "chai";
+import chaiLike from "chai-like";
+import { computeProgress, duration_100_chars } from "./duration.ts";
+
+use(chaiLike);
+
+const steps: readonly Step[] = [
+  { timeStamp: 1001, codePoint: /* "a" */ 0x0061, timeToType: 100, typo: false },
+  { timeStamp: 1201, codePoint: /* "b" */ 0x0062, timeToType: 100, typo: false },
+  { timeStamp: 1401, codePoint: /* "c" */ 0x0063, timeToType: 100, typo: false },
+];
+
+test("progress", () => {
+  expect(computeProgress(duration_100_chars, [])).to.be.like({
+    progress: { time: 0, length: 0, progress: 0, speed: 0 },
+    completed: false,
+  });
+
+  expect(computeProgress(duration_100_chars, steps.slice(0, 1))).to.be.like({
+    progress: { time: 0, length: 1, progress: 0.01, speed: 0 },
+    completed: false,
+  });
+
+  expect(computeProgress(duration_100_chars, steps.slice(0, 2))).to.be.like({
+    progress: { time: 200, length: 2, progress: 0.02, speed: 600 },
+    completed: false,
+  });
+
+  expect(computeProgress(duration_100_chars, steps.slice(0, 3))).to.be.like({
+    progress: { time: 400, length: 3, progress: 0.03, speed: 450 },
+    completed: false,
+  });
+});

packages/page-typing-test/lib/session/duration.ts

@@ -1,4 +1,4 @@
-import { type Step } from "@keybr/textinput";
+import { computeSpeed, type Step } from "@keybr/textinput";
 import { type Duration, DurationType, type Progress } from "./types.ts";
 
 export function timeDuration(time: number): Duration {
@@ -31,17 +31,19 @@ export const durations: readonly NamedDuration[] = [
 ];
 
 export function computeProgress(
-  steps: readonly Step[],
   duration: Duration,
+  steps: readonly Step[],
 ): { progress: Progress; completed: boolean } {
   const { length } = steps;
   let time = 0;
   let progress = 0;
+  let speed = 0;
   let completed = false;
   if (length > 0) {
-    const first = steps[0];
-    const last = steps[length - 1];
-    time = last.timeStamp - first.timeStamp;
+    const head = steps[0];
+    const curr = steps[length - 1];
+    time = curr.timeStamp - head.timeStamp;
+    speed = computeSpeed(length, time);
     switch (duration.type) {
       case DurationType.Time: {
         progress = time / duration.value;
@@ -55,5 +57,13 @@ export function computeProgress(
       }
     }
   }
-  return { progress: { time, length, progress }, completed };
+  return {
+    progress: {
+      time,
+      length,
+      progress,
+      speed,
+    },
+    completed,
+  };
 }

packages/page-typing-test/lib/session/session.ts

@@ -76,8 +76,8 @@ export class Session {
     this.#addEvent(event);
     const feedback = this.#textInput.onInput(event);
     const { progress, completed } = computeProgress(
-      this.#steps,
       this.settings.duration,
+      this.#steps,
     );
     this.#updateActiveLine(progress);
     if (this.#textInput.completed) {

packages/page-typing-test/lib/session/types.ts

@@ -25,6 +25,8 @@ export type Progress = {
   readonly length: number;
   /** Progress made, [0, 1]. */
   readonly progress: number;
+  /** Typing speed so far. */
+  readonly speed: number;
 };
 
 export type SessionSettings = {