From d77169ae2bac532755637a73741bb4eb70bd385e Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 27 Oct 2025 17:42:00 +0100
Subject: [PATCH] impr: apply reduced motion to live stats

---
 frontend/src/ts/test/live-acc.ts       |  9 +++++----
 frontend/src/ts/test/live-burst.ts     |  9 +++++----
 frontend/src/ts/test/live-speed.ts     |  9 +++++----
 frontend/src/ts/test/timer-progress.ts | 13 +++++++------
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
index afdb79189..04329cf40 100644
--- a/frontend/src/ts/test/live-acc.ts
+++ b/frontend/src/ts/test/live-acc.ts
@@ -1,6 +1,7 @@
 import Config from "../config";
 import * as TestState from "../test/test-state";
 import * as ConfigEvent from "../observables/config-event";
+import { applyReducedMotion } from "../utils/misc";
 
 const textEl = document.querySelector(
   "#liveStatsTextBottom .liveAcc"
@@ -32,14 +33,14 @@ export function show(): void {
       {
         opacity: 1,
       },
-      125
+      applyReducedMotion(125)
     );
   } else {
     $(textEl).stop(true, false).removeClass("hidden").css("opacity", 0).animate(
       {
         opacity: 1,
       },
-      125
+      applyReducedMotion(125)
     );
   }
   state = true;
@@ -53,7 +54,7 @@ export function hide(): void {
       {
         opacity: 0,
       },
-      125,
+      applyReducedMotion(125),
       () => {
         $(textEl).addClass("hidden");
       }
@@ -64,7 +65,7 @@ export function hide(): void {
       {
         opacity: 0,
       },
-      125,
+      applyReducedMotion(125),
       () => {
         $(miniEl).addClass("hidden");
       }
diff --git a/frontend/src/ts/test/live-burst.ts b/frontend/src/ts/test/live-burst.ts
index e52769661..165bdedd2 100644
--- a/frontend/src/ts/test/live-burst.ts
+++ b/frontend/src/ts/test/live-burst.ts
@@ -2,6 +2,7 @@ import Config from "../config";
 import * as TestState from "../test/test-state";
 import * as ConfigEvent from "../observables/config-event";
 import Format from "../utils/format";
+import { applyReducedMotion } from "../utils/misc";
 
 const textEl = document.querySelector(
   "#liveStatsTextBottom .liveBurst"
@@ -30,14 +31,14 @@ export function show(): void {
       {
         opacity: 1,
       },
-      125
+      applyReducedMotion(125)
     );
   } else {
     $(textEl).stop(true, false).removeClass("hidden").css("opacity", 0).animate(
       {
         opacity: 1,
       },
-      125
+      applyReducedMotion(125)
     );
   }
   state = true;
@@ -51,7 +52,7 @@ export function hide(): void {
       {
         opacity: 0,
       },
-      125,
+      applyReducedMotion(125),
       () => {
         $(textEl).addClass("hidden");
       }
@@ -62,7 +63,7 @@ export function hide(): void {
       {
         opacity: 0,
       },
-      125,
+      applyReducedMotion(125),
       () => {
         $(miniEl).addClass("hidden");
       }
diff --git a/frontend/src/ts/test/live-speed.ts b/frontend/src/ts/test/live-speed.ts
index 8270b9330..88b5f55fa 100644
--- a/frontend/src/ts/test/live-speed.ts
+++ b/frontend/src/ts/test/live-speed.ts
@@ -2,6 +2,7 @@ import Config from "../config";
 import * as TestState from "./test-state";
 import * as ConfigEvent from "../observables/config-event";
 import Format from "../utils/format";
+import { applyReducedMotion } from "../utils/misc";
 
 const textElement = document.querySelector(
   "#liveStatsTextBottom .liveSpeed"
@@ -38,7 +39,7 @@ export function show(): void {
         {
           opacity: 1,
         },
-        125
+        applyReducedMotion(125)
       );
   } else {
     $(textElement)
@@ -49,7 +50,7 @@ export function show(): void {
         {
           opacity: 1,
         },
-        125
+        applyReducedMotion(125)
       );
   }
   state = true;
@@ -63,7 +64,7 @@ export function hide(): void {
       {
         opacity: 0,
       },
-      125,
+      applyReducedMotion(125),
       () => {
         textElement.classList.add("hidden");
       }
@@ -74,7 +75,7 @@ export function hide(): void {
       {
         opacity: 0,
       },
-      125,
+      applyReducedMotion(125),
       () => {
         miniElement.classList.add("hidden");
       }
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 76ba82620..f3d33cf83 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -7,6 +7,7 @@ import * as Time from "../states/time";
 import * as SlowTimer from "../states/slow-timer";
 import * as TestState from "./test-state";
 import * as ConfigEvent from "../observables/config-event";
+import { applyReducedMotion } from "../utils/misc";
 
 const barEl = $("#barTimerProgress .bar");
 const barOpacityEl = $("#barTimerProgress .opacityWrapper");
@@ -23,21 +24,21 @@ export function show(): void {
         {
           opacity: 1,
         },
-        125
+        applyReducedMotion(125)
       );
   } else if (Config.timerStyle === "text") {
     textEl.stop(true, true).removeClass("hidden").css("opacity", 0).animate(
       {
         opacity: 1,
       },
-      125
+      applyReducedMotion(125)
     );
   } else if (Config.mode === "zen" || Config.timerStyle === "mini") {
     miniEl.stop(true, true).removeClass("hidden").css("opacity", 0).animate(
       {
         opacity: 1,
       },
-      125
+      applyReducedMotion(125)
     );
   }
 }
@@ -65,13 +66,13 @@ export function hide(): void {
     {
       opacity: 0,
     },
-    125
+    applyReducedMotion(125)
   );
   miniEl.stop(true, true).animate(
     {
       opacity: 0,
     },
-    125,
+    applyReducedMotion(125),
     () => {
       miniEl.addClass("hidden");
     }
@@ -80,7 +81,7 @@ export function hide(): void {
     {
       opacity: 0,
     },
-    125
+    applyReducedMotion(125)
   );
 }