added various color themes and timer opacity setting

Added Aether, FroYo, Milkshake, Future Funk, and Retrocast color themes.

Added a setting to change the opacity of the live WPM text.

public/index.html

@@ -885,6 +885,16 @@
             <div class="button" color="main" tabindex="0" onclick="this.blur();">main</div>
           </div>
         </div>
+        <div class="section timerOpacity" section="">
+          <h1>timer opacity</h1>
+          <div class="text">Change the opacity of the timer number/bar and live wpm number.</div>
+          <div class="buttons">
+            <div class="button" opacity=".25" tabindex="0" onclick="this.blur();">.25</div>
+            <div class="button" opacity=".5" tabindex="0" onclick="this.blur();">.5</div>
+            <div class="button" opacity=".75" tabindex="0" onclick="this.blur();">.75</div>
+            <div class="button" opacity="1" tabindex="0" onclick="this.blur();">1</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

@@ -173,6 +173,15 @@ let commands = {
         showCommandLine();
       },
     },
+    {
+      id: "changeTimerOpacity",
+      display: "Change timer opacity...",
+      subgroup: true,
+      exec: () => {
+        currentCommands.push(commandsTimerOpacity);
+        showCommandLine();
+      },
+    },
     {
       id: "changeTheme",
       display: "Change theme...",
@@ -334,6 +343,40 @@ let commandsTimerColor = {
   ],
 };
 
+let commandsTimerOpacity = {
+  title: "Change timer opacity...",
+  list: [
+    {
+      id: "setTimerOpacity.25",
+      display: ".25",
+      exec: () => {
+        setTimerColor(.25);
+      },
+    },
+    {
+      id: "setTimerOpacity.5",
+      display: ".5",
+      exec: () => {
+        setTimerColor(.5);
+      },
+    },
+    {
+      id: "setTimerOpacity.75",
+      display: ".75",
+      exec: () => {
+        setTimerColor(.75);
+      },
+    },
+    {
+      id: "setTimerOpacity1",
+      display: "1",
+      exec: () => {
+        setTimerColor(1);
+      },
+    },
+  ],
+};
+
 let commandsWordCount = {
   title: "Change word count...",
   list: [

public/js/script.js

@@ -561,6 +561,7 @@ function compareInput(wrdIndex, input, showError) {
       }
     }
   }
+
   if (input.length < currentWord.length) {
     for (let i = input.length; i < currentWord.length; i++) {
       ret += "<letter>" + currentWord[i] + "</letter>";
@@ -665,6 +666,13 @@ function changeTimerColor(color) {
   }
 }
 
+function changeTimerOpacity(opacity) {
+ if(opacity){
+    $("#timerNumber").css("opacity", opacity);
+    $("#liveWpm").css("opacity", opacity);
+  }
+}
+
 function restartTimer() {
   if (config.timerStyle === "bar") {
     if (config.mode === "time") {

public/js/settings.js

@@ -190,6 +190,15 @@ function setActiveTimerColorButton() {
   ).addClass("active");
 }
 
+function setActiveTimerOpacityButton() {
+  $(`.pageSettings .section.timerOpacity .buttons .button`).removeClass("active");
+  $(
+    `.pageSettings .section.timerOpacity .buttons .button[color=` +
+      config.timerOpacity +
+      `]`
+  ).addClass("active");
+}
+
 function setSettingsButton(buttonSection, tf) {
   if (tf) {
     $(
@@ -505,6 +514,14 @@ $(document).on("click", ".pageSettings .section.timerColor .button", (e) => {
   setActiveTimerColorButton();
 });
 
+//timer opacity
+$(document).on("click", ".pageSettings .section.timerOpacity .button", (e) => {
+  let color = $(e.currentTarget).attr("opacity");
+  setTimerOpacity(color);
+  // showNotification('Timer style updated', 1000);
+  setActiveTimerOpacityButton();
+});
+
 //blind mode
 $(".pageSettings .section.blindMode .buttons .button.on").click((e) => {
   setBlindMode(true);

public/js/userconfig.js

@@ -37,6 +37,7 @@ let defaultConfig = {
   colorfulMode: true,
   randomTheme: false,
   timerColor: "black",
+  timerOpacity: .25,
 };
 
 let cookieConfig = null;
@@ -130,6 +131,7 @@ function applyConfig(configObj) {
     setMaxConfidence(configObj.maxConfidence, true);
     setTimerStyle(configObj.timerStyle, true);
     setTimerColor(configObj.timerColor, true);
+    setTimerOpacity(configObj.timerOpacity, true);
     if (
       configObj.resultFilters == null ||
       configObj.resultFilters == undefined
@@ -314,6 +316,14 @@ function setTimerColor(color, nosave) {
   changeTimerColor(color);
   if (!nosave) saveConfigToCookie();
 }
+function setTimerOpacity(opacity, nosave) {
+  if (opacity == null || opacity == undefined) {
+    opacity = .25;
+  }
+  config.timerOpacity = opacity;
+  changeTimerOpacity(opacity);
+  if (!nosave) saveConfigToCookie();
+}
 
 //key tips
 function setKeyTips(keyTips, nosave) {

public/themes/aether.css

@@ -0,0 +1,30 @@
+:root {
+    --bg-color: #101820;
+    --main-color: #eedaea;
+    --caret-color: #eedaea;
+    --sub-color: #cf6bdd;
+    --text-color: #eedaea;
+    --error-color: #ff5253;
+    --error-extra-color: #e3002b;
+    --colorful-error-color: #ff5253;
+    --colorful-error-extra-color: #e3002b;
+}
+  #menu .icon-button:nth-child(1){
+    color: #e4002b;
+  }
+  
+  #menu .icon-button:nth-child(2){
+    color: #c53562;
+  }
+  
+  #menu .icon-button:nth-child(3){
+    color: #95549e;
+  }
+  
+  #menu .icon-button:nth-child(4){
+    color: #6744a1;
+  }
+  
+  #menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){
+    color: #393c73;
+  }

public/themes/froyo.css

@@ -0,0 +1,30 @@
+:root {
+    --bg-color: #e1dacb;
+    --main-color: #7b7d7d;
+    --caret-color: #7b7d7d;
+    --sub-color: #b29c5e;
+    --text-color: #7b7d7d;
+    --error-color: #f28578;
+    --error-extra-color: #d56558;
+    --colorful-error-color: #f28578;
+    --colorful-error-extra-color: #d56558;
+}
+  #menu .icon-button:nth-child(1){
+    color: #ff7e73;
+  }
+  
+  #menu .icon-button:nth-child(2){
+    color: #f5c370;
+  }
+  
+  #menu .icon-button:nth-child(3){
+    color: #08d9a3;
+  }
+  
+  #menu .icon-button:nth-child(4){
+    color: #0ca5e2;
+  }
+  
+  #menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){
+    color: #875ac6;
+  }

public/themes/future_funk.css

@@ -0,0 +1,32 @@
+:root {
+    --bg-color: #2E1A47;
+    --main-color: #f7f2ea;
+    --caret-color: #f7f2ea;
+    --sub-color: #c18fff;
+    --text-color: #f7f2ea;
+    --error-color: #F8BED6;
+    --error-extra-color: #F04E98;
+    --colorful-error-color: #F8BED6;
+    --colorful-error-extra-color: #F04E98;
+  }
+  
+  
+  #menu .icon-button:nth-child(1){
+    color: #F04E98;
+  }
+  
+  #menu .icon-button:nth-child(2){
+    color: #F8BED6;
+  }
+  
+  #menu .icon-button:nth-child(3){
+    color: #F6EB61;
+  }
+  
+  #menu .icon-button:nth-child(4){
+    color: #A4DBE8;
+  }
+  
+  #menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){
+    color: #a266ed;
+  }

public/themes/list.json

@@ -252,5 +252,30 @@
         "name": "hammerhead",
         "bgColor": "#030613",
         "textColor": "#4fcdb9"
+    },
+    {
+        "name": "future funk",
+        "bgColor": "#2E1A47",
+        "textColor": "f7f2ea"
+    },
+    {
+        "name": "milkshake",
+        "bgColor": "#ffffff",
+        "textColor": "#212b43"
+    },
+    {
+        "name": "aether",
+        "bgColor": "#101820",
+        "textColor": "#cf6bdd"
+    },
+    {
+        "name": "froyo",
+        "bgColor": "#e1dacb",
+        "textColor": "#b29c5e"
+    },
+    {
+        "name": "retrocast",
+        "bgColor": "#07737a",
+        "textColor": "#88dbdf"
     }
 ]

public/themes/milkshake.css

@@ -0,0 +1,37 @@
+:root {
+    --bg-color: #ffffff;
+    --main-color: #212b43;
+    --caret-color: #212b43;
+    --sub-color: #62cfe6;
+    --text-color: #212b43;
+    --error-color: #f19dac;
+    --error-extra-color: #e58c9d;
+    --colorful-error-color: #f19dac;
+    --colorful-error-extra-color: #e58c9d;
+  }
+  
+  
+  #menu .icon-button:nth-child(1){
+    color: #f19dac;
+  }
+  
+  #menu .icon-button:nth-child(2){
+    color: #f6f4a0;
+  }
+  
+  #menu .icon-button:nth-child(3){
+    color: #73e4d0;
+  }
+  
+  #menu .icon-button:nth-child(4){
+    color: #61cfe6;
+  }
+  
+  #menu .icon-button:nth-child(5){
+    color: #ba96db;
+  }
+  
+  #menu .icon-button:nth-child(6){
+    color: #ba96db;
+  }
+  

public/themes/retrocast.css

@@ -0,0 +1,30 @@
+:root {
+    --bg-color: #07737a;
+    --main-color: #88dbdf;
+    --caret-color: #88dbdf;
+    --sub-color: #f3e03b;
+    --text-color: #ffffff;
+    --error-color: #ff585d;
+    --error-extra-color: #c04455;
+    --colorful-error-color: #ff585d;
+    --colorful-error-extra-color: #c04455;
+}
+  #menu .icon-button:nth-child(1){
+    color: #88dbdf;
+  }
+
+  #menu .icon-button:nth-child(2){
+    color: #88dbdf;
+  }
+
+  #menu .icon-button:nth-child(3){
+    color: #88dbdf;
+  }
+
+  #menu .icon-button:nth-child(4){
+    color: #ff585d;
+  }
+
+  #menu .icon-button:nth-child(5), #menu .icon-button:nth-child(6){
+    color: #f3e03b;
+  }