added "show average" setting (#2551) by octahedronv2

* added "show average" setting

hopefully this doesn't break everything :)

* Delete config-schema.js

* Delete commandline-lists.ts

* Delete config.ts

* Delete db.ts

* Delete index.html

* Delete modes-notice.ts

* Delete settings.ts

* Delete types.d.ts

* added show average setting

* changed the capitalization of ONE character

* Rounded the wpm calculation when mode is PB or AVG

* Only display average if user is logged in

* Only display average if wpm > 0

and by extension, only when the user is logged in.

* changed look of average display

Co-authored-by: Jack <jack@monkeytype.com>

backend/api/schemas/config-schema.js

@@ -104,6 +104,7 @@ const CONFIG_SCHEMA = joi.object({
   burstHeatmap: joi.boolean(),
   britishEnglish: joi.boolean(),
   lazyMode: joi.boolean(),
+  showAvg: joi.boolean(),
 });
 
 module.exports = CONFIG_SCHEMA;

frontend/src/scripts/config.ts

@@ -118,6 +118,7 @@ const defaultConfig: MonkeyTypes.Config = {
   burstHeatmap: false,
   britishEnglish: false,
   lazyMode: false,
+  showAvg: false,
 };
 
 function isConfigKeyValid(name: string): boolean {
@@ -916,6 +917,18 @@ export function setShowLiveBurst(live: boolean, nosave?: boolean): void {
   ConfigEvent.dispatch("showLiveBurst", config.showLiveBurst);
 }
 
+export function setShowAvg(live: boolean, nosave?: boolean): void {
+  if (!isConfigValueValid(live, ["boolean"]))
+    return invalid("show average", live);
+
+  if (live == null || live == undefined) {
+    live = false;
+  }
+  config.showAvg = live;
+  if (!nosave) saveToLocalStorage();
+  ConfigEvent.dispatch("showAvg", config.showAvg);
+}
+
 export function setHighlightMode(
   mode: MonkeyTypes.HighlightMode,
   nosave?: boolean
@@ -1816,6 +1829,7 @@ export function apply(configObj: MonkeyTypes.Config | null | "null"): void {
     setBurstHeatmap(configObj.burstHeatmap, true);
     setBritishEnglish(configObj.britishEnglish, true);
     setLazyMode(configObj.lazyMode, true);
+    setShowAvg(configObj.showAvg, true);
 
     try {
       setEnableAds(configObj.enableAds, true);

frontend/src/scripts/db.ts

@@ -313,11 +313,11 @@ export async function getUserAverageWpm10<M extends MonkeyTypes.Mode>(
 
     // Return the last 10 average wpm for quote if the current quote id has never been completed before by the user.
     if (count == 0 && mode == "quote") {
-      return Math.round(last10Wpm / last10Count);
+      return last10Wpm / last10Count;
     }
 
     // Return the average wpm of the last 10 completions for the targeted test mode.
-    return Math.round(wpmSum / count);
+    return wpmSum / count;
   }
 
   const retval =

frontend/src/scripts/elements/commandline-lists.ts

@@ -358,6 +358,29 @@ const commandsLiveWpm: MonkeyTypes.CommandsGroup = {
   ],
 };
 
+const commandsShowAvg: MonkeyTypes.CommandsGroup = {
+  title: "Show average...",
+  configKey: "showAvg",
+  list: [
+    {
+      id: "setAvgOff",
+      display: "off",
+      configValue: false,
+      exec: (): void => {
+        UpdateConfig.setShowAvg(false);
+      },
+    },
+    {
+      id: "setAvgOn",
+      display: "on",
+      configValue: true,
+      exec: (): void => {
+        UpdateConfig.setShowAvg(true);
+      },
+    },
+  ],
+};
+
 const commandsLiveAcc: MonkeyTypes.CommandsGroup = {
   title: "Live accuracy...",
   configKey: "showLiveAcc",
@@ -2570,6 +2593,12 @@ export const defaultCommands: MonkeyTypes.CommandsGroup = {
       icon: "fa-percentage",
       subgroup: commandsLiveAcc,
     },
+    {
+      id: "changeShowAvg",
+      display: "Show average...",
+      icon: "fa-tachometer-alt",
+      subgroup: commandsShowAvg,
+    },
     {
       id: "changeLiveBurst",
       display: "Live burst...",

frontend/src/scripts/elements/modes-notice.ts

@@ -1,6 +1,7 @@
 import * as PaceCaret from "../test/pace-caret";
 import * as TestState from "../test/test-state";
 import * as DB from "../db";
+import * as Misc from "../misc";
 import Config from "../config";
 import * as TestWords from "../test/test-words";
 import * as ConfigEvent from "../observables/config-event";
@@ -17,13 +18,14 @@ ConfigEvent.subscribe((eventKey) => {
       "minBurst",
       "confidenceMode",
       "layout",
+      "showAvg",
     ].includes(eventKey)
   ) {
     update();
   }
 });
 
-export function update(): void {
+export async function update(): Promise<void> {
   let anim = false;
   if ($(".pageTest #testModesNotice").text() === "") anim = true;
 
@@ -104,6 +106,25 @@ export function update(): void {
     );
   }
 
+  if (Config.showAvg) {
+    const mode2 = Misc.getMode2(Config, TestWords.randomQuote);
+    let wpm = await DB.getUserAverageWpm10(
+      Config.mode,
+      mode2 as never,
+      Config.punctuation,
+      Config.language,
+      Config.difficulty,
+      Config.lazyMode
+    );
+    wpm = Math.round(wpm * 100) / 100;
+    if (!Config.alwaysShowDecimalPlaces) wpm = Math.round(wpm);
+    if (wpm > 0) {
+      $(".pageTest #testModesNotice").append(
+        `<div class="text-button" commands="commandsShowAvg"><i class="fas fa-tachometer-alt"></i>avg: ${wpm}wpm</div>`
+      );
+    }
+  }
+
   if (Config.minWpm !== "off") {
     $(".pageTest #testModesNotice").append(
       `<div class="text-button" commands="commandsMinWpm"><i class="fas fa-bomb"></i>min ${Config.minWpmCustomSpeed} wpm</div>`

frontend/src/scripts/pages/settings.ts

@@ -60,6 +60,11 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setShowTimerProgress,
     "button"
   );
+  groups["showAvg"] = new SettingsGroup(
+    "showAvg",
+    UpdateConfig.setShowAvg,
+    "button"
+  );
   groups["keymapMode"] = new SettingsGroup(
     "keymapMode",
     UpdateConfig.setKeymapMode,

frontend/src/scripts/test/pace-caret.js

@@ -59,6 +59,7 @@ export async function init() {
       Config.difficulty,
       Config.lazyMode
     );
+    wpm = Math.round(wpm);
   } else if (Config.paceCaret === "custom") {
     wpm = Config.paceCaretCustomSpeed;
   } else if (TestState.isPaceRepeat == true) {

frontend/src/scripts/types/types.d.ts

@@ -313,6 +313,7 @@ declare namespace MonkeyTypes {
     burstHeatmap: boolean;
     britishEnglish: boolean;
     lazyMode: boolean;
+    showAvg: boolean;
   }
 
   interface DefaultConfig extends Config {

frontend/static/index.html

@@ -3941,6 +3941,30 @@
                   </div>
                 </div>
               </div>
+              <div class="section showAvg">
+                <h1>average</h1>
+                <div class="text">
+                  Displays your average speed over the last 10 tests.
+                </div>
+                <div class="buttons">
+                  <div
+                    class="button"
+                    showAvg="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    hide
+                  </div>
+                  <div
+                    class="button"
+                    showAvg="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    show
+                  </div>
+                </div>
+              </div>
               <div class="section showKeyTips">
                 <h1>key tips</h1>
                 <div class="text">