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

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/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 Numbers from "../utils/numbers";
 
 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 = Numbers.smooth(data.raw, 1);
 
   ChartController.miniResult.data.labels = labels;
 

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

@@ -1,4 +1,5 @@
 import * as Misc from "../utils/misc";
+import * as GetData from "../utils/get-data";
 import * as DB from "../db";
 import Config from "../config";
 import * as Notifications from "../elements/notifications";
@@ -637,7 +638,7 @@ $(".pageAccount .topFilters button.toggleAdvancedFilters").on("click", () => {
 export async function appendButtons(): Promise<void> {
   let languageList;
   try {
-    languageList = await Misc.getLanguageList();
+    languageList = await GetData.getLanguageList();
   } catch (e) {
     console.error(
       Misc.createErrorMessage(e, "Failed to append language buttons")
@@ -658,7 +659,7 @@ export async function appendButtons(): Promise<void> {
 
   let funboxList;
   try {
-    funboxList = await Misc.getFunboxList();
+    funboxList = await GetData.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 GetData from "../utils/get-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 = GetData.getLayoutsList();
 layoutsPromise
   .then((layouts) => {
     updateLayoutsCommands(layouts);
@@ -114,7 +115,7 @@ layoutsPromise
     );
   });
 
-const languagesPromise = Misc.getLanguageList();
+const languagesPromise = GetData.getLanguageList();
 languagesPromise
   .then((languages) => {
     updateLanguagesCommands(languages);
@@ -125,7 +126,7 @@ languagesPromise
     );
   });
 
-const funboxPromise = Misc.getFunboxList();
+const funboxPromise = GetData.getFunboxList();
 funboxPromise
   .then((funboxes) => {
     updateFunboxCommands(funboxes);
@@ -141,7 +142,7 @@ funboxPromise
     );
   });
 
-const fontsPromise = Misc.getFontsList();
+const fontsPromise = GetData.getFontsList();
 fontsPromise
   .then((fonts) => {
     updateFontFamilyCommands(fonts);
@@ -152,7 +153,7 @@ fontsPromise
     );
   });
 
-const themesPromise = Misc.getThemesList();
+const themesPromise = GetData.getThemesList();
 themesPromise
   .then((themes) => {
     updateThemesCommands(themes);
@@ -163,7 +164,7 @@ themesPromise
     );
   });
 
-const challengesPromise = Misc.getChallengeList();
+const challengesPromise = GetData.getChallengeList();
 challengesPromise
   .then((challenges) => {
     updateLoadChallengeCommands(challenges);

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/get-text";
 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/config-validation.ts

@@ -1,4 +1,5 @@
 import * as Misc from "./utils/misc";
+import * as GetData from "./utils/get-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 GetData.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) => GetData.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 GetData from "../utils/get-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([GetData.getLanguageList(), GetData.getFunboxList()])
     .then((values) => {
       const [languages, funboxes] = values;
       languages.forEach((language) => {

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

@@ -1,4 +1,5 @@
 import * as Misc from "../utils/misc";
+import * as GetData from "../utils/get-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 GetData.getChallengeList();
   } catch (e) {
     const message = Misc.createErrorMessage(e, "Failed to setup challenge");
     Notifications.add(message, -1);

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

@@ -64,6 +64,8 @@ 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 Numbers from "../utils/numbers";
+import { blendTwoHexColors } from "../utils/colors";
 
 class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -242,7 +244,7 @@ export const result = new ChartWithUpdateColors<
 
               const unique = [...new Set(wordsToHighlight)];
               const firstHighlightWordIndex = unique[0];
-              const lastHighlightWordIndex = unique[unique.length - 1];
+              const lastHighlightWordIndex = Misc.lastElementFromArray(unique);
               if (
                 firstHighlightWordIndex === undefined ||
                 lastHighlightWordIndex === undefined
@@ -496,9 +498,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
@@ -680,7 +682,7 @@ export const accountActivity = new ChartWithUpdateColors<
                     true
                   )}\nTests Completed: ${resultData.amount}`;
                 case 1:
-                  return `Average ${Config.typingSpeedUnit}: ${Misc.roundTo2(
+                  return `Average ${Config.typingSpeedUnit}: ${Numbers.roundTo2(
                     resultData.y
                   )}`;
                 default:
@@ -785,7 +787,7 @@ export const accountHistogram = new ChartWithUpdateColors<
           //       case 1:
           //         return `Average ${
           //           Config.typingSpeedUnit
-          //         }: ${Misc.roundTo2(resultData.y)}`;
+          //         }: ${Numbers.roundTo2(resultData.y)}`;
           //       default:
           //         return "";
           //     }
@@ -1113,7 +1115,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 +1184,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 GetData from "../utils/get-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 GetData.getLayout(Config.keymapLayout).catch(
         () => undefined
       );
       if (keymapLayout === undefined) {

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

@@ -1,9 +1,9 @@
 import {
-  cachedFetchJson,
   randomElementFromArray,
   removeLanguageSize,
   shuffle,
 } from "../utils/misc";
+import { cachedFetchJson } from "../utils/get-data";
 import { subscribe } from "../observables/config-event";
 import * as DB from "../db";
 

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

@@ -1,10 +1,7 @@
 import Config from "../config";
 import * as ConfigEvent from "../observables/config-event";
-import {
-  createErrorMessage,
-  randomElementFromArray,
-  randomIntFromRange,
-} from "../utils/misc";
+import { createErrorMessage, randomElementFromArray } from "../utils/misc";
+import { randomIntFromRange } from "../utils/numbers";
 import { leftState, rightState } from "../test/shift-tracker";
 import { capsState } from "../test/caps-warning";
 import * as Notifications from "../elements/notifications";

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

@@ -1,6 +1,8 @@
 import * as ThemeColors from "../elements/theme-colors";
 import * as ChartController from "./chart-controller";
 import * as Misc from "../utils/misc";
+import * as GetData from "../utils/get-data";
+import { isColorDark, isColorLight } from "../utils/colors";
 import Config, { setAutoSwitchTheme } from "../config";
 import * as BackgroundFilter from "../elements/custom-background-filter";
 import * as ConfigEvent from "../observables/config-event";
@@ -239,7 +241,7 @@ let themesList: string[] = [];
 async function changeThemeList(): Promise<void> {
   let themes;
   try {
-    themes = await Misc.getThemesList();
+    themes = await GetData.getThemesList();
   } catch (e) {
     console.error(
       Misc.createErrorMessage(e, "Failed to update random theme list")
@@ -251,11 +253,11 @@ async function changeThemeList(): Promise<void> {
     themesList = Config.favThemes;
   } else if (Config.randomTheme === "light") {
     themesList = themes
-      .filter((t) => Misc.isColorLight(t.bgColor))
+      .filter((t) => isColorLight(t.bgColor))
       .map((t) => t.name);
   } else if (Config.randomTheme === "dark") {
     themesList = themes
-      .filter((t) => Misc.isColorDark(t.bgColor))
+      .filter((t) => isColorDark(t.bgColor))
       .map((t) => t.name);
   } else if (Config.randomTheme === "on") {
     themesList = themes.map((t) => {

frontend/src/ts/db.ts

@@ -5,7 +5,8 @@ import DefaultConfig from "./constants/default-config";
 import { isAuthenticated } from "./firebase";
 import { defaultSnap } from "./constants/default-snapshot";
 import * as ConnectionState from "./states/connection";
-import { getFunboxList, lastElementFromArray } from "./utils/misc";
+import { lastElementFromArray } from "./utils/misc";
+import { getFunboxList } from "./utils/get-data";
 import { mergeWithDefaultConfig } from "./utils/config";
 
 let dbSnapshot: MonkeyTypes.Snapshot | undefined;