diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index a2c2d6646093..8abbd84c2352 100644
--- a/frontend/src/html/pages/settings.html
+++ b/frontend/src/html/pages/settings.html
@@ -864,8 +864,8 @@
-
-
+
+
diff --git a/frontend/src/ts/commandline/commandline-metadata.ts b/frontend/src/ts/commandline/commandline-metadata.ts
index 0269d74f191e..1996583774e2 100644
--- a/frontend/src/ts/commandline/commandline-metadata.ts
+++ b/frontend/src/ts/commandline/commandline-metadata.ts
@@ -513,8 +513,10 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
alias: "wpm",
},
timerStyle: {
- display: "Live progress style...",
- subgroup: { options: "fromSchema" },
+ subgroup: {
+ options: "fromSchema",
+ display: (value) => value.replaceAll(/_/g, " "),
+ },
alias: "timer",
},
timerColor: {
diff --git a/frontend/src/ts/config-metadata.ts b/frontend/src/ts/config-metadata.ts
index 5ad4f4d97ce2..1cd44f864e76 100644
--- a/frontend/src/ts/config-metadata.ts
+++ b/frontend/src/ts/config-metadata.ts
@@ -463,7 +463,7 @@ export const configMetadata: ConfigMetadataObject = {
// appearance
timerStyle: {
icon: "fa-chart-pie",
- displayString: "timer style",
+ displayString: "live progress style",
changeRequiresRestart: false,
},
liveSpeedStyle: {
diff --git a/frontend/src/ts/input/handlers/before-delete.ts b/frontend/src/ts/input/handlers/before-delete.ts
index a16d1c0a661d..79fb28d77d50 100644
--- a/frontend/src/ts/input/handlers/before-delete.ts
+++ b/frontend/src/ts/input/handlers/before-delete.ts
@@ -4,12 +4,23 @@ import * as TestState from "../../test/test-state";
import * as TestWords from "../../test/test-words";
import { getInputElementValue } from "../input-element";
import * as TestUI from "../../test/test-ui";
+import { isAwaitingNextWord } from "../state";
export function onBeforeDelete(event: InputEvent): void {
if (!TestState.isActive) {
event.preventDefault();
return;
}
+ if (TestState.testRestarting) {
+ return;
+ }
+ if (isAwaitingNextWord()) {
+ return;
+ }
+ if (TestUI.resultCalculating) {
+ return;
+ }
+
const { inputValue } = getInputElementValue();
const inputIsEmpty = inputValue === "";
diff --git a/frontend/src/ts/input/listeners/composition.ts b/frontend/src/ts/input/listeners/composition.ts
index d3961e77d508..e3388a557df7 100644
--- a/frontend/src/ts/input/listeners/composition.ts
+++ b/frontend/src/ts/input/listeners/composition.ts
@@ -5,6 +5,7 @@ import * as TestLogic from "../../test/test-logic";
import { setLastInsertCompositionTextData } from "../state";
import * as CompositionDisplay from "../../elements/composition-display";
import { onInsertText } from "../handlers/insert-text";
+import * as TestUI from "../../test/test-ui";
const inputEl = getInputElement();
@@ -14,6 +15,7 @@ inputEl.addEventListener("compositionstart", (event) => {
data: event.data,
});
+ if (TestState.testRestarting || TestUI.resultCalculating) return;
CompositionState.setComposing(true);
CompositionState.setData("");
setLastInsertCompositionTextData("");
@@ -28,6 +30,7 @@ inputEl.addEventListener("compositionupdate", (event) => {
data: event.data,
});
+ if (TestState.testRestarting || TestUI.resultCalculating) return;
CompositionState.setData(event.data);
CompositionDisplay.update(event.data);
});
@@ -35,7 +38,7 @@ inputEl.addEventListener("compositionupdate", (event) => {
inputEl.addEventListener("compositionend", async (event) => {
console.debug("wordsInput event compositionend", { event, data: event.data });
- if (TestState.testRestarting) return;
+ if (TestState.testRestarting || TestUI.resultCalculating) return;
CompositionState.setComposing(false);
CompositionState.setData("");
CompositionDisplay.update("");
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index cbf5b2103f35..274d1d7d5568 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -36,7 +36,7 @@ export function show(): void {
textEl.classList.remove("hidden");
},
});
- } else if (Config.timerStyle === "flash mini") {
+ } else if (Config.timerStyle === "flash_mini") {
animate(miniEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
@@ -44,7 +44,7 @@ export function show(): void {
miniEl.classList.remove("hidden");
},
});
- } else if (Config.timerStyle === "flash text") {
+ } else if (Config.timerStyle === "flash_text") {
animate(textEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
@@ -140,7 +140,7 @@ export function update(): void {
if (textEl !== null) {
textEl.innerHTML = "
" + displayTime + "
";
}
- } else if (Config.timerStyle === "flash mini") {
+ } else if (Config.timerStyle === "flash_mini") {
let displayTime = DateTime.secondsToString(maxtime - time);
if (maxtime === 0) {
displayTime = DateTime.secondsToString(time);
@@ -153,7 +153,7 @@ export function update(): void {
}
miniEl.innerHTML = "
" + displayTime + "
";
}
- } else if (Config.timerStyle === "flash text") {
+ } else if (Config.timerStyle === "flash_text") {
let displayTime = DateTime.secondsToString(maxtime - time);
if (maxtime === 0) {
displayTime = DateTime.secondsToString(time);
@@ -203,13 +203,13 @@ export function update(): void {
} else {
textEl.innerHTML = `
${getCurrentCount()}/${outof}
`;
}
- } else if (Config.timerStyle === "flash mini") {
+ } 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") {
+ } else if (Config.timerStyle === "flash_text") {
if (outof === 0) {
textEl.innerHTML = `
${TestInput.input.getHistory().length}
`;
} else {
@@ -225,9 +225,9 @@ export function update(): void {
} else if (Config.mode === "zen") {
if (Config.timerStyle === "text") {
textEl.innerHTML = `
${TestInput.input.getHistory().length}
`;
- } else if (Config.timerStyle === "flash mini") {
+ } else if (Config.timerStyle === "flash_mini") {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
- } else if (Config.timerStyle === "flash text") {
+ } else if (Config.timerStyle === "flash_text") {
textEl.innerHTML = `
${TestInput.input.getHistory().length}
`;
} else {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index 9d4c26c8bfee..f134d4208d50 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -442,7 +442,7 @@ export type JQueryEasing =
| "easeInOutBounce";
export async function promiseAnimate(
- el: HTMLElement,
+ el: HTMLElement | string,
options: AnimationParams,
): Promise
{
return new Promise((resolve) => {
diff --git a/packages/schemas/src/configs.ts b/packages/schemas/src/configs.ts
index e5a2f698f6ce..e7246854fee9 100644
--- a/packages/schemas/src/configs.ts
+++ b/packages/schemas/src/configs.ts
@@ -59,8 +59,8 @@ export const TimerStyleSchema = z.enum([
"bar",
"text",
"mini",
- "flash text",
- "flash mini",
+ "flash_text",
+ "flash_mini",
]);
export type TimerStyle = z.infer;