refactor(config): remove "show live progress" and move it to "live progress style: off"

backend/src/api/schemas/config-schema.ts

@@ -25,7 +25,6 @@ const CONFIG_SCHEMA = joi.object({
   favThemes: joi.array().items(joi.string().max(50).token()),
   showKeyTips: joi.boolean(),
   showLiveWpm: joi.boolean(),
-  showTimerProgress: joi.boolean(),
   smoothCaret: joi.string().valid("off", "slow", "medium", "fast"),
   quickRestart: joi.string().valid("off", "tab", "esc", "enter"),
   punctuation: joi.boolean(),
@@ -53,7 +52,7 @@ const CONFIG_SCHEMA = joi.object({
     .regex(/[\w#]+/),
   confidenceMode: joi.string().valid("off", "on", "max"),
   indicateTypos: joi.string().valid("off", "below", "replace"),
-  timerStyle: joi.string().valid("bar", "text", "mini"),
+  timerStyle: joi.string().valid("off", "bar", "text", "mini"),
   colorfulMode: joi.boolean(),
   randomTheme: joi
     .string()

frontend/src/html/pages/settings.html

@@ -753,6 +753,7 @@
         Change the style of the timer/word count during a timed test.
       </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>
@@ -1414,20 +1415,6 @@
         <button data-config-value="true">show</button>
       </div>
     </div>
-    <div class="section" data-config-name="showTimerProgress">
-      <div class="groupTitle">
-        <i class="fas fa-chart-pie"></i>
-        <span>live progress</span>
-      </div>
-      <div class="text">
-        Displays a live timer for timed tests and word count for word based
-        tests (word, quote or custom mode).
-      </div>
-      <div class="buttons">
-        <button data-config-value="false">hide</button>
-        <button data-config-value="true">show</button>
-      </div>
-    </div>
     <div class="section" data-config-name="showKeyTips">
       <div class="groupTitle">
         <i class="fas fa-question"></i>

frontend/src/ts/commandline/lists.ts

@@ -13,7 +13,6 @@ import LiveWpmCommands from "./lists/live-wpm";
 import LiveAccCommands from "./lists/live-acc";
 import LiveBurstCommands from "./lists/live-burst";
 import ShowAverageCommands from "./lists/show-average";
-import ShowTimerCommands from "./lists/show-timer";
 import KeyTipsCommands from "./lists/key-tips";
 import FreedomModeCommands from "./lists/freedom-mode";
 import StrictSpaceCommands from "./lists/strict-space";
@@ -328,7 +327,6 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
     ...LiveWpmCommands,
     ...LiveAccCommands,
     ...LiveBurstCommands,
-    ...ShowTimerCommands,
     ...KeyTipsCommands,
     ...OutOfFocusWarningCommands,
     ...CapsLockWarningCommands,

frontend/src/ts/commandline/lists/show-timer.ts

@@ -1,37 +0,0 @@
-import * as UpdateConfig from "../../config";
-
-const subgroup: MonkeyTypes.CommandsSubgroup = {
-  title: "Live progress...",
-  configKey: "showTimerProgress",
-  list: [
-    {
-      id: "setTimerProgressOff",
-      display: "off",
-      configValue: false,
-      alias: "timer",
-      exec: (): void => {
-        UpdateConfig.setShowTimerProgress(false);
-      },
-    },
-    {
-      id: "setTimerProgressOn",
-      display: "on",
-      configValue: true,
-      alias: "timer",
-      exec: (): void => {
-        UpdateConfig.setShowTimerProgress(true);
-      },
-    },
-  ],
-};
-
-const commands: MonkeyTypes.Command[] = [
-  {
-    id: "changeShowTimer",
-    display: "Live progress...",
-    icon: "fa-chart-pie",
-    subgroup,
-  },
-];
-
-export default commands;

frontend/src/ts/commandline/lists/timer-style.ts

@@ -4,11 +4,18 @@ const subgroup: MonkeyTypes.CommandsSubgroup = {
   title: "Live progress style...",
   configKey: "timerStyle",
   list: [
+    {
+      id: "setTimerStyleOff",
+      display: "off",
+      configValue: "off",
+      exec: (): void => {
+        UpdateConfig.setTimerStyle("off");
+      },
+    },
     {
       id: "setTimerStyleBar",
       display: "bar",
       configValue: "bar",
-      alias: "timer",
       exec: (): void => {
         UpdateConfig.setTimerStyle("bar");
       },
@@ -17,7 +24,6 @@ const subgroup: MonkeyTypes.CommandsSubgroup = {
       id: "setTimerStyleText",
       display: "text",
       configValue: "text",
-      alias: "timer",
       exec: (): void => {
         UpdateConfig.setTimerStyle("text");
       },
@@ -26,7 +32,6 @@ const subgroup: MonkeyTypes.CommandsSubgroup = {
       id: "setTimerStyleMini",
       display: "mini",
       configValue: "mini",
-      alias: "timer",
       exec: (): void => {
         UpdateConfig.setTimerStyle("mini");
       },
@@ -39,6 +44,7 @@ const commands: MonkeyTypes.Command[] = [
     id: "changeTimerStyle",
     display: "Live progress style...",
     icon: "fa-chart-pie",
+    alias: "timer",
     subgroup,
   },
 ];

frontend/src/ts/config.ts

@@ -822,21 +822,6 @@ export function setPaceCaretStyle(
   return true;
 }
 
-export function setShowTimerProgress(
-  timer: boolean,
-  nosave?: boolean
-): boolean {
-  if (!isConfigValueValid("show timer progress", timer, ["boolean"])) {
-    return false;
-  }
-
-  config.showTimerProgress = timer;
-  saveToLocalStorage("showTimerProgress", nosave);
-  ConfigEvent.dispatch("showTimerProgress", config.showTimerProgress);
-
-  return true;
-}
-
 export function setShowLiveWpm(live: boolean, nosave?: boolean): boolean {
   if (!isConfigValueValid("show live speed", live, ["boolean"])) return false;
 
@@ -949,7 +934,9 @@ export function setTimerStyle(
   style: SharedTypes.Config.TimerStyle,
   nosave?: boolean
 ): boolean {
-  if (!isConfigValueValid("timer style", style, [["bar", "text", "mini"]])) {
+  if (
+    !isConfigValueValid("timer style", style, [["off", "bar", "text", "mini"]])
+  ) {
     return false;
   }
 
@@ -1851,7 +1838,6 @@ export async function apply(
     setShowLiveWpm(configObj.showLiveWpm, true);
     setShowLiveAcc(configObj.showLiveAcc, true);
     setShowLiveBurst(configObj.showLiveBurst, true);
-    setShowTimerProgress(configObj.showTimerProgress, true);
     setAlwaysShowDecimalPlaces(configObj.alwaysShowDecimalPlaces, true);
     setAlwaysShowWordsHistory(configObj.alwaysShowWordsHistory, true);
     setSingleListCommandLine(configObj.singleListCommandLine, true);
@@ -1966,6 +1952,11 @@ function replaceLegacyValues(
     configObj.playSoundOnError = configObj.playSoundOnError ? "1" : "off";
   }
 
+  //@ts-expect-error
+  if (configObj.showTimerProgress === false) {
+    configObj.timerStyle = "off";
+  }
+
   return configObj;
 }
 

frontend/src/ts/constants/default-config.ts

@@ -19,7 +19,6 @@ export default {
   favThemes: [],
   showKeyTips: true,
   showLiveWpm: false,
-  showTimerProgress: true,
   smoothCaret: "medium",
   quickRestart: "off",
   punctuation: false,

frontend/src/ts/pages/settings.ts

@@ -65,11 +65,6 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setShowLiveBurst,
     "button"
   ) as SettingsGroup<SharedTypes.ConfigValue>;
-  groups["showTimerProgress"] = new SettingsGroup(
-    "showTimerProgress",
-    UpdateConfig.setShowTimerProgress,
-    "button"
-  ) as SettingsGroup<SharedTypes.ConfigValue>;
   groups["showAverage"] = new SettingsGroup(
     "showAverage",
     UpdateConfig.setShowAverage,

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

@@ -9,7 +9,7 @@ import * as TestState from "./test-state";
 import * as ConfigEvent from "../observables/config-event";
 
 export function show(): void {
-  const op = Config.showTimerProgress ? parseFloat(Config.timerOpacity) : 0;
+  const op = Config.timerStyle !== "off" ? parseFloat(Config.timerOpacity) : 0;
   if (Config.mode !== "zen" && Config.timerStyle === "bar") {
     $("#timerWrapper").stop(true, true).removeClass("hidden").animate(
       {
@@ -219,18 +219,12 @@ export function updateStyle(): void {
   if (!TestState.isActive) return;
   hide();
   update();
+  if (Config.timerStyle === "off") return;
   setTimeout(() => {
     show();
   }, 125);
 }
 
 ConfigEvent.subscribe((eventKey, eventValue) => {
-  if (eventKey === "showTimerProgress") {
-    if (eventValue === true && TestState.isActive) {
-      show();
-    } else {
-      hide();
-    }
-  }
   if (eventKey === "timerStyle") updateStyle();
 });

shared-types/config.d.ts

@@ -18,7 +18,7 @@ declare namespace SharedTypes.Config {
   type Mode2Custom<M extends Mode> = Mode2<M> | "custom";
   type ConfidenceMode = "off" | "on" | "max";
   type IndicateTypos = "off" | "below" | "replace";
-  type TimerStyle = "bar" | "text" | "mini";
+  type TimerStyle = "off" | "bar" | "text" | "mini";
   type RandomTheme = "off" | "on" | "fav" | "light" | "dark" | "custom";
   type TimerColor = "black" | "sub" | "text" | "main";
   type TimerOpacity = "0.25" | "0.5" | "0.75" | "1";

shared-types/types.d.ts

@@ -355,7 +355,6 @@ declare namespace SharedTypes {
     favThemes: string[];
     showKeyTips: boolean;
     showLiveWpm: boolean;
-    showTimerProgress: boolean;
     smoothCaret: SharedTypes.Config.SmoothCaret;
     quickRestart: SharedTypes.Config.QuickRestart;
     punctuation: boolean;