added 'hide extra letters'

src/js/commandline.js

@@ -214,6 +214,13 @@ let commands = {
         toggleIndicateTypos();
       },
     },
+    {
+      id: "toggleHideExtraLetters",
+      display: "Toggle hide extra letters",
+      exec: () => {
+        toggleHideExtraLetters();
+      },
+    },
     // {
     //   id: "toggleReadAheadMode",
     //   display: "Toggle read ahead mode",

src/js/script.js

@@ -994,7 +994,10 @@ function compareInput(showError) {
           }
         } else {
           if (currentWord[i] == undefined) {
-            ret += '<letter class="incorrect extra">' + input[i] + "</letter>";
+            if (!config.hideExtraLetters) {
+              ret +=
+                '<letter class="incorrect extra">' + input[i] + "</letter>";
+            }
           } else {
             ret +=
               '<letter class="incorrect">' +

src/js/userconfig.js

@@ -70,6 +70,7 @@ let defaultConfig = {
   highlightMode: "letter",
   alwaysShowCPM: false,
   enableAds: "off",
+  hideExtraLetters: false,
 };
 
 let cookieConfig = null;
@@ -225,6 +226,7 @@ function applyConfig(configObj) {
     setPunctuation(configObj.punctuation, true);
     setHighlightMode(configObj.highlightMode, true);
     setAlwaysShowCPM(configObj.alwaysShowCPM, true);
+    setHideExtraLetters(configObj.hideExtraLetters, true);
     setMode(configObj.mode, true);
     config.startGraphsAtZero = configObj.startGraphsAtZero;
     // if (
@@ -783,6 +785,22 @@ function setHighlightMode(mode, nosave) {
   if (!nosave) saveConfigToCookie();
 }
 
+function setHideExtraLetters(val, nosave) {
+  if (val == null || val == undefined) {
+    val = false;
+  }
+  config.hideExtraLetters = val;
+  if (!nosave) saveConfigToCookie();
+}
+
+function toggleHideExtraLetters() {
+  config.hideExtraLetters = !config.hideExtraLetters;
+  // if (config.keymapMode !== "off") {
+  //   config.keymapMode = "off";
+  // }
+  saveConfigToCookie();
+}
+
 function setTimerStyle(style, nosave) {
   if (style == null || style == undefined) {
     style = "bar";

static/index.html

@@ -1818,6 +1818,22 @@
                   </div>
                 </div>
               </div>
+              <div class="section hideExtraLetters" section="">
+                <h1>hide extra letters</h1>
+                <div class="text">
+                  Hides extra letters. This will completely avoid words jumping
+                  lines (due to changing width), but might feel a bit confusing
+                  when you press a key and nothing happens.
+                </div>
+                <div class="buttons">
+                  <div class="button off" tabindex="0" onclick="this.blur();">
+                    off
+                  </div>
+                  <div class="button on" tabindex="0" onclick="this.blur();">
+                    on
+                  </div>
+                </div>
+              </div>
               <div class="section swapEscAndTab" section="">
                 <h1>swap esc and tab</h1>
                 <div class="text">