refactor: live stats

backend/src/api/schemas/config-schema.ts

@@ -24,7 +24,6 @@ const CONFIG_SCHEMA = joi.object({
     .length(10),
   favThemes: joi.array().items(joi.string().max(50).token()),
   showKeyTips: joi.boolean(),
-  showLiveWpm: joi.boolean(),
   smoothCaret: joi.string().valid("off", "slow", "medium", "fast"),
   quickRestart: joi.string().valid("off", "tab", "esc", "enter"),
   punctuation: joi.boolean(),
@@ -53,6 +52,9 @@ const CONFIG_SCHEMA = joi.object({
   confidenceMode: joi.string().valid("off", "on", "max"),
   indicateTypos: joi.string().valid("off", "below", "replace"),
   timerStyle: joi.string().valid("off", "bar", "text", "mini"),
+  liveSpeedStyle: joi.string().valid("off", "text", "mini"),
+  liveAccStyle: joi.string().valid("off", "text", "mini"),
+  liveBurstStyle: joi.string().valid("off", "text", "mini"),
   colorfulMode: joi.boolean(),
   randomTheme: joi
     .string()
@@ -130,8 +132,6 @@ const CONFIG_SCHEMA = joi.object({
   strictSpace: joi.boolean(),
   minAcc: joi.string().valid("off", "custom"),
   minAccCustom: joi.number().min(0),
-  showLiveAcc: joi.boolean(),
-  showLiveBurst: joi.boolean(),
   monkey: joi.boolean(),
   repeatQuotes: joi.string().valid("off", "typing"),
   oppositeShiftMode: joi.string().valid("off", "on", "keymap"),

frontend/src/html/pages/settings.html

@@ -750,7 +750,7 @@
         <span>live progress style</span>
       </div>
       <div class="text">
-        Change the style of the timer/word count during a timed test.
+        Change the style of the timer/word count during a test.
       </div>
       <div class="buttons">
         <button data-config-value="off">off</button>
@@ -759,14 +759,55 @@
         <button data-config-value="mini">mini</button>
       </div>
     </div>
+    <div class="section" data-config-name="liveSpeedStyle">
+      <div class="groupTitle">
+        <i class="fas fa-tachometer-alt"></i>
+        <span>live speed style</span>
+      </div>
+      <div class="text">
+        Change the style of the live speed displayed during the test.
+      </div>
+      <div class="buttons">
+        <button data-config-value="off">off</button>
+        <button data-config-value="text">text</button>
+        <button data-config-value="mini">mini</button>
+      </div>
+    </div>
+    <div class="section" data-config-name="liveAccStyle">
+      <div class="groupTitle">
+        <i class="fas fa-tachometer-alt"></i>
+        <span>live accuracy style</span>
+      </div>
+      <div class="text">
+        Change the style of the live accuracy displayed during the test.
+      </div>
+      <div class="buttons">
+        <button data-config-value="off">off</button>
+        <button data-config-value="text">text</button>
+        <button data-config-value="mini">mini</button>
+      </div>
+    </div>
+    <div class="section" data-config-name="liveBurstStyle">
+      <div class="groupTitle">
+        <i class="fas fa-tachometer-alt"></i>
+        <span>live burst style</span>
+      </div>
+      <div class="text">
+        Change the style of the live burst speed displayed during the test.
+      </div>
+      <div class="buttons">
+        <button data-config-value="off">off</button>
+        <button data-config-value="text">text</button>
+        <button data-config-value="mini">mini</button>
+      </div>
+    </div>
     <div class="section" data-config-name="timerColor">
       <div class="groupTitle">
         <i class="fas fa-chart-pie"></i>
-        <span>live progress color</span>
+        <span>live stats color</span>
       </div>
       <div class="text">
-        Change the color of the timer/word count number/bar and live speed
-        number.
+        Change the color of the progress, live speed, accuracy and burst text.
       </div>
       <div class="buttons">
         <button data-config-value="black">black</button>
@@ -778,11 +819,10 @@
     <div class="section" data-config-name="timerOpacity">
       <div class="groupTitle">
         <i class="fas fa-chart-pie"></i>
-        <span>live progress opacity</span>
+        <span>live stats opacity</span>
       </div>
       <div class="text">
-        Change the opacity of the timer/word count number/bar and live speed
-        number.
+        Change the opacity of the progress, live speed, burst and accuracy text.
       </div>
       <div class="buttons">
         <button data-config-value="0.25">0.25</button>
@@ -1401,43 +1441,6 @@
     hide elements
   </button>
   <div class="settingsGroup hideElements">
-    <div class="section" data-config-name="showLiveWpm">
-      <div class="groupTitle">
-        <i class="fas fa-tachometer-alt"></i>
-        <span>live speed</span>
-      </div>
-      <div class="text">
-        Displays a live speed during the test. Updates once every second.
-      </div>
-      <div class="buttons">
-        <button data-config-value="false">hide</button>
-        <button data-config-value="true">show</button>
-      </div>
-    </div>
-    <div class="section" data-config-name="showLiveAcc">
-      <div class="groupTitle">
-        <i class="fas fa-tachometer-alt"></i>
-        <span>live accuracy</span>
-      </div>
-      <div class="text">Displays live accuracy during the test.</div>
-      <div class="buttons">
-        <button data-config-value="false">hide</button>
-        <button data-config-value="true">show</button>
-      </div>
-    </div>
-    <div class="section" data-config-name="showLiveBurst">
-      <div class="groupTitle">
-        <i class="fas fa-tachometer-alt"></i>
-        <span>live burst</span>
-      </div>
-      <div class="text">
-        Displays live burst during the test of the last word you typed.
-      </div>
-      <div class="buttons">
-        <button data-config-value="false">hide</button>
-        <button data-config-value="true">show</button>
-      </div>
-    </div>
     <div class="section" data-config-name="showKeyTips">
       <div class="groupTitle">
         <i class="fas fa-question"></i>

frontend/src/html/pages/test.html

@@ -101,12 +101,12 @@
     <div id="memoryTimer">Time left to memorise all words: 0s</div>
     <div id="layoutfluidTimer">Time left to memorise all words: 0s</div>
     <div id="testModesNotice"></div>
-    <div id="timerNumber" class="timerMain">
-      <div>60</div>
+    <div id="liveStatsTextTop" class="timerMain">
+      <div class="timerProgress hidden">1:00</div>
     </div>
-    <div id="miniTimerAndLiveWpm" class="full-width timerMain">
+    <div id="liveStatsMini" class="full-width timerMain">
       <div class="time hidden">1:00</div>
-      <div class="wpm hidden">60</div>
+      <div class="speed hidden">60</div>
       <div class="acc hidden">100%</div>
       <div class="burst hidden">1</div>
     </div>
@@ -149,10 +149,10 @@
     >
       <i class="fas fa-fw fa-redo-alt"></i>
     </button>
-    <div id="largeLiveWpmAndAcc" class="timerMain">
-      <div id="liveWpm" class="hidden">123</div>
-      <div id="liveAcc" class="hidden">100%%</div>
-      <div id="liveBurst" class="hidden">1</div>
+    <div id="liveStatsTextBottom" class="timerMain">
+      <div class="liveSpeed hidden">123</div>
+      <div class="liveAcc hidden">100%%</div>
+      <div class="liveBurst hidden">1</div>
     </div>
     <div id="monkey" class="hidden">
       <div class="up"></div>

frontend/src/index.html

@@ -16,8 +16,8 @@
       </div>
       <div class="history"></div>
     </div>
-    <div id="timerWrapper">
-      <div id="timer" class="timerMain"></div>
+    <div id="barTimerProgress" class="timerMain">
+      <div class="bar" style="opacity: 0"></div>
     </div>
     <div id="popups">
       <load src="html/popups.html" />

frontend/src/styles/test.scss

@@ -65,13 +65,12 @@
   }
 }
 
-#timerWrapper {
+#barTimerProgress {
   opacity: 0;
-  transition: 0.25s;
   z-index: -1;
   position: relative;
   z-index: 99;
-  #timer {
+  .bar {
     position: fixed;
     top: 0;
     left: 0;
@@ -82,18 +81,17 @@
     /*   background: red; */
     // transition: 1s linear;
     z-index: -1;
+  }
+  &.timerMain .bar {
+    background: var(--main-color);
+  }
 
-    &.timerMain {
-      background: var(--main-color);
-    }
-
-    &.timerSub {
-      background: var(--sub-color);
-    }
+  &.timerSub .bar {
+    background: var(--sub-color);
+  }
 
-    &.timerText {
-      background: var(--text-color);
-    }
+  &.timerText .bar {
+    background: var(--text-color);
   }
 }
 
@@ -119,7 +117,7 @@
     }
   }
 
-  #timerNumber {
+  #liveStatsTextTop {
     pointer-events: none;
     transition: 0.25s;
     height: 0;
@@ -143,7 +141,7 @@
     transition: none;
   }
 
-  #largeLiveWpmAndAcc {
+  #liveStatsTextBottom {
     font-size: clamp(1rem, 12vw, 10rem);
     color: black;
     width: 100%;
@@ -160,44 +158,32 @@
     gap: clamp(1rem, 8vw, 5rem);
     width: 0;
     margin: 0 auto;
-
-    #liveWpm {
-      opacity: 0;
-    }
-
-    #liveAcc {
-      opacity: 0;
-    }
-
-    #liveBurst {
-      opacity: 0;
-    }
   }
 
-  #largeLiveWpmAndAcc.timerMain,
-  #timerNumber.timerMain {
+  #liveStatsTextBottom.timerMain,
+  #liveStatsTextTop.timerMain {
     color: var(--main-color);
   }
 
-  #timer.timerMain {
+  #barTimerProgress.timerMain .bar {
     background: var(--main-color);
   }
 
-  #largeLiveWpmAndAcc.timerSub,
-  #timerNumber.timerSub {
+  #liveStatsTextBottom.timerSub,
+  #liveStatsTextTop.timerSub {
     color: var(--sub-color);
   }
 
-  #timer.timerSub {
+  #barTimerProgress.timerSub .bar {
     background: var(--sub-color);
   }
 
-  #largeLiveWpmAndAcc.timerText,
-  #timerNumber.timerText {
+  #liveStatsTextBottom.timerText,
+  #liveStatsTextTop.timerText {
     color: var(--text-color);
   }
 
-  #timer.timerText {
+  #barTimerProgress.timerText .bar {
     background: var(--text-color);
   }
 }
@@ -1149,7 +1135,7 @@
       margin-right: 0.5rem;
     }
   }
-  #miniTimerAndLiveWpm {
+  #liveStatsMini {
     height: 0;
     margin-left: 0.25em;
     display: flex;
@@ -1161,17 +1147,14 @@
       line-height: 1em;
     }
 
-    .time {
-      margin-right: 2rem;
-    }
-
-    .wpm,
+    .time,
+    .speed,
     .acc {
-      margin-right: 2rem;
+      margin-right: 0.5em;
     }
 
     .time,
-    .wpm,
+    .speed,
     .acc,
     .burst {
       opacity: 0;

frontend/src/ts/commandline/lists.ts

@@ -9,9 +9,9 @@ import NumbersCommands from "./lists/numbers";
 import SmoothCaretCommands from "./lists/smooth-caret";
 import QuickRestartCommands from "./lists/quick-restart";
 import RepeatQuotesCommands from "./lists/repeat-quotes";
-import LiveWpmCommands from "./lists/live-wpm";
-import LiveAccCommands from "./lists/live-acc";
-import LiveBurstCommands from "./lists/live-burst";
+import LiveSpeedStyleCommands from "./lists/live-speed-style";
+import LiveAccStyleCommands from "./lists/live-acc-style";
+import LiveBurstStyleCommands from "./lists/live-burst-style";
 import ShowAverageCommands from "./lists/show-average";
 import KeyTipsCommands from "./lists/key-tips";
 import FreedomModeCommands from "./lists/freedom-mode";
@@ -275,6 +275,10 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
 
     //appearence
     ...TimerStyleCommands,
+    ...LiveSpeedStyleCommands,
+    ...LiveAccStyleCommands,
+    ...LiveBurstStyleCommands,
+
     ...TimerColorCommands,
     ...TimerOpacityCommands,
     ...HighlightModeCommands,
@@ -326,9 +330,6 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
     },
 
     //showhide elements
-    ...LiveWpmCommands,
-    ...LiveAccCommands,
-    ...LiveBurstCommands,
     ...KeyTipsCommands,
     ...OutOfFocusWarningCommands,
     ...CapsLockWarningCommands,