[pull] master from monkeytypegame:master

frontend/src/html/pages/settings.html

@@ -864,8 +864,8 @@
         <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>
+        <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">

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: {

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: {

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 === "";
 

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,14 +30,15 @@ inputEl.addEventListener("compositionupdate", (event) => {
     data: event.data,
   });
 
+  if (TestState.testRestarting || TestUI.resultCalculating) return;
   CompositionState.setData(event.data);
   CompositionDisplay.update(event.data);
 });
 
 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("");

frontend/src/ts/test/timer-progress.ts

@@ -36,15 +36,15 @@ 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),
       onBegin: () => {
         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 = "<div>" + displayTime + "</div>";
       }
-    } 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 = "<div>" + displayTime + "</div>";
       }
-    } 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 = `<div>${getCurrentCount()}/${outof}</div>`;
       }
-    } 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 = `<div>${TestInput.input.getHistory().length}</div>`;
       } else {
@@ -225,9 +225,9 @@ 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") {
+    } 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 = `<div>${TestInput.input.getHistory().length}</div>`;
     } else {
       miniEl.innerHTML = `${TestInput.input.getHistory().length}`;

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<void> {
   return new Promise((resolve) => {

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<typeof TimerStyleSchema>;