Add read ahead mode.

public/css/style.scss

@@ -1407,6 +1407,13 @@ key {
       }
     }
   }
+
+  &.readAheadMode {
+    .word.active:nth-of-type(n + 2),
+    .word.active:nth-of-type(n + 2) + .word {
+      color: var(--bg-color);
+    }
+  }
 }
 
 #words.flipped.colorfulMode .word.error,

public/index.html

@@ -1613,6 +1613,21 @@
                 </div>
               </div>
             </div>
+            <div class="section readAheadMode">
+              <h1>read ahead mode</h1>
+              <div class="text">
+                When enabled, the active and immediately following test words
+                will be hidden. Helps you practice reading ahead.
+              </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 alwaysShowWordsHistory">
               <h1>always show words history</h1>
               <div class="text">

public/js/commandline.js

@@ -137,6 +137,13 @@ let commands = {
         toggleBlindMode();
       },
     },
+    {
+      id: "toggleReadAheadMode",
+      display: "Toggle read ahead mode",
+      exec: () => {
+        toggleReadAheadMode();
+      },
+    },
     {
       id: "toggleQuickEnd",
       display: "Toggle quick end",

public/js/script.js

@@ -1798,6 +1798,7 @@ function showResult(difficultyFailed = false) {
       difficulty: config.difficulty,
       testDuration: testtime,
       blindMode: config.blindMode,
+      readAheadMode: config.readAheadMode,
       theme: config.theme,
       tags: activeTags,
       keySpacing: keypressStats.spacing.array,
@@ -2128,6 +2129,9 @@ function showResult(difficultyFailed = false) {
   if (config.blindMode) {
     testType += "<br>blind";
   }
+  if (config.readAheadMode) {
+    testType += "<br>read_ahead";
+  }
   if (activeFunBox !== "none") {
     testType += "<br>" + activeFunBox;
   }
@@ -3010,6 +3014,14 @@ function applyColorfulMode(tc) {
   }
 }
 
+function applyReadAheadMode(tc) {
+  if (tc) {
+    $("#words").addClass("readAheadMode");
+  } else {
+    $("#words").removeClass("readAheadMode");
+  }
+}
+
 function showEditTags(action, id, name) {
   if (action === "add") {
     $("#tagsWrapper #tagsEdit").attr("action", "add");
@@ -3092,6 +3104,12 @@ function updateTestModesNotice() {
     );
   }
 
+  if (config.readAheadMode) {
+    $(".pageTest #testModesNotice").append(
+      `<div><i class="fas fa-arrow-right"></i>read ahead</div>`
+    );
+  }
+
   if (activeFunBox !== "none") {
     $(".pageTest #testModesNotice").append(
       `<div><i class="fas fa-gamepad"></i>${activeFunBox.replace(

public/js/settings.js

@@ -138,6 +138,10 @@ settingsGroups.confidenceMode = new SettingsGroup(
 );
 settingsGroups.blindMode = new SettingsGroup("blindMode", setBlindMode);
 settingsGroups.quickEnd = new SettingsGroup("quickEnd", setQuickEnd);
+settingsGroups.readAheadMode = new SettingsGroup(
+  "readAheadMode",
+  setReadAheadMode
+);
 settingsGroups.alwaysShowWordsHistory = new SettingsGroup(
   "alwaysShowWordsHistory",
   setAlwaysShowWordsHistory

public/js/userconfig.js

@@ -30,6 +30,7 @@ let defaultConfig = {
   difficulty: "normal",
   blindMode: false,
   quickEnd: false,
+  readAheadMode: false,
   caretStyle: "default",
   flipTestColors: false,
   layout: "default",
@@ -150,6 +151,7 @@ function applyConfig(configObj) {
     setDifficulty(configObj.difficulty, true);
     setBlindMode(configObj.blindMode, true);
     setQuickEnd(configObj.quickEnd, true);
+    setReadAheadMode(configObj.readAheadMode, true);
     setFlipTestColors(configObj.flipTestColors, true);
     setColorfulMode(configObj.colorfulMode, true);
     setConfidenceMode(configObj.confidenceMode, true);
@@ -273,6 +275,24 @@ function setBlindMode(blind, nosave) {
   if (!nosave) saveConfigToCookie();
 }
 
+//read ahead mode
+function toggleReadAheadMode() {
+  config.readAheadMode = !config.readAheadMode;
+  applyReadAheadMode(config.readAheadMode);
+  updateTestModesNotice();
+  saveConfigToCookie();
+}
+
+function setReadAheadMode(readAhead, nosave) {
+  if (readAhead == undefined) {
+    readAhead = false;
+  }
+  config.readAheadMode = readAhead;
+  applyReadAheadMode(readAhead);
+  updateTestModesNotice();
+  if (!nosave) saveConfigToCookie();
+}
+
 //stoponerror
 // function toggleStopOnError() {
 //   soe = !config.stopOnError;