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;