impr(settings): settings group performance (@fehmer, @Miodec) (monkeytypegame#6509)

Co-authored-by: Miodec <[email protected]>

Author: fehmer

frontend/src/ts/elements/settings/settings-group.ts

@@ -13,6 +13,8 @@ export default class SettingsGroup<T extends ConfigValue> {
   public mode: Mode;
   public setCallback?: () => void;
   public updateCallback?: () => void;
+  private elements: Element[];
+
   constructor(
     configName: string,
     configFunction: (param: T, nosave?: boolean) => boolean,
@@ -27,32 +29,48 @@ export default class SettingsGroup<T extends ConfigValue> {
     this.setCallback = setCallback;
     this.updateCallback = updateCallback;
 
-    this.updateUI();
-
     if (this.mode === "select") {
-      const selectElement = document.querySelector(
+      const el = document.querySelector(
         `.pageSettings .section[data-config-name=${this.configName}] select`
       );
-      selectElement?.addEventListener("change", (e) => {
+
+      if (el === null) {
+        throw new Error(`Failed to find select element for ${configName}`);
+      }
+
+      if (el.hasAttribute("multiple")) {
+        throw new Error(
+          "multi-select dropdowns not supported. Config: " + this.configName
+        );
+      }
+
+      el.addEventListener("change", (e) => {
         const target = $(e.target as HTMLSelectElement);
         if (target.hasClass("disabled") || target.hasClass("no-auto-handle")) {
           return;
         }
+
         this.setValue(target.val() as T);
       });
+
+      this.elements = [el];
     } else if (this.mode === "button") {
-      $(".pageSettings").on(
-        "click",
-        `.section[data-config-name='${this.configName}'] button`,
-        (e) => {
-          const target = $(e.currentTarget);
+      const els = document.querySelectorAll(`
+        .pageSettings .section[data-config-name=${this.configName}] button`);
+
+      if (els.length === 0) {
+        throw new Error(`Failed to find a button element for ${configName}`);
+      }
+
+      for (const button of els) {
+        button.addEventListener("click", (e) => {
           if (
-            target.hasClass("disabled") ||
-            target.hasClass("no-auto-handle")
+            button.classList.contains("disabled") ||
+            button.classList.contains("no-auto-handle")
           ) {
             return;
           }
-          const value = target.attr(`data-config-value`);
+          const value = button.getAttribute("data-config-value");
           if (value === undefined || value === "") {
             console.error(
               `Failed to handle settings button click for ${configName}: data-${configName} is missing or empty.`
@@ -67,82 +85,105 @@ export default class SettingsGroup<T extends ConfigValue> {
           if (typed === "true") typed = true as T;
           if (typed === "false") typed = false as T;
           this.setValue(typed);
-        }
-      );
+        });
+      }
+
+      this.elements = Array.from(els);
     } else if (this.mode === "range") {
-      const rangeElement = document.querySelector(
+      const el = document.querySelector(
         `.pageSettings .section[data-config-name=${this.configName}] input[type=range]`
       );
 
-      if (!rangeElement) {
-        Notifications.add(`Failed to find range element for ${configName}`, -1);
-        return;
+      if (el === null) {
+        throw new Error(`Failed to find range element for ${configName}`);
       }
 
       const debounced = debounce<(val: T) => void>(250, (val) => {
         this.setValue(val);
       });
 
-      rangeElement.addEventListener("input", (e) => {
-        const target = $(e.target as HTMLInputElement);
-        if (target.hasClass("disabled") || target.hasClass("no-auto-handle")) {
+      el.addEventListener("input", (e) => {
+        if (
+          el.classList.contains("disabled") ||
+          el.classList.contains("no-auto-handle")
+        ) {
           return;
         }
-        const val = parseFloat(target.val() as string) as unknown as T;
+        const val = parseFloat((el as HTMLInputElement).value) as unknown as T;
         this.updateUI(val);
         debounced(val);
       });
+
+      this.elements = [el];
+    } else {
+      this.elements = [];
     }
+
+    if (this.elements.length === 0 || this.elements === undefined) {
+      throw new Error(
+        `Failed to find elements for ${configName} with mode ${mode}`
+      );
+    }
+
+    this.updateUI();
   }
 
   setValue(value: T): void {
+    if (Config[this.configName as keyof typeof Config] === value) {
+      return;
+    }
     this.configFunction(value);
     this.updateUI();
     if (this.setCallback) this.setCallback();
   }
 
   updateUI(valueOverride?: T): void {
-    this.configValue =
+    const newValue =
       valueOverride ?? (Config[this.configName as keyof typeof Config] as T);
-    $(
-      `.pageSettings .section[data-config-name='${this.configName}'] button`
-    ).removeClass("active");
-    if (this.mode === "select") {
-      const select = document.querySelector<HTMLSelectElement>(
-        `.pageSettings .section[data-config-name='${this.configName}'] select`
-      );
 
-      if (select === null) {
+    if (this.mode === "select") {
+      const select = this.elements?.[0] as HTMLSelectElement | null | undefined;
+      if (!select) {
         return;
       }
 
-      select.value = this.configValue as string;
-
       //@ts-expect-error this is fine, slimselect adds slim to the element
       const ss = select.slim as SlimSelect | undefined;
-      ss?.store.setSelectedBy("value", [this.configValue as string]);
-      ss?.render.renderValues();
-      ss?.render.renderOptions(ss.store.getData());
+      if (ss !== undefined) {
+        const currentSelected = ss.getSelected()[0] ?? null;
+        if (newValue !== currentSelected) {
+          ss.setSelected(newValue as string);
+        }
+      } else {
+        if (select.value !== newValue) select.value = newValue as string;
+      }
     } else if (this.mode === "button") {
-      $(
-        // this cant be an object?
-        // eslint-disable-next-line @typescript-eslint/no-base-to-string
-        `.pageSettings .section[data-config-name='${this.configName}'] button[data-config-value='${this.configValue}']`
-      ).addClass("active");
+      for (const button of this.elements) {
+        let value = button.getAttribute("data-config-value");
+
+        let typed = value as T;
+        if (typed === "true") typed = true as T;
+        if (typed === "false") typed = false as T;
+
+        if (typed !== newValue) {
+          button.classList.remove("active");
+        } else {
+          button.classList.add("active");
+        }
+      }
     } else if (this.mode === "range") {
-      const range = document.querySelector<HTMLInputElement>(
-        `.pageSettings .section[data-config-name='${this.configName}'] input[type=range]`
-      );
+      const range = this.elements?.[0] as HTMLInputElement | null | undefined;
+
       const rangeValue = document.querySelector(
         `.pageSettings .section[data-config-name='${this.configName}'] .value`
       );
 
-      if (range === null || rangeValue === null) {
+      if (range === undefined || range === null || rangeValue === null) {
         return;
       }
 
-      range.value = this.configValue as unknown as string;
-      rangeValue.textContent = `${(this.configValue as number).toFixed(1)}`;
+      range.value = newValue as unknown as string;
+      rangeValue.textContent = `${(newValue as number).toFixed(1)}`;
     }
     if (this.updateCallback) this.updateCallback();
   }