[pull] master from monkeytypegame:master

frontend/src/ts/test/funbox/layoutfluid-funbox-timer.ts

@@ -20,6 +20,10 @@ export function hide(): void {
   });
 }
 
+export function instantHide(): void {
+  timerEl.style.opacity = "0";
+}
+
 export function updateTime(sec: number, layout: string): void {
   timerEl.textContent = `${capitalizeFirstLetter(layout)} in: ${sec}s`;
 }

frontend/src/ts/test/live-acc.ts

@@ -7,8 +7,8 @@ import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-fra
 
 const textEl = document.querySelector(
   "#liveStatsTextBottom .liveAcc",
-) as Element;
-const miniEl = document.querySelector("#liveStatsMini .acc") as Element;
+) as HTMLElement;
+const miniEl = document.querySelector("#liveStatsMini .acc") as HTMLElement;
 
 export function update(acc: number): void {
   requestDebouncedAnimationFrame("live-acc.update", () => {
@@ -73,6 +73,17 @@ export function hide(): void {
   });
 }
 
+export function instantHide(): void {
+  if (!state) return;
+
+  textEl.classList.add("hidden");
+  textEl.style.opacity = "0";
+  miniEl.classList.add("hidden");
+  miniEl.style.opacity = "0";
+
+  state = false;
+}
+
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "liveAccStyle") newValue === "off" ? hide() : show();
 });

frontend/src/ts/test/live-burst.ts

@@ -8,8 +8,8 @@ import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-fra
 
 const textEl = document.querySelector(
   "#liveStatsTextBottom .liveBurst",
-) as Element;
-const miniEl = document.querySelector("#liveStatsMini .burst") as Element;
+) as HTMLElement;
+const miniEl = document.querySelector("#liveStatsMini .burst") as HTMLElement;
 
 export function reset(): void {
   requestDebouncedAnimationFrame("live-burst.reset", () => {
@@ -71,6 +71,17 @@ export function hide(): void {
   });
 }
 
+export function instantHide(): void {
+  if (!state) return;
+
+  textEl.classList.add("hidden");
+  textEl.style.opacity = "0";
+  miniEl.classList.add("hidden");
+  miniEl.style.opacity = "0";
+
+  state = false;
+}
+
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "liveBurstStyle") newValue === "off" ? hide() : show();
 });

frontend/src/ts/test/live-speed.ts

@@ -8,8 +8,10 @@ import { animate } from "animejs";
 
 const textElement = document.querySelector(
   "#liveStatsTextBottom .liveSpeed",
-) as Element;
-const miniElement = document.querySelector("#liveStatsMini .speed") as Element;
+) as HTMLElement;
+const miniElement = document.querySelector(
+  "#liveStatsMini .speed",
+) as HTMLElement;
 
 export function reset(): void {
   requestDebouncedAnimationFrame("live-speed.reset", () => {
@@ -75,6 +77,15 @@ export function hide(): void {
   });
 }
 
+export function instantHide(): void {
+  if (!state) return;
+  miniElement.classList.add("hidden");
+  miniElement.style.opacity = "0";
+  textElement.classList.add("hidden");
+  textElement.style.opacity = "0";
+  state = false;
+}
+
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "liveSpeedStyle") newValue === "off" ? hide() : show();
 });

frontend/src/ts/test/monkey.ts

@@ -162,3 +162,10 @@ export function hide(): void {
     },
   });
 }
+
+export function instantHide(): void {
+  monkeyEl.classList.add("hidden");
+  monkeyEl.style.opacity = "0";
+  monkeyEl.style.animationDuration = "0s";
+  monkeyFastEl.style.opacity = "0";
+}

frontend/src/ts/test/pace-caret.ts

@@ -130,7 +130,12 @@ export async function init(): Promise<void> {
 }
 
 export async function update(expectedStepEnd: number): Promise<void> {
-  if (settings === null || !TestState.isActive || TestState.resultVisible) {
+  const currentSettings = settings;
+  if (
+    currentSettings === null ||
+    !TestState.isActive ||
+    TestState.resultVisible
+  ) {
     return;
   }
 
@@ -146,8 +151,8 @@ export async function update(expectedStepEnd: number): Promise<void> {
     const duration = absoluteStepEnd - now;
 
     caret.goTo({
-      wordIndex: settings.currentWordIndex,
-      letterIndex: settings.currentLetterIndex,
+      wordIndex: currentSettings.currentWordIndex,
+      letterIndex: currentSettings.currentLetterIndex,
       isLanguageRightToLeft: TestState.isLanguageRightToLeft,
       isDirectionReversed: TestState.isDirectionReversed,
       animate: true,
@@ -157,12 +162,14 @@ export async function update(expectedStepEnd: number): Promise<void> {
       },
     });
 
-    // Normal case - schedule next step
-    settings.timeout = setTimeout(
+    currentSettings.timeout = setTimeout(
       () => {
-        update(expectedStepEnd + (settings?.spc ?? 0) * 1000).catch(() => {
-          settings = null;
-        });
+        if (settings !== currentSettings) return;
+        update(expectedStepEnd + (currentSettings.spc ?? 0) * 1000).catch(
+          () => {
+            if (settings === currentSettings) settings = null;
+          },
+        );
       },
       Math.max(0, duration),
     );