Skip to content

feat(test): add flashing timer style (@gianpena) #7139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Miodec merged 7 commits into from
Nov 27, 2025
Merged

feat(test): add flashing timer style (@gianpena) #7139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9c025fc
add flash timer style
gianpena Nov 23, 2025
b2255d0
use actual seconds remaining in test to dictate what textEl shows
gianpena Nov 23, 2025
afc3484
update settings with flash modes
gianpena Nov 26, 2025
0c700b9
add flash for mini
gianpena Nov 26, 2025
2eaf4cc
Merge branch 'master' into pr/gianpena/7139
Miodec Nov 26, 2025
0075efd
style, settings text
Miodec Nov 26, 2025
a17caea
change opacity instead of text when hiding
gianpena Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion frontend/src/html/pages/settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -856,13 +856,16 @@
</button>
</div>
<div class="text">
Change the style of the timer/word count during a test.
Change the style of the timer/word count during a test. "Flash" styles
will briefly show the timer in timed modes every 15 seconds.
</div>
<div class="buttons">
<button data-config-value="off">off</button>
<button data-config-value="bar">bar</button>
<button data-config-value="text">text</button>
<button data-config-value="mini">mini</button>
<button data-config-value="flash text">flash text</button>
<button data-config-value="flash mini">flash mini</button>
</div>
</div>
<div class="section" data-config-name="liveSpeedStyle">
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/styles/settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,12 @@
}
}

&[data-config-name="timerStyle"] {
.buttons {
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
}

&.tags {
.tagsListAndButton {
grid-area: buttons;
Expand Down
56 changes: 56 additions & 0 deletions frontend/src/ts/test/timer-progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,22 @@ export function show(): void {
textEl.classList.remove("hidden");
},
});
} else if (Config.timerStyle === "flash mini") {
animate(miniEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
onBegin: () => {
miniEl.classList.remove("hidden");
},
});
} else if (Config.timerStyle === "flash text") {
animate(textEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
onBegin: () => {
textEl.classList.remove("hidden");
},
});
} else if (Config.mode === "zen" || Config.timerStyle === "mini") {
animate(miniEl, {
opacity: [0, 1],
Expand Down Expand Up @@ -124,6 +140,30 @@ export function update(): void {
if (textEl !== null) {
textEl.innerHTML = "<div>" + displayTime + "</div>";
}
} else if (Config.timerStyle === "flash mini") {
let displayTime = DateTime.secondsToString(maxtime - time);
if (maxtime === 0) {
displayTime = DateTime.secondsToString(time);
}
if (miniEl !== null) {
if ((maxtime - time) % 15 !== 0) {
miniEl.style.opacity = "0";
} else {
miniEl.style.opacity = "1";
}
miniEl.innerHTML = "<div>" + displayTime + "</div>";
}
} else if (Config.timerStyle === "flash text") {
let displayTime = DateTime.secondsToString(maxtime - time);
if (maxtime === 0) {
displayTime = DateTime.secondsToString(time);
}
if (textEl !== null) {
textEl.innerHTML =
"<div>" +
`${(maxtime - time) % 15 !== 0 ? "" : displayTime}` +
"</div>";
}
} else if (Config.timerStyle === "mini") {
let displayTime = DateTime.secondsToString(maxtime - time);
if (maxtime === 0) {
Expand Down Expand Up @@ -163,6 +203,18 @@ export function update(): void {
} else {
textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
}
} else if (Config.timerStyle === "flash mini") {
if (outof === 0) {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
} else {
miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
}
} else if (Config.timerStyle === "flash text") {
if (outof === 0) {
textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
} else {
textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
}
} else if (Config.timerStyle === "mini") {
if (outof === 0) {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
Expand All @@ -173,6 +225,10 @@ export function update(): void {
} else if (Config.mode === "zen") {
if (Config.timerStyle === "text") {
textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
} else if (Config.timerStyle === "flash mini") {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
} else if (Config.timerStyle === "flash text") {
textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
} else {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
}
Expand Down
9 changes: 8 additions & 1 deletion packages/schemas/src/configs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,14 @@ export type ConfidenceMode = z.infer<typeof ConfidenceModeSchema>;
export const IndicateTyposSchema = z.enum(["off", "below", "replace", "both"]);
export type IndicateTypos = z.infer<typeof IndicateTyposSchema>;

export const TimerStyleSchema = z.enum(["off", "bar", "text", "mini"]);
export const TimerStyleSchema = z.enum([
"off",
"bar",
"text",
"mini",
"flash text",
"flash mini",
]);
export type TimerStyle = z.infer<typeof TimerStyleSchema>;

export const LiveSpeedAccBurstStyleSchema = z.enum(["off", "text", "mini"]);
Expand Down