From 52387541c6392122902aa3817522f437673c6ac3 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Sun, 31 May 2020 20:30:56 +0100
Subject: [PATCH] added flip test colors setting

---
 public/css/style.scss    | 13 +++++++++----
 public/index.html        | 10 ++++++++++
 public/js/commandline.js |  7 +++++++
 public/js/script.js      |  8 ++++++++
 public/js/settings.js    | 13 +++++++++++++
 public/js/userconfig.js  | 23 ++++++++++++++++++++++-
 6 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 33225058e..b5f1b79a2 100644
--- a/public/css/style.scss
+++ b/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;
diff --git a/public/index.html b/public/index.html
index 6757938d1..3eec7293d 100644
--- a/public/index.html
+++ b/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>
diff --git a/public/js/commandline.js b/public/js/commandline.js
index 029bc02d8..b94730b42 100644
--- a/public/js/commandline.js
+++ b/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...",
diff --git a/public/js/script.js b/public/js/script.js
index 649cf5c30..7e5221924 100644
--- a/public/js/script.js
+++ b/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');
diff --git a/public/js/settings.js b/public/js/settings.js
index 80325181b..ca12298bb 100644
--- a/public/js/settings.js
+++ b/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);
+})
\ No newline at end of file
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index 866732c0e..f3705eddd 100644
--- a/public/js/userconfig.js
+++ b/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';