validate config types in localStorage

src/js/ConfigMenu.js

@@ -148,7 +148,6 @@ export default class ConfigMenu {
         });
 
         this.#config[options.key] = options;
-        this.#config[options.key].value = localStorage.getItem(`dribbblish:config:${options.key}`) ?? JSON.stringify(options.defaultValue);
 
         if (options.type == "checkbox") {
             const input = /* html */ `
@@ -166,17 +165,19 @@ export default class ConfigMenu {
         } else if (options.type == "select") {
             // Validate
             const val = this.get(options.key);
-            if (val < 0 || val > options.data.length - 1) this.set(options.key);
+            if (!Object.keys(options.data).includes(val)) this.reset(options.key);
 
             const input = /* html */ `
                 <select class="main-dropDown-dropDown" id="dribbblish-config-input-${options.key}">
-                    ${options.data.map((option, i) => `<option value="${i}"${this.get(options.key) == i ? " selected" : ""}>${option}</option>`).join("")}
+                    ${Object.entries(options.data)
+                        .map(([key, name]) => `<option value="${key}"${this.get(options.key) == key ? " selected" : ""}>${name}</option>`)
+                        .join("")}
                 </select>
             `;
             this.addInputHTML({ ...options, input });
 
             document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("change", (e) => {
-                this.set(options.key, Number(e.target.value));
+                this.set(options.key, e.target.value);
                 options.onChange(this.get(options.key));
             });
         } else if (options.type == "button") {
@@ -333,9 +334,12 @@ export default class ConfigMenu {
      * @returns {any}
      */
     get(key, defaultValueOverride) {
-        const val = JSON.parse(this.#config[key].value ?? null); // Turn undefined into null because `JSON.parse()` dosen't like undefined
+        const val = JSON.parse(this.#config[key]?.storageCache ?? localStorage.getItem(`dribbblish:config:${key}`) ?? null); // Turn undefined into null because `JSON.parse()` dosen't like undefined
-        if (val == null) return defaultValueOverride ?? this.#config[key].defaultValue;
+        if (val == null || val?.type != this.#config[key]?.type) {
-        return val;
+            localStorage.removeItem(`dribbblish:config:${key}`);
+            return defaultValueOverride ?? this.#config[key].defaultValue;
+        }
+        return val.value;
     }
 
     /**
@@ -344,10 +348,20 @@ export default class ConfigMenu {
      * @param {any} val
      */
     set(key, val) {
-        this.#config[key].value = JSON.stringify(val);
+        val = { type: this.#config[key].type, value: val ?? this.#config[key].defaultValue };
+        this.#config[key].storageCache = JSON.stringify(val);
         localStorage.setItem(`dribbblish:config:${key}`, JSON.stringify(val));
     }
 
+    /**
+     *
+     * @param {String} key
+     */
+    reset(key) {
+        delete this.#config[key].storageCache;
+        localStorage.removeItem(`dribbblish:config:${key}`);
+    }
+
     /**
      *
      * @param {String} key

src/js/main.js

@@ -42,28 +42,22 @@ DribbblishShared.config.register({
 waitForElement(["#main"], () => {
     DribbblishShared.config.register({
         type: "select",
-        data: ["None", "None (With Top Padding)", "Solid", "Transparent"],
+        data: { none: "None", "none-padding": "None (With Top Padding)", solid: "Solid", transparent: "Transparent" },
         key: "winTopBar",
         name: "Windows Top Bar",
         description: "Have different top Bars (or none at all)",
-        defaultValue: 0,
+        defaultValue: "none",
-        onChange: (val) => {
+        onChange: (val) => $("#main").attr("top-bar", val)
-            const vals = ["none", "none-padding", "solid", "transparent"];
-            $("#main").attr("top-bar", vals[val]);
-        }
     });
 
     DribbblishShared.config.register({
         type: "select",
-        data: ["Dribbblish", "Spotify"],
+        data: { dribbblish: "Dribbblish", spotify: "Spotify" },
         key: "playerControlsStyle",
         name: "Player Controls Style",
         description: "Style of the Player Controls. Selecting Spotify basically changes Play / Pause back to the center",
-        defaultValue: 0,
+        defaultValue: "dribbblish",
-        onChange: (val) => {
+        onChange: (val) => $("#main").attr("player-controls", val)
-            const vals = ["dribbblish", "spotify"];
-            $("#main").attr("player-controls", vals[val]);
-        }
     });
 
     DribbblishShared.config.register({
@@ -397,8 +391,7 @@ function toggleDark(setDark) {
 
 function checkDarkLightMode(colors) {
     const theme = DribbblishShared.config.get("theme");
-    if (theme == 2) {
+    if (theme == "time") {
-        // Based on Time
         const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]);
         const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]);
 
@@ -409,8 +402,7 @@ function checkDarkLightMode(colors) {
         if (end < start) dark = start <= time || time < end;
         else dark = start <= time && time < end;
         toggleDark(dark);
-    } else if (theme == 3) {
+    } else if (theme == "color") {
-        // Based on Color
         if (colors && colors.length > 0) toggleDark(isLight(colors[0]));
     }
 }
@@ -442,11 +434,11 @@ DribbblishShared.config.register({
 DribbblishShared.config.register({
     area: "Theme",
     type: "select",
-    data: ["Dark", "Light", "Based on Time", "Based on Color"],
+    data: { dark: "Dark", light: "Light", time: "Based on Time", color: "Based on Color" },
     key: "theme",
     name: "Theme",
     description: "Select Dark / Bright mode",
-    defaultValue: 0,
+    defaultValue: "dark",
     showChildren: (val) => {
         if (val == 2) return ["darkModeOnTime", "darkModeOffTime"];
         //if (val == 3) return [""];
@@ -454,16 +446,16 @@ DribbblishShared.config.register({
     },
     onChange: (val) => {
         switch (val) {
-            case 0:
+            case "dark":
                 toggleDark(true);
                 break;
-            case 1:
+            case "light":
                 toggleDark(false);
                 break;
-            case 2:
+            case "time":
                 checkDarkLightMode();
                 break;
-            case 3:
+            case "color":
                 checkDarkLightMode();
                 break;
         }