added timer styles

public/css/style.scss

@@ -356,27 +356,30 @@ a:hover {
   z-index: -1;
 }
 
-#liveWpm {
+#liveWpm, #timerNumber {
   position: relative;
-  // font-size: 1.7rem;
-  // line-height: 1.7rem;
-  // color: var(--sub-color);
   font-size: 10rem;
   color: black;
   opacity: 0;
   width: 100%;
   left: 0;
   text-align: center;
-  // text-align: right;
   z-index: -1;
-  // margin-top: .6rem;
-  // grid-column: 3/4;
-  // grid-row: 1/2;
-  // opacity: 0;
   height: 0;
   transition: 0.25s;
+  line-height: 0;
 }
 
+#timerNumber{
+  bottom: 4rem;
+  transition: none;
+}
+
+#liveWpm{
+  top: 4rem;
+}
+
+
 #centerContent {
   max-width: 1000px;
   min-width: 600px;

public/index.html

@@ -236,6 +236,7 @@
         </div>
         <input id="wordsInput" class="" tabindex="0" autocomplete="off"></input>
         <div id="wordsTitle">input history</div>
+        <div id="timerNumber">60</div>
         <div id="words" class="extraColor"></div>
         <div id="liveWpm">123</div>
         <div class="buttons">
@@ -392,6 +393,14 @@
             <div class="button" caret="underline" tabindex="0" onclick="this.blur();">_</div>
           </div>
         </div>
+        <div class="section timerStyle" section="">
+          <h1>timer style</h1>
+          <div class="text">Change the style of the timer during a timed test.</div>
+          <div class="buttons">
+            <div class="button" timer="bar" tabindex="0" onclick="this.blur();">bar</div>
+            <div class="button" timer="text" tabindex="0" onclick="this.blur();">text</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
@@ -440,8 +449,8 @@
           </div>
         </div>
         <div class="section timerBar">
-          <h1>timer bar</h1>
-          <div class="text">Displays a live timer bar at the top of the screen when in timed mode.</div>
+          <h1>timer</h1>
+          <div class="text">Displays a live timer for timed tests.</div>
           <div class="buttons">
             <div class="button on" tabindex="0" onclick="this.blur();">show</div>
             <div class="button off" tabindex="0" onclick="this.blur();">hide</div>

public/js/commandline.js

@@ -37,7 +37,7 @@ let commands = {
         },
         {
             id: "toggleTimerBar",
-            display: "Toggle timer bar display",
+            display: "Toggle timer display",
             exec: () => {
                 config.showTimerBar = !config.showTimerBar;
                 saveConfigToCookie();
@@ -110,6 +110,15 @@ let commands = {
                 showCommandLine();
             }
         },
+        {
+            id: "changeTimerStyle",
+            display: "Change timer...",
+            subgroup: true,
+            exec: () => {
+                currentCommands.push(commandsTimerStyle);
+                showCommandLine();
+            }
+        },
         {
             id: "changeTheme",
             display: "Change theme...",
@@ -245,6 +254,28 @@ let commandsCaretStyle = {
     ]
 }
 
+
+let commandsTimerStyle = {
+    title: "Change timer...",
+    list: [
+        {
+            id: "setTimerStyleBar",
+            display: "bar",
+            exec: () => {
+                setTimerStyle('bar');
+            }
+        },
+        {
+            id: "setTimerStyleText",
+            display: "text",
+            exec: () => {
+                setTimerStyle('text');
+            }
+        },
+
+    ]
+}
+
 let commandsWordCount = {
     title: "Change word count...",
     list: [

public/js/script.js

@@ -413,28 +413,47 @@ function highlightBadWord(index,showError) {
 
 function showTimer() {
   if (!config.showTimerBar) return;
-  $("#timerWrapper").animate({
-    "opacity": 1
-  },125);
+  if(config.timerStyle === "bar"){
+    $("#timerWrapper").animate({
+      "opacity": 1
+    },250);
+  }else if(config.timerStyle === "text"){
+    $("#timerNumber").animate({
+      "opacity": .25
+    },250);
+  }
 }
 
 function hideTimer() {
-  $("#timerWrapper").animate({
-    "opacity": 0
-  },125);
+  if(config.timerStyle === "bar"){
+    $("#timerWrapper").animate({
+      "opacity": 0
+    },125);
+  }else if(config.timerStyle === "text"){
+    $("#timerNumber").animate({
+      "opacity": 0
+    },125);
+  }
 }
 
 function restartTimer() {
-  $("#timer").stop(true, true).animate({
-    "width": "100vw"
-  },0);
+  if(config.timerStyle === "bar"){
+    $("#timer").stop(true, true).animate({
+      "width": "100vw"
+    },0);
+  }
 }
 
-function updateTimerBar() {
-  let percent = 100 - (((time + 1) / config.time) * 100);
-  $("#timer").stop(true, true).animate({
-    "width": percent + "vw"
-  },1000,"linear");
+function updateTimer() {
+  if(config.timerStyle === "bar"){
+    let percent = 100 - (((time + 1) / config.time) * 100);
+    $("#timer").stop(true, true).animate({
+      "width": percent + "vw"
+    },1000,"linear");
+  }else if(config.timerStyle === "text"){
+    $("#timerNumber").html(config.time - time);
+  }
+  
 }
 
 
@@ -625,6 +644,7 @@ function showResult(difficultyFailed = false) {
   setFocus(false);
   hideCaret();
   hideLiveWpm();
+  hideTimer();
   testInvalid = false;
   let stats = calculateStats();
   if(stats === undefined){
@@ -1636,11 +1656,11 @@ $(document).keypress(function(event) {
       restartTimer();
       showTimer();
     }
-    updateTimerBar();
+    updateTimer();
     clearIntervals();
     timers.push(setInterval(function() {
       time++;
-      updateTimerBar();
+      updateTimer();
       let wpm = liveWPM();
       updateLiveWpm(wpm);
       showLiveWpm();

public/js/settings.js

@@ -72,6 +72,8 @@ function updateSettingsPage(){
     setActiveFontSizeButton();
     setActiveDifficultyButton();
     setActiveCaretStyleButton();
+    setActiveTimerStyleButton();
+
 
     if (config.showKeyTips) {
         $(".pageSettings .tip").removeClass('hidden');
@@ -112,6 +114,11 @@ function setActiveCaretStyleButton() {
     $(`.pageSettings .section.caretStyle .buttons .button[caret=`+config.caretStyle+`]`).addClass('active');
 }
 
+function setActiveTimerStyleButton() {
+    $(`.pageSettings .section.timerStyle .buttons .button`).removeClass('active');
+    $(`.pageSettings .section.timerStyle .buttons .button[timer=`+config.timerStyle+`]`).addClass('active');
+}
+
 function setSettingsButton(buttonSection,tf) {
     if (tf) {
         $(".pageSettings .section."+buttonSection+" .buttons .button.on").addClass('active');

public/js/userconfig.js

@@ -20,7 +20,8 @@ let defaultConfig = {
     flipTestColors: false,
     layout:"default",
     showDiscordDot: true,
-    maxConfidence: false
+    maxConfidence: false,
+    timerStyle: "bar"
 }
 
 let config = defaultConfig;
@@ -60,6 +61,7 @@ function loadConfigFromCookie() {
         setDiscordDot(newConfig.hideDiscordDot,true);
         setExtraTestColor(newConfig.extraTestColor,true);
         setMaxConfidence(newConfig.maxConfidence,true);
+        setTimerStyle(newConfig.timerStyle,true);
         if(newConfig.resultFilters == null || newConfig.resultFilters == undefined){
             newConfig.resultFilters = ["all"];
         }
@@ -213,6 +215,15 @@ function setCaretStyle(caretStyle, nosave) {
     if(!nosave) saveConfigToCookie();
 }
 
+
+function setTimerStyle(style, nosave) {
+    if (style == null || style == undefined) {
+        style = 'bar';
+    }
+    config.timerStyle = style;
+    if(!nosave) saveConfigToCookie();
+}
+
 //key tips
 function setKeyTips(keyTips, nosave) {
     config.showKeyTips = keyTips;