chore: update timer style schema

also update config and commandline metadata

Author: Miodec

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/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}`;

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