added indicate typos: replace,

added indicate typos: below,
removed indicate typos: on
closes #2444

backend/api/schemas/config-schema.js

@@ -42,7 +42,13 @@ const CONFIG_SCHEMA = joi.object({
   layout: joi.string(),
   funbox: joi.string(),
   confidenceMode: joi.string().valid("off", "on", "max"),
-  indicateTypos: joi.boolean(),
+  indicateTypos: joi
+    .alternatives()
+    .try(
+      joi.boolean(), //todo remove
+      joi.string().valid("off", "below", "replace")
+    )
+    .required(),
   timerStyle: joi.string().valid("bar", "text", "mini"),
   colorfulMode: joi.boolean(),
   randomTheme: joi.string().valid("off", "on", "fav", "light", "dark"),

frontend/src/js/config.js

@@ -81,7 +81,7 @@ let defaultConfig = {
   layout: "default",
   funbox: "none",
   confidenceMode: "off",
-  indicateTypos: false,
+  indicateTypos: "off",
   timerStyle: "mini",
   colorfulMode: false,
   randomTheme: "off",
@@ -1239,20 +1239,11 @@ export function setConfidenceMode(cm, nosave) {
   if (!nosave) saveToLocalStorage();
 }
 
-export function toggleIndicateTypos() {
-  let it = !config.indicateTypos;
-  if (it == undefined) {
-    it = false;
+export function setIndicateTypos(value, nosave) {
+  if (!["off", "below", "replace"].includes(value)) {
+    value = defaultConfig.indicateTypos;
   }
-  config.indicateTypos = it;
-  saveToLocalStorage();
-}
-
-export function setIndicateTypos(it, nosave) {
-  if (it == undefined) {
-    it = false;
-  }
-  config.indicateTypos = it;
+  config.indicateTypos = value;
   if (!nosave) saveToLocalStorage();
 }
 

frontend/src/js/elements/commandline-lists.js

@@ -528,17 +528,25 @@ let commandsIndicateTypos = {
     {
       id: "setIndicateTyposOff",
       display: "off",
-      configValue: false,
+      configValue: "off",
       exec: () => {
-        UpdateConfig.setIndicateTypos(false);
+        UpdateConfig.setIndicateTypos("off");
       },
     },
     {
-      id: "setIndicateTyposOn",
-      display: "on",
-      configValue: true,
+      id: "setIndicateTyposBelow",
+      display: "below",
+      configValue: "below",
       exec: () => {
-        UpdateConfig.setIndicateTypos(true);
+        UpdateConfig.setIndicateTypos("below");
+      },
+    },
+    {
+      id: "setIndicateTyposReplace",
+      display: "replace",
+      configValue: "replace",
+      exec: () => {
+        UpdateConfig.setIndicateTypos("replace");
       },
     },
   ],

frontend/src/js/test/test-ui.js

@@ -419,8 +419,8 @@ export function updateWordElement(showError = !Config.blindMode) {
               ? wordHighlightClassString
               : "incorrect"
           } ${tabChar}${nlChar}">` +
-          currentLetter +
-          (Config.indicateTypos ? `<hint>${input[i]}</hint>` : "") +
+          (Config.indicateTypos === "replace" ? input[i] : currentLetter) +
+          (Config.indicateTypos === "below" ? `<hint>${input[i]}</hint>` : "") +
           "</letter>";
       }
     }

frontend/static/index.html

@@ -2536,13 +2536,35 @@
               </div>
               <div class="section indicateTypos" section="">
                 <h1>indicate typos</h1>
-                <div class="text">Shows typos underneath the letters.</div>
+                <div class="text">
+                  Shows typos that you've made. Below shows what you typed below
+                  the letters and replace will replace the letters with the ones
+                  you typed.
+                </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    indicateTypos="off"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
-                    on
+                  <div
+                    class="button"
+                    indicateTypos="below"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    below
+                  </div>
+                  <div
+                    class="button"
+                    indicateTypos="replace"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    replace
                   </div>
                 </div>
               </div>