impr: apply reduced motion to live stats

Miodec · Miodec · commit d77169ae2bac · 2025-10-27T17:42:00.000+01:00
diff --git 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
@@ -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
@@ -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
@@ -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)
   );
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import Config from "../config";`
`2`	`2`	`import * as TestState from "../test/test-state";`
`3`	`3`	`import * as ConfigEvent from "../observables/config-event";`
	`4`	`+import { applyReducedMotion } from "../utils/misc";`
`4`	`5`
`5`	`6`	`const textEl = document.querySelector(`
`6`	`7`	`"#liveStatsTextBottom .liveAcc"`
`@@ -32,14 +33,14 @@ export function show(): void {`
`32`	`33`	`{`
`33`	`34`	`opacity: 1,`
`34`	`35`	`},`
`35`		`- 125`
	`36`	`+ applyReducedMotion(125)`
`36`	`37`	`);`
`37`	`38`	`} else {`
`38`	`39`	`$(textEl).stop(true, false).removeClass("hidden").css("opacity", 0).animate(`
`39`	`40`	`{`
`40`	`41`	`opacity: 1,`
`41`	`42`	`},`
`42`		`- 125`
	`43`	`+ applyReducedMotion(125)`
`43`	`44`	`);`
`44`	`45`	`}`
`45`	`46`	`state = true;`
`@@ -53,7 +54,7 @@ export function hide(): void {`
`53`	`54`	`{`
`54`	`55`	`opacity: 0,`
`55`	`56`	`},`
`56`		`- 125,`
	`57`	`+ applyReducedMotion(125),`
`57`	`58`	`() => {`
`58`	`59`	`$(textEl).addClass("hidden");`
`59`	`60`	`}`
`@@ -64,7 +65,7 @@ export function hide(): void {`
`64`	`65`	`{`
`65`	`66`	`opacity: 0,`
`66`	`67`	`},`
`67`		`- 125,`
	`68`	`+ applyReducedMotion(125),`
`68`	`69`	`() => {`
`69`	`70`	`$(miniEl).addClass("hidden");`
`70`	`71`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import Config from "../config";`
`2`	`2`	`import * as TestState from "../test/test-state";`
`3`	`3`	`import * as ConfigEvent from "../observables/config-event";`
`4`	`4`	`import Format from "../utils/format";`
	`5`	`+import { applyReducedMotion } from "../utils/misc";`
`5`	`6`
`6`	`7`	`const textEl = document.querySelector(`
`7`	`8`	`"#liveStatsTextBottom .liveBurst"`
`@@ -30,14 +31,14 @@ export function show(): void {`
`30`	`31`	`{`
`31`	`32`	`opacity: 1,`
`32`	`33`	`},`
`33`		`- 125`
	`34`	`+ applyReducedMotion(125)`
`34`	`35`	`);`
`35`	`36`	`} else {`
`36`	`37`	`$(textEl).stop(true, false).removeClass("hidden").css("opacity", 0).animate(`
`37`	`38`	`{`
`38`	`39`	`opacity: 1,`
`39`	`40`	`},`
`40`		`- 125`
	`41`	`+ applyReducedMotion(125)`
`41`	`42`	`);`
`42`	`43`	`}`
`43`	`44`	`state = true;`
`@@ -51,7 +52,7 @@ export function hide(): void {`
`51`	`52`	`{`
`52`	`53`	`opacity: 0,`
`53`	`54`	`},`
`54`		`- 125,`
	`55`	`+ applyReducedMotion(125),`
`55`	`56`	`() => {`
`56`	`57`	`$(textEl).addClass("hidden");`
`57`	`58`	`}`
`@@ -62,7 +63,7 @@ export function hide(): void {`
`62`	`63`	`{`
`63`	`64`	`opacity: 0,`
`64`	`65`	`},`
`65`		`- 125,`
	`66`	`+ applyReducedMotion(125),`
`66`	`67`	`() => {`
`67`	`68`	`$(miniEl).addClass("hidden");`
`68`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import Config from "../config";`
`2`	`2`	`import * as TestState from "./test-state";`
`3`	`3`	`import * as ConfigEvent from "../observables/config-event";`
`4`	`4`	`import Format from "../utils/format";`
	`5`	`+import { applyReducedMotion } from "../utils/misc";`
`5`	`6`
`6`	`7`	`const textElement = document.querySelector(`
`7`	`8`	`"#liveStatsTextBottom .liveSpeed"`
`@@ -38,7 +39,7 @@ export function show(): void {`
`38`	`39`	`{`
`39`	`40`	`opacity: 1,`
`40`	`41`	`},`
`41`		`- 125`
	`42`	`+ applyReducedMotion(125)`
`42`	`43`	`);`
`43`	`44`	`} else {`
`44`	`45`	`$(textElement)`
`@@ -49,7 +50,7 @@ export function show(): void {`
`49`	`50`	`{`
`50`	`51`	`opacity: 1,`
`51`	`52`	`},`
`52`		`- 125`
	`53`	`+ applyReducedMotion(125)`
`53`	`54`	`);`
`54`	`55`	`}`
`55`	`56`	`state = true;`
`@@ -63,7 +64,7 @@ export function hide(): void {`
`63`	`64`	`{`
`64`	`65`	`opacity: 0,`
`65`	`66`	`},`
`66`		`- 125,`
	`67`	`+ applyReducedMotion(125),`
`67`	`68`	`() => {`
`68`	`69`	`textElement.classList.add("hidden");`
`69`	`70`	`}`
`@@ -74,7 +75,7 @@ export function hide(): void {`
`74`	`75`	`{`
`75`	`76`	`opacity: 0,`
`76`	`77`	`},`
`77`		`- 125,`
	`78`	`+ applyReducedMotion(125),`
`78`	`79`	`() => {`
`79`	`80`	`miniElement.classList.add("hidden");`
`80`	`81`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ import * as Time from "../states/time";`
`7`	`7`	`import * as SlowTimer from "../states/slow-timer";`
`8`	`8`	`import * as TestState from "./test-state";`
`9`	`9`	`import * as ConfigEvent from "../observables/config-event";`
	`10`	`+import { applyReducedMotion } from "../utils/misc";`
`10`	`11`
`11`	`12`	`const barEl = $("#barTimerProgress .bar");`
`12`	`13`	`const barOpacityEl = $("#barTimerProgress .opacityWrapper");`
`@@ -23,21 +24,21 @@ export function show(): void {`
`23`	`24`	`{`
`24`	`25`	`opacity: 1,`
`25`	`26`	`},`
`26`		`- 125`
	`27`	`+ applyReducedMotion(125)`
`27`	`28`	`);`
`28`	`29`	`} else if (Config.timerStyle === "text") {`
`29`	`30`	`textEl.stop(true, true).removeClass("hidden").css("opacity", 0).animate(`
`30`	`31`	`{`
`31`	`32`	`opacity: 1,`
`32`	`33`	`},`
`33`		`- 125`
	`34`	`+ applyReducedMotion(125)`
`34`	`35`	`);`
`35`	`36`	`} else if (Config.mode === "zen" \|\| Config.timerStyle === "mini") {`
`36`	`37`	`miniEl.stop(true, true).removeClass("hidden").css("opacity", 0).animate(`
`37`	`38`	`{`
`38`	`39`	`opacity: 1,`
`39`	`40`	`},`
`40`		`- 125`
	`41`	`+ applyReducedMotion(125)`
`41`	`42`	`);`
`42`	`43`	`}`
`43`	`44`	`}`
`@@ -65,13 +66,13 @@ export function hide(): void {`
`65`	`66`	`{`
`66`	`67`	`opacity: 0,`
`67`	`68`	`},`
`68`		`- 125`
	`69`	`+ applyReducedMotion(125)`
`69`	`70`	`);`
`70`	`71`	`miniEl.stop(true, true).animate(`
`71`	`72`	`{`
`72`	`73`	`opacity: 0,`
`73`	`74`	`},`
`74`		`- 125,`
	`75`	`+ applyReducedMotion(125),`
`75`	`76`	`() => {`
`76`	`77`	`miniEl.addClass("hidden");`
`77`	`78`	`}`
`@@ -80,7 +81,7 @@ export function hide(): void {`
`80`	`81`	`{`
`81`	`82`	`opacity: 0,`
`82`	`83`	`},`
`83`		`- 125`
	`84`	`+ applyReducedMotion(125)`
`84`	`85`	`);`
`85`	`86`	`}`
`86`	`87`