added flip test colors setting

public/css/style.scss

@@ -769,6 +769,15 @@ key {
   user-select: none;
 }
 
+#words.flipped{
+  .word{
+    color: var(--text-color);
+    & letter.correct{
+      color: var(--sub-color);
+    }
+  }
+}
+
 #restartTestButton, #showWordHistoryButton {
   position: relative;
   opacity: 0;
@@ -874,10 +883,6 @@ key {
                 -1px 1px 0px var(--bg-color);
 }
 
-.word.active {
-  color: var(--sub-color);
-}
-
 .word letter {
   // transition: .1s;
   // height: 1rem;

public/index.html

@@ -335,6 +335,16 @@
             <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 flipped
+            and the future test will be brighter than the already typed text.
+          </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 fontSize">
           <h1>font size</h1>
           <div class="text">Change the font size of the test words</div>

public/js/commandline.js

@@ -71,6 +71,13 @@ let commands = {
                 toggleQuickEnd();
             }
         },
+        {
+            id: "toggleFlipTestColors",
+            display: "Toggle flip test colors",
+            exec: () => {
+                toggleFlipTestColors();
+            }
+        },
         {
             id: "changeDifficulty",
             display: "Change difficulty...",

public/js/script.js

@@ -1048,6 +1048,14 @@ function toggleResultWordsDisplay(){
   }
 }
 
+function flipTestColors(tf){
+  if(tf){
+    $("#words").addClass('flipped');
+  }else{
+    $("#words").removeClass('flipped');
+  }
+}
+
 
 $(document).on("click", "#top .logo", (e) => {
   changePage('test');

public/js/settings.js

@@ -18,6 +18,7 @@ function updateSettingsPage(){
     setSettingsButton('freedomMode', config.freedomMode);
     setSettingsButton('blindMode', config.blindMode);
     setSettingsButton('quickEnd', config.quickEnd);
+    setSettingsButton('flipTestColors', config.flipTestColors);
 
 
     setActiveThemeButton();
@@ -231,3 +232,15 @@ $(".pageSettings .section.quickEnd .buttons .button.off").click(e => {
     showNotification('Quick end off', 1000);
     setSettingsButton('quickEnd', config.quickEnd);
 })
+
+//flip test
+$(".pageSettings .section.flipTestColors .buttons .button.on").click(e => {
+    setFlipTestColors(true);
+    showNotification('Flip test colors on', 1000);
+    setSettingsButton('flipTestColors', config.flipTestColors);
+})
+$(".pageSettings .section.flipTestColors .buttons .button.off").click(e => {
+    setFlipTestColors(false);
+    showNotification('Flip test colors off', 1000);
+    setSettingsButton('flipTestColors', config.flipTestColors);
+})

public/js/userconfig.js

@@ -16,7 +16,8 @@ let config = {
     difficulty: "normal",
     blindMode: false,
     quickEnd: false,
-    caretStyle: "default"
+    caretStyle: "default",
+    flipTestColors: false
 }
 
 //cookies
@@ -49,6 +50,7 @@ function loadConfigFromCookie() {
         setDifficulty(newConfig.difficulty,true);
         setBlindMode(newConfig.blindMode,true);
         setQuickEnd(newConfig.quickEnd,true);
+        setFlipTestColors(newConfig.flipTestColors,true);
         if(newConfig.resultFilters == null || newConfig.resultFilters == undefined){
             newConfig.resultFilters = ["all"];
         }
@@ -81,6 +83,7 @@ function toggleBlindMode(){
         blind = false;
     }
     config.blindMode = blind;
+    saveConfigToCookie();
 }
 
 function setBlindMode(blind, nosave){
@@ -98,6 +101,7 @@ function toggleQuickEnd(){
         qe = false;
     }
     config.quickEnd = qe;
+    saveConfigToCookie();
 }
 
 function setQuickEnd(qe, nosave){
@@ -108,6 +112,23 @@ function setQuickEnd(qe, nosave){
     if(!nosave) saveConfigToCookie();
 }
 
+
+//flip colors
+function setFlipTestColors(flip,nosave){
+    if(flip == undefined){
+        flip = false;
+    }
+    config.flipTestColors = flip;
+    flipTestColors(flip);
+    if(!nosave) saveConfigToCookie();
+}
+
+function toggleFlipTestColors(){
+    config.flipTestColors = !config.flipTestColors;
+    flipTestColors(config.flipTestColors);
+    saveConfigToCookie();
+}
+
 function setCaretStyle(caretStyle, nosave) {
     if (caretStyle == null || caretStyle == undefined) {
         caretStyle = 'default';