refactor(utils): distribute color, numbers, strings and other group of functions into separate util files from misc.ts (sanidhyas3s)

frontend/__tests__/test/misc.spec.ts

@@ -1,7 +1,7 @@
 import {
   getLanguageDisplayString,
   removeLanguageSize,
-} from "../../src/ts/utils/misc";
+} from "../../src/ts/utils/strings";
 
 describe("misc.ts", () => {
   describe("getLanguageDisplayString", () => {

frontend/src/html/pages/about.html

@@ -80,7 +80,7 @@ <h2>
       You can use
       <key>tab</key>
       and
-      <key>enter</key> 
+      <key>enter</key>
       (or just
       <key>tab</key>
       if you have quick tab mode enabled) to restart the typing test. Open the

frontend/src/ts/account/all-time-stats.ts

@@ -1,5 +1,5 @@
 import * as DB from "../db";
-import * as Misc from "../utils/misc";
+import * as DateTime from "../utils/date-and-time";
 
 export function clear(): void {
   $(".pageAccount .globalTimeTyping .val").text(`-`);
@@ -19,7 +19,7 @@ export function update(): void {
     if (seconds === 0) {
       string = "-";
     } else {
-      string = Misc.secondsToString(Math.round(seconds), true, true);
+      string = DateTime.secondsToString(Math.round(seconds), true, true);
     }
     $(".pageAccount .globalTimeTyping .val").text(string);
   }

frontend/src/ts/account/mini-result-chart.ts

@@ -1,6 +1,7 @@
 import * as ChartController from "../controllers/chart-controller";
 import Config from "../config";
 import * as Misc from "../utils/misc";
+import * as Arrays from "../utils/arrays";
 
 export function updatePosition(x: number, y: number): void {
   $(".pageAccount .miniResultChartWrapper").css({ top: y, left: x });
@@ -28,7 +29,7 @@ export function updateData(data: SharedTypes.ChartData): void {
   data.err = data.err.slice(0, data.raw.length);
   labels = labels.slice(0, data.raw.length);
 
-  const smoothedRawData = Misc.smooth(data.raw, 1);
+  const smoothedRawData = Arrays.smooth(data.raw, 1);
 
   ChartController.miniResult.data.labels = labels;
 

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

@@ -1,4 +1,6 @@
 import * as Misc from "../utils/misc";
+import * as Strings from "../utils/strings";
+import * as JSONData from "../utils/json-data";
 import * as DB from "../db";
 import Config from "../config";
 import * as Notifications from "../elements/notifications";
@@ -637,7 +639,7 @@ $(".pageAccount .topFilters button.toggleAdvancedFilters").on("click", () => {
 export async function appendButtons(): Promise<void> {
   let languageList;
   try {
-    languageList = await Misc.getLanguageList();
+    languageList = await JSONData.getLanguageList();
   } catch (e) {
     console.error(
       Misc.createErrorMessage(e, "Failed to append language buttons")
@@ -646,7 +648,7 @@ export async function appendButtons(): Promise<void> {
   if (languageList) {
     let html = "";
     for (const language of languageList) {
-      html += `<button filter="${language}">${Misc.getLanguageDisplayString(
+      html += `<button filter="${language}">${Strings.getLanguageDisplayString(
         language
       )}</button>`;
     }
@@ -658,7 +660,7 @@ export async function appendButtons(): Promise<void> {
 
   let funboxList;
   try {
-    funboxList = await Misc.getFunboxList();
+    funboxList = await JSONData.getFunboxList();
   } catch (e) {
     console.error(
       Misc.createErrorMessage(e, "Failed to append funbox buttons")

frontend/src/ts/commandline/lists.ts

@@ -92,6 +92,7 @@ import KeymapLayoutsCommands, {
 
 import Config, * as UpdateConfig from "../config";
 import * as Misc from "../utils/misc";
+import * as JSONData from "../utils/json-data";
 import { randomizeTheme } from "../controllers/theme-controller";
 import * as CustomTextPopup from "../popups/custom-text-popup";
 import * as Settings from "../pages/settings";
@@ -102,7 +103,7 @@ import * as TestStats from "../test/test-stats";
 import * as QuoteSearchModal from "../modals/quote-search";
 import * as FPSCounter from "../elements/fps-counter";
 
-const layoutsPromise = Misc.getLayoutsList();
+const layoutsPromise = JSONData.getLayoutsList();
 layoutsPromise
   .then((layouts) => {
     updateLayoutsCommands(layouts);
@@ -114,7 +115,7 @@ layoutsPromise
     );
   });
 
-const languagesPromise = Misc.getLanguageList();
+const languagesPromise = JSONData.getLanguageList();
 languagesPromise
   .then((languages) => {
     updateLanguagesCommands(languages);
@@ -125,7 +126,7 @@ languagesPromise
     );
   });
 
-const funboxPromise = Misc.getFunboxList();
+const funboxPromise = JSONData.getFunboxList();
 funboxPromise
   .then((funboxes) => {
     updateFunboxCommands(funboxes);
@@ -141,7 +142,7 @@ funboxPromise
     );
   });
 
-const fontsPromise = Misc.getFontsList();
+const fontsPromise = JSONData.getFontsList();
 fontsPromise
   .then((fonts) => {
     updateFontFamilyCommands(fonts);
@@ -152,7 +153,7 @@ fontsPromise
     );
   });
 
-const themesPromise = Misc.getThemesList();
+const themesPromise = JSONData.getThemesList();
 themesPromise
   .then((themes) => {
     updateThemesCommands(themes);
@@ -163,7 +164,7 @@ themesPromise
     );
   });
 
-const challengesPromise = Misc.getChallengeList();
+const challengesPromise = JSONData.getChallengeList();
 challengesPromise
   .then((challenges) => {
     updateLoadChallengeCommands(challenges);

frontend/src/ts/commandline/lists/keymap-layouts.ts

@@ -1,6 +1,6 @@
 import * as UpdateConfig from "../../config";
 import * as TestLogic from "../../test/test-logic";
-import { capitalizeFirstLetterOfEachWord } from "../../utils/misc";
+import { capitalizeFirstLetterOfEachWord } from "../../utils/strings";
 
 const subgroup: MonkeyTypes.CommandsSubgroup = {
   title: "Change keymap layout...",

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

@@ -2,7 +2,7 @@ import * as UpdateConfig from "../../config";
 import {
   capitalizeFirstLetterOfEachWord,
   getLanguageDisplayString,
-} from "../../utils/misc";
+} from "../../utils/strings";
 
 const subgroup: MonkeyTypes.CommandsSubgroup = {
   title: "Language...",

frontend/src/ts/commandline/lists/layouts.ts

@@ -1,6 +1,6 @@
 import * as UpdateConfig from "../../config";
 import * as TestLogic from "../../test/test-logic";
-import { capitalizeFirstLetterOfEachWord } from "../../utils/misc";
+import { capitalizeFirstLetterOfEachWord } from "../../utils/strings";
 
 const subgroup: MonkeyTypes.CommandsSubgroup = {
   title: "Layout emulator...",

frontend/src/ts/commandline/lists/load-challenge.ts

@@ -1,7 +1,7 @@
 import { navigate } from "../../controllers/route-controller";
 import * as ChallengeController from "../../controllers/challenge-controller";
 import * as TestLogic from "../../test/test-logic";
-import { capitalizeFirstLetterOfEachWord } from "../../utils/misc";
+import { capitalizeFirstLetterOfEachWord } from "../../utils/strings";
 
 const subgroup: MonkeyTypes.CommandsSubgroup = {
   title: "Load challenge...",

frontend/src/ts/commandline/lists/result-screen.ts

@@ -1,7 +1,7 @@
 import * as TestLogic from "../../test/test-logic";
 import * as TestUI from "../../test/test-ui";
 import * as PractiseWords from "../../test/practise-words";
-import * as Misc from "../../utils/misc";
+import * as GetText from "../../utils/generate";
 import * as Notifications from "../../elements/notifications";
 
 const copyWords: MonkeyTypes.CommandsSubgroup = {
@@ -15,7 +15,7 @@ const copyWords: MonkeyTypes.CommandsSubgroup = {
       id: "copyYes",
       display: "Yes, I am sure",
       exec: (): void => {
-        const words = Misc.getWords();
+        const words = GetText.getWords();
 
         navigator.clipboard.writeText(words).then(
           () => {

frontend/src/ts/commandline/lists/themes.ts

@@ -1,5 +1,5 @@
 import Config, * as UpdateConfig from "../../config";
-import { capitalizeFirstLetterOfEachWord } from "../../utils/misc";
+import { capitalizeFirstLetterOfEachWord } from "../../utils/strings";
 import * as ThemeController from "../../controllers/theme-controller";
 
 const subgroup: MonkeyTypes.CommandsSubgroup = {

frontend/src/ts/config-validation.ts

@@ -1,4 +1,5 @@
 import * as Misc from "./utils/misc";
+import * as JSONData from "./utils/json-data";
 import * as Notifications from "./elements/notifications";
 
 type PossibleType =
@@ -121,7 +122,7 @@ export async function isConfigValueValidAsync(
         if (layoutNames.length < 2 || layoutNames.length > 5) break;
 
         try {
-          await Misc.getLayoutsList();
+          await JSONData.getLayoutsList();
         } catch (e) {
           customMessage = Misc.createErrorMessage(
             e,
@@ -132,7 +133,7 @@ export async function isConfigValueValidAsync(
 
         // convert the layout names to layouts
         const layouts = await Promise.all(
-          layoutNames.map(async (layoutName) => Misc.getLayout(layoutName))
+          layoutNames.map(async (layoutName) => JSONData.getLayout(layoutName))
         );
 
         // check if all layouts exist

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

@@ -3,6 +3,7 @@ import * as Notifications from "../elements/notifications";
 import Config, * as UpdateConfig from "../config";
 import * as AccountButton from "../elements/account-button";
 import * as Misc from "../utils/misc";
+import * as JSONData from "../utils/json-data";
 import * as Settings from "../pages/settings";
 import * as AllTimeStats from "../account/all-time-stats";
 import * as DB from "../db";
@@ -125,7 +126,7 @@ async function getDataAndInit(): Promise<boolean> {
 
   ResultFilters.loadTags(snapshot.tags);
 
-  Promise.all([Misc.getLanguageList(), Misc.getFunboxList()])
+  Promise.all([JSONData.getLanguageList(), JSONData.getFunboxList()])
     .then((values) => {
       const [languages, funboxes] = values;
       languages.forEach((language) => {

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

@@ -1,5 +1,5 @@
 import { debounce } from "throttle-debounce";
-import * as Misc from "../utils/misc";
+import * as Numbers from "../utils/numbers";
 import * as ConfigEvent from "../observables/config-event";
 import * as BannerEvent from "../observables/banner-event";
 import Config from "../config";
@@ -90,7 +90,7 @@ function removeResult(): void {
 
 function updateVerticalMargin(): void {
   const height = $("#bannerCenter").height() as number;
-  const margin = height + Misc.convertRemToPixels(2) + "px";
+  const margin = height + Numbers.convertRemToPixels(2) + "px";
   $("#ad-vertical-left-wrapper").css("margin-top", margin);
   $("#ad-vertical-right-wrapper").css("margin-top", margin);
 }

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

@@ -1,4 +1,5 @@
 import * as Misc from "../utils/misc";
+import * as JSONData from "../utils/json-data";
 import * as Notifications from "../elements/notifications";
 import * as ManualRestart from "../test/manual-restart-tracker";
 import * as CustomText from "../test/custom-text";
@@ -209,7 +210,7 @@ export async function setup(challengeName: string): Promise<boolean> {
 
   let list;
   try {
-    list = await Misc.getChallengeList();
+    list = await JSONData.getChallengeList();
   } catch (e) {
     const message = Misc.createErrorMessage(e, "Failed to setup challenge");
     Notifications.add(message, -1);

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

@@ -63,7 +63,10 @@ import Config from "../config";
 import * as ThemeColors from "../elements/theme-colors";
 import * as ConfigEvent from "../observables/config-event";
 import * as TestInput from "../test/test-input";
-import * as Misc from "../utils/misc";
+import * as DateTime from "../utils/date-and-time";
+import * as Arrays from "../utils/arrays";
+import * as Numbers from "../utils/numbers";
+import { blendTwoHexColors } from "../utils/colors";
 
 class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -242,7 +245,8 @@ export const result = new ChartWithUpdateColors<
 
               const unique = [...new Set(wordsToHighlight)];
               const firstHighlightWordIndex = unique[0];
-              const lastHighlightWordIndex = unique[unique.length - 1];
+              const lastHighlightWordIndex =
+                Arrays.lastElementFromArray(unique);
               if (
                 firstHighlightWordIndex === undefined ||
                 lastHighlightWordIndex === undefined
@@ -496,9 +500,9 @@ export const accountHistory = new ChartWithUpdateColors<
                 const resultData = tooltipItem.dataset.data[
                   tooltipItem.dataIndex
                 ] as MonkeyTypes.AccChartData;
-                return `error rate: ${Misc.roundTo2(
+                return `error rate: ${Numbers.roundTo2(
                   resultData.errorRate
-                )}%\nacc: ${Misc.roundTo2(100 - resultData.errorRate)}%`;
+                )}%\nacc: ${Numbers.roundTo2(100 - resultData.errorRate)}%`;
               }
               const resultData = tooltipItem.dataset.data[
                 tooltipItem.dataIndex
@@ -674,13 +678,13 @@ export const accountActivity = new ChartWithUpdateColors<
               ] as MonkeyTypes.ActivityChartDataPoint;
               switch (tooltipItem.datasetIndex) {
                 case 0:
-                  return `Time Typing: ${Misc.secondsToString(
+                  return `Time Typing: ${DateTime.secondsToString(
                     Math.round(resultData.y * 60),
                     true,
                     true
                   )}\nTests Completed: ${resultData.amount}`;
                 case 1:
-                  return `Average ${Config.typingSpeedUnit}: ${Misc.roundTo2(
+                  return `Average ${Config.typingSpeedUnit}: ${Numbers.roundTo2(
                     resultData.y
                   )}`;
                 default:
@@ -777,15 +781,15 @@ export const accountHistogram = new ChartWithUpdateColors<
           //     ] as MonkeyTypes.ActivityChartDataPoint;
           //     switch (tooltipItem.datasetIndex) {
           //       case 0:
-          //         return `Time Typing: ${Misc.secondsToString(
+          //         return `Time Typing: ${DateTime.secondsToString(
           //           Math.round(resultData.y),
           //           true,
           //           true
           //         )}\nTests Completed: ${resultData.amount}`;
           //       case 1:
           //         return `Average ${
           //           Config.typingSpeedUnit
-          //         }: ${Misc.roundTo2(resultData.y)}`;
+          //         }: ${Numbers.roundTo2(resultData.y)}`;
           //       default:
           //         return "";
           //     }
@@ -1113,7 +1117,7 @@ async function updateColors<
   const errorcolor = await ThemeColors.get("error");
   const textcolor = await ThemeColors.get("text");
 
-  const gridcolor = Misc.blendTwoHexColors(bgcolor, subaltcolor, 0.75);
+  const gridcolor = blendTwoHexColors(bgcolor, subaltcolor, 0.75);
 
   //@ts-expect-error
   chart.data.datasets[0].borderColor = (ctx): string => {
@@ -1182,12 +1186,12 @@ async function updateColors<
     const avg10On = Config.accountChart[2] === "on";
     const avg100On = Config.accountChart[3] === "on";
 
-    const text02 = Misc.blendTwoHexColors(bgcolor, textcolor, 0.2);
-    const main02 = Misc.blendTwoHexColors(bgcolor, maincolor, 0.2);
-    const main04 = Misc.blendTwoHexColors(bgcolor, maincolor, 0.4);
+    const text02 = blendTwoHexColors(bgcolor, textcolor, 0.2);
+    const main02 = blendTwoHexColors(bgcolor, maincolor, 0.2);
+    const main04 = blendTwoHexColors(bgcolor, maincolor, 0.4);
 
-    const sub02 = Misc.blendTwoHexColors(bgcolor, subcolor, 0.2);
-    const sub04 = Misc.blendTwoHexColors(bgcolor, subcolor, 0.4);
+    const sub02 = blendTwoHexColors(bgcolor, subcolor, 0.2);
+    const sub04 = blendTwoHexColors(bgcolor, subcolor, 0.4);
 
     const [
       wpmDataset,

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

@@ -4,6 +4,8 @@ import * as TestStats from "../test/test-stats";
 import * as Monkey from "../test/monkey";
 import Config from "../config";
 import * as Misc from "../utils/misc";
+import * as JSONData from "../utils/json-data";
+import * as Numbers from "../utils/numbers";
 import * as LiveAcc from "../test/live-acc";
 import * as LiveBurst from "../test/live-burst";
 import * as Funbox from "../test/funbox/funbox";
@@ -53,7 +55,7 @@ function setWordsInput(value: string): void {
 }
 
 function updateUI(): void {
-  const acc: number = Misc.roundTo2(TestStats.calculateAccuracy());
+  const acc: number = Numbers.roundTo2(TestStats.calculateAccuracy());
   if (!isNaN(acc)) LiveAcc.update(acc);
 
   if (Config.keymapMode === "next" && Config.mode !== "zen") {
@@ -1115,7 +1117,7 @@ $(document).on("keydown", async (event) => {
       Config.oppositeShiftMode === "keymap" &&
       Config.keymapLayout !== "overrideSync"
     ) {
-      const keymapLayout = await Misc.getLayout(Config.keymapLayout).catch(
+      const keymapLayout = await JSONData.getLayout(Config.keymapLayout).catch(
         () => undefined
       );
       if (keymapLayout === undefined) {