added an option to go back to the previous style and show all lines at once

public/css/style.scss

@@ -85,7 +85,7 @@ body {
   background: var(--bg-color);
   font-family: "Roboto Mono";
   color: var(--main-color);
-  overflow-x: hidden;
+  // overflow-x: hidden;
 }
 
 html {

public/index.html

@@ -910,6 +910,16 @@
             <div class="button" opacity="1" tabindex="0" onclick="this.blur();">1</div>
           </div>
         </div>
+        <div class="section showAllLines">
+          <h1>show all lines</h1>
+          <div class="text">When enabled, the website will show all lines for word,custom and quote mode tests -
+            otherwise the lines will be limited to 3, and will automatically scroll.
+          </div>
+          <div class="buttons">
+            <div class="button on" tabindex="0" onclick="this.blur();">on</div>
+            <div class="button off" tabindex="0" onclick="this.blur();">off</div>
+          </div>
+        </div>
         <div class="section flipTestColors">
           <h1>flip test colors</h1>
           <div class="text">By default, typed text is brighter than the future text. When enabled, the colors will be

public/js/commandline.js

@@ -130,6 +130,13 @@ let commands = {
         toggleFlipTestColors();
       },
     },
+    {
+      id: "toggleShowAllLines",
+      display: "Toggle show all lines",
+      exec: () => {
+        toggleShowAllLines();
+      },
+    },
     {
       id: "toggleColorfulMode",
       display: "Toggle colorful mode",

public/js/script.js

@@ -302,8 +302,12 @@ function initWords() {
   if (config.mode == "time" || config.mode == "words") {
     // let wordsBound = config.mode == "time" ? 60 : config.words;
     let wordsBound = 60;
-    if (config.mode === "words" && config.words < wordsBound) {
+    if (config.showAllLines) {
       wordsBound = config.words;
+    } else {
+      if (config.mode === "words" && config.words < wordsBound) {
+        wordsBound = config.words;
+      }
     }
     for (let i = 0; i < wordsBound; i++) {
       randomWord = language[Math.floor(Math.random() * language.length)];
@@ -467,8 +471,9 @@ function punctuateWord(previousWord, currentWord, index, maxindex) {
 
 function addWord() {
   if (
-    wordsList.length - inputHistory.length > 60 ||
-    (config.mode === "words" && wordsList.length >= config.words)
+    !config.showAllLines &&
+    (wordsList.length - inputHistory.length > 60 ||
+      (config.mode === "words" && wordsList.length >= config.words))
   )
     return;
   let language = words[config.language];
@@ -497,21 +502,7 @@ function addWord() {
 
 function showWords() {
   $("#words").empty();
-  // if (
-  //   config.mode == "words" ||
-  //   config.mode == "custom" ||
-  //   config.mode == "quote"
-  // ) {
-  //   $("#words").css("height", "auto");
-  //   for (let i = 0; i < wordsList.length; i++) {
-  //     let w = "<div class='word'>";
-  //     for (let c = 0; c < wordsList[i].length; c++) {
-  //       w += "<letter>" + wordsList[i].charAt(c) + "</letter>";
-  //     }
-  //     w += "</div>";
-  //     $("#words").append(w);
-  //   }
-  // } else if (config.mode == "time") {
+
   for (let i = 0; i < wordsList.length; i++) {
     let w = "<div class='word'>";
     for (let c = 0; c < wordsList[i].length; c++) {
@@ -520,12 +511,17 @@ function showWords() {
     w += "</div>";
     $("#words").append(w);
   }
+
   $("#words").removeClass("hidden");
-  const wordHeight = $($(".word")[0]).outerHeight(true);
-  $("#words")
-    .css("height", wordHeight * 3 + "px")
-    .css("overflow", "hidden");
-  // }
+  if (config.showAllLines) {
+    $("#words").css("height", "auto");
+  } else {
+    const wordHeight = $($(".word")[0]).outerHeight(true);
+    $("#words")
+      .css("height", wordHeight * 3 + "px")
+      .css("overflow", "hidden");
+  }
+
   updateActiveElement();
   updateCaretPosition();
 }
@@ -859,17 +855,19 @@ function updateCaretPosition() {
       duration
     );
 
-    // let browserHeight = window.innerHeight;
-    // let middlePos = browserHeight / 2 - $("#caret").outerHeight() / 2;
-    // let contentHeight = document.body.scrollHeight;
+    if (config.showAllLines) {
+      let browserHeight = window.innerHeight;
+      let middlePos = browserHeight / 2 - $("#caret").outerHeight() / 2;
+      let contentHeight = document.body.scrollHeight;
 
-    // if (newTop >= middlePos && contentHeight > browserHeight) {
-    //   window.scrollTo({
-    //     left: 0,
-    //     top: newTop - middlePos,
-    //     behavior: "smooth",
-    //   });
-    // }
+      if (newTop >= middlePos && contentHeight > browserHeight) {
+        window.scrollTo({
+          left: 0,
+          top: newTop - middlePos,
+          behavior: "smooth",
+        });
+      }
+    }
   } catch (e) {}
 }
 
@@ -2576,44 +2574,46 @@ $(document).keydown((event) => {
       event.preventDefault();
       let currentWord = wordsList[currentWordIndex];
       // if (config.mode == "time") {
-      // let currentTop = Math.floor($($("#words .word")[currentWordIndex]).position().top);
-      // let nextTop = Math.floor($($("#words .word")[currentWordIndex + 1]).position().top);
-      let currentTop = Math.floor(
-        document.querySelectorAll("#words .word")[currentWordIndex].offsetTop
-      );
-      let nextTop;
-      try {
-        nextTop = Math.floor(
-          document.querySelectorAll("#words .word")[currentWordIndex + 1]
-            .offsetTop
+      if (!config.showAllLines) {
+        // let currentTop = Math.floor($($("#words .word")[currentWordIndex]).position().top);
+        // let nextTop = Math.floor($($("#words .word")[currentWordIndex + 1]).position().top);
+        let currentTop = Math.floor(
+          document.querySelectorAll("#words .word")[currentWordIndex].offsetTop
         );
-      } catch (e) {
-        nextTop = 0;
-      }
-
-      if (nextTop > currentTop || activeWordJumped) {
-        //last word of the line
-        if (currentTestLine > 0) {
-          let hideBound = currentTop;
-          if (activeWordJumped) {
-            hideBound = activeWordTopBeforeJump;
-          }
-          activeWordJumped = false;
-
-          let toHide = [];
-          let wordElements = $("#words .word");
-          for (let i = 0; i < currentWordIndex + 1; i++) {
-            if ($(wordElements[i]).hasClass("hidden")) continue;
-            // let forWordTop = Math.floor($(wordElements[i]).position().top);
-            let forWordTop = Math.floor(wordElements[i].offsetTop);
-            if (forWordTop < hideBound) {
-              // $($("#words .word")[i]).addClass("hidden");
-              toHide.push($($("#words .word")[i]));
-            }
-          }
-          toHide.forEach((el) => el.addClass("hidden"));
+        let nextTop;
+        try {
+          nextTop = Math.floor(
+            document.querySelectorAll("#words .word")[currentWordIndex + 1]
+              .offsetTop
+          );
+        } catch (e) {
+          nextTop = 0;
+        }
+
+        if (nextTop > currentTop || activeWordJumped) {
+          //last word of the line
+          if (currentTestLine > 0) {
+            let hideBound = currentTop;
+            if (activeWordJumped) {
+              hideBound = activeWordTopBeforeJump;
+            }
+            activeWordJumped = false;
+
+            let toHide = [];
+            let wordElements = $("#words .word");
+            for (let i = 0; i < currentWordIndex + 1; i++) {
+              if ($(wordElements[i]).hasClass("hidden")) continue;
+              // let forWordTop = Math.floor($(wordElements[i]).position().top);
+              let forWordTop = Math.floor(wordElements[i].offsetTop);
+              if (forWordTop < hideBound) {
+                // $($("#words .word")[i]).addClass("hidden");
+                toHide.push($($("#words .word")[i]));
+              }
+            }
+            toHide.forEach((el) => el.addClass("hidden"));
+          }
+          currentTestLine++;
         }
-        currentTestLine++;
       }
       // }
       if (config.blindMode) $("#words .word.active letter").addClass("correct");
@@ -2659,8 +2659,14 @@ $(document).keydown((event) => {
       ) {
         updateTimer();
       }
-      if (config.mode == "time" || config.mode == "words") {
-        addWord();
+      if (config.showAllLines) {
+        if (config.mode == "time") {
+          addWord();
+        }
+      } else {
+        if (config.mode == "time" || config.mode == "words") {
+          addWord();
+        }
       }
     }
   }

public/js/settings.js

@@ -50,6 +50,7 @@ function updateSettingsPage() {
   setSettingsButton("maxConfidence", config.maxConfidence);
   setSettingsButton("randomTheme", config.randomTheme);
   setSettingsButton("stopOnError", config.stopOnError);
+  setSettingsButton("showAllLines", config.showAllLines);
 
   setActiveThemeButton();
   setActiveLanguageButton();
@@ -663,6 +664,16 @@ $(".pageSettings .section.stopOnError .buttons .button.off").click((e) => {
   setSettingsButton("stopOnError", config.stopOnError);
 });
 
+//showAllLines
+$(".pageSettings .section.showAllLines .buttons .button.on").click((e) => {
+  setShowAllLines(true);
+  setSettingsButton("showAllLines", config.showAllLines);
+});
+$(".pageSettings .section.showAllLines .buttons .button.off").click((e) => {
+  setShowAllLines(false);
+  setSettingsButton("showAllLines", config.showAllLines);
+});
+
 //discord
 $(
   ".pageSettings .section.discordIntegration .buttons .generateCodeButton"

public/js/userconfig.js

@@ -39,6 +39,7 @@ let defaultConfig = {
   timerColor: "black",
   timerOpacity: "0.25",
   stopOnError: false,
+  showAllLines: false,
 };
 
 let cookieConfig = null;
@@ -249,6 +250,26 @@ function setStopOnError(soe, nosave) {
   if (!nosave) saveConfigToCookie();
 }
 
+//show all lines
+function toggleShowAllLines() {
+  sal = !config.showAllLines;
+  if (sal == undefined) {
+    sal = false;
+  }
+  config.showAllLines = sal;
+  restartTest();
+  saveConfigToCookie();
+}
+
+function setShowAllLines(sal, nosave) {
+  if (sal == undefined) {
+    sal = false;
+  }
+  config.showAllLines = sal;
+  restartTest();
+  if (!nosave) saveConfigToCookie();
+}
+
 //quickend
 function toggleQuickEnd() {
   qe = !config.quickEnd;