monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-11 18:04:27 +08:00
Code Issues Projects Releases Packages Wiki Activity

impr: apply reduced motion to live stats

Browse source
This commit is contained in:
Miodec 2025-10-27 17:42:00 +01:00
parent 7f8e205723
commit d77169ae2b
4 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/ts/test/live-acc.ts
View file

@ -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");
}

9
frontend/src/ts/test/live-burst.ts
View file

@ -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");
}

9
frontend/src/ts/test/live-speed.ts
View file

@ -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");
}

13
frontend/src/ts/test/timer-progress.ts
View file

@ -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)
);
}