refactor: add util functions for handling language strings

frontend/src/ts/account/result-filters.ts

@@ -652,9 +652,8 @@ export async function appendButtons(): Promise<void> {
   if (languageList) {
     let html = "";
     for (const language of languageList) {
-      html += `<button filter="${language}">${language.replace(
-        "_",
-        " "
+      html += `<button filter="${language}">${Misc.getLanguageDisplayString(
+        language
       )}</button>`;
     }
     const el = document.querySelector(

frontend/src/ts/commandline/lists/languages.ts

@@ -1,5 +1,8 @@
 import * as UpdateConfig from "../../config";
-import { capitalizeFirstLetterOfEachWord } from "../../utils/misc";
+import {
+  capitalizeFirstLetterOfEachWord,
+  getLanguageDisplayString,
+} from "../../utils/misc";
 
 const subgroup: MonkeyTypes.CommandsSubgroup = {
   title: "Language...",
@@ -26,7 +29,7 @@ function update(languages: string[]): void {
   languages.forEach((language) => {
     subgroup.list.push({
       id: "changeLanguage" + capitalizeFirstLetterOfEachWord(language),
-      display: language.replace(/_/g, " "),
+      display: getLanguageDisplayString(language),
       configValue: language,
       exec: (): void => {
         UpdateConfig.setLanguage(language);

frontend/src/ts/controllers/quotes-controller.ts

@@ -1,4 +1,8 @@
-import { randomElementFromArray, shuffle } from "../utils/misc";
+import {
+  randomElementFromArray,
+  removeLanguageSize,
+  shuffle,
+} from "../utils/misc";
 import { subscribe } from "../observables/config-event";
 import * as DB from "../db";
 
@@ -30,10 +34,6 @@ const defaultQuoteCollection: QuoteCollection = {
   groups: [],
 };
 
-function normalizeLanguage(language: string): string {
-  return language.replace(/_\d*k$/g, "");
-}
-
 class QuotesController {
   private quoteCollection: QuoteCollection = defaultQuoteCollection;
 
@@ -44,7 +44,7 @@ class QuotesController {
     language: string,
     quoteLengths?: number[]
   ): Promise<QuoteCollection> {
-    const normalizedLanguage = normalizeLanguage(language);
+    const normalizedLanguage = removeLanguageSize(language);
 
     if (this.quoteCollection.language !== normalizedLanguage) {
       try {
@@ -160,12 +160,12 @@ class QuotesController {
       return null;
     }
 
-    const normalizedLanguage = normalizeLanguage(language);
+    const normalizedLanguage = removeLanguageSize(language);
     const quoteIds: string[] = [];
     const { favoriteQuotes } = snapshot;
 
     Object.keys(favoriteQuotes).forEach((language) => {
-      if (normalizeLanguage(language) !== normalizedLanguage) {
+      if (removeLanguageSize(language) !== normalizedLanguage) {
         return;
       }
 
@@ -190,10 +190,10 @@ class QuotesController {
 
     const { favoriteQuotes } = snapshot;
 
-    const normalizedQuoteLanguage = normalizeLanguage(quoteLanguage);
+    const normalizedQuoteLanguage = removeLanguageSize(quoteLanguage);
 
     const matchedLanguage = Object.keys(favoriteQuotes).find((language) => {
-      if (normalizedQuoteLanguage !== normalizeLanguage(language)) {
+      if (normalizedQuoteLanguage !== removeLanguageSize(language)) {
         return false;
       }
       return (favoriteQuotes[language] ?? []).includes(id.toString());

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

@@ -8,7 +8,7 @@ import * as ConfigEvent from "../observables/config-event";
 import { Auth } from "../firebase";
 import * as CustomTextState from "../states/custom-text-name";
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
-import { roundTo2 } from "../utils/misc";
+import { getLanguageDisplayString, roundTo2 } from "../utils/misc";
 
 ConfigEvent.subscribe((eventKey) => {
   if (
@@ -84,16 +84,10 @@ export async function update(): Promise<void> {
   }
 
   if (Config.mode !== "zen") {
-    let language = Config.language;
-
-    if (Config.mode === "quote") {
-      language = language.split(/_\d+k$/)[0] as string;
-    }
-
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="languages"><i class="fas fa-globe-americas"></i>${language.replace(
-        /_/g,
-        " "
+      `<div class="textButton" commands="languages"><i class="fas fa-globe-americas"></i>${getLanguageDisplayString(
+        Config.language,
+        Config.mode === "quote"
       )}</div>`
     );
   }

frontend/src/ts/pages/settings.ts

@@ -439,7 +439,7 @@ async function fillSettingsPage(): Promise<void> {
       let langComboBox = `<optgroup label="${group.name}">`;
       group.languages.forEach((language: string) => {
         langComboBox += `<option value="${language}">
-        ${language.replace(/_/g, " ")}
+        ${Misc.getLanguageDisplayString(language)}
       </option>`;
       });
       langComboBox += `</optgroup>`;

frontend/src/ts/popups/pb-tables-popup.ts

@@ -1,7 +1,7 @@
 import * as DB from "../db";
 import format from "date-fns/format";
 import * as Skeleton from "./skeleton";
-import { isPopupVisible } from "../utils/misc";
+import { getLanguageDisplayString, isPopupVisible } from "../utils/misc";
 
 interface PersonalBest extends SharedTypes.PersonalBest {
   mode2: SharedTypes.Mode2<SharedTypes.Mode>;
@@ -68,7 +68,7 @@ function update(mode: SharedTypes.Mode): void {
           }</span>
         </td>
         <td>${pb.difficulty}</td>
-        <td>${pb.language ? pb.language.replace(/_/g, " ") : "-"}</td>
+        <td>${pb.language ? getLanguageDisplayString(pb.language) : "-"}</td>
         <td>${pb.punctuation ? '<i class="fas fa-check"></i>' : ""}</td>
         <td>${pb.lazyMode ? '<i class="fas fa-check"></i>' : ""}</td>
         <td>${dateText}</td>

frontend/src/ts/test/test-logic.ts

@@ -802,7 +802,7 @@ function buildCompletedEvent(
   const afkDuration = TestStats.calculateAfkSeconds(duration);
   let language = Config.language;
   if (Config.mode === "quote") {
-    language = Config.language.replace(/_\d*k$/g, "");
+    language = Misc.removeLanguageSize(Config.language);
   }
 
   const quoteLength = TestWords.randomQuote?.group ?? -1;

frontend/src/ts/test/test-ui.ts

@@ -27,7 +27,7 @@ const debouncedZipfCheck = debounce(250, () => {
     if (supports === "no") {
       Notifications.add(
         `${Misc.capitalizeFirstLetter(
-          Config.language.replace(/_/g, " ")
+          Misc.getLanguageDisplayString(Config.language)
         )} does not support Zipf funbox, because the list is not ordered by frequency. Please try another word list.`,
         0,
         {
@@ -38,7 +38,7 @@ const debouncedZipfCheck = debounce(250, () => {
     if (supports === "unknown") {
       Notifications.add(
         `${Misc.capitalizeFirstLetter(
-          Config.language.replace(/_/g, " ")
+          Misc.getLanguageDisplayString(Config.language)
         )} may not support Zipf funbox, because we don't know if it's ordered by frequency or not. If you would like to add this label, please contact us.`,
         0,
         {
@@ -789,7 +789,9 @@ export function updatePremid(): void {
     fbtext = " " + Config.funbox.split("#").join(" ");
   }
   $(".pageTest #premidTestMode").text(
-    `${Config.mode} ${mode2} ${Config.language.replace(/_/g, " ")}${fbtext}`
+    `${Config.mode} ${mode2} ${Misc.getLanguageDisplayString(
+      Config.language
+    )}${fbtext}`
   );
   $(".pageTest #premidSecondsLeft").text(Config.time);
 }

frontend/src/ts/test/words-generator.ts

@@ -595,7 +595,7 @@ async function generateQuoteWords(
     rq = randomQuote;
   }
 
-  rq.language = Config.language.replace(/_\d*k$/g, "");
+  rq.language = Misc.removeLanguageSize(Config.language);
   rq.text = rq.text.replace(/ +/gm, " ");
   rq.text = rq.text.replace(/( *(\r\n|\r|\n) *)/g, "\n ");
   rq.text = rq.text.replace(/…/g, "...");

frontend/src/ts/utils/misc.ts

@@ -1753,4 +1753,21 @@ export function lastElementFromArray<T>(array: T[]): T | undefined {
   return array[array.length - 1];
 }
 
+export function getLanguageDisplayString(
+  language: string,
+  noSizeString = false
+): string {
+  let out = "";
+  if (noSizeString) {
+    out = removeLanguageSize(language);
+  } else {
+    out = language;
+  }
+  return out.replace(/_/g, " ");
+}
+
+export function removeLanguageSize(language: string): string {
+  return language.replace(/_\d*k$/g, "");
+}
+
 // DO NOT ALTER GLOBAL OBJECTSONSTRUCTOR, IT WILL BREAK RESULT HASHES