From 93c17be22700030edcd56b24cd64361dc473457d Mon Sep 17 00:00:00 2001 From: Rizwan Mustafa Date: Sun, 27 Feb 2022 09:29:04 +0500 Subject: [PATCH] Commenced shift from customThemeIndex to customThemeId --- backend/api/schemas/config-schema.ts | 2 +- frontend/src/scripts/config.ts | 24 +- .../scripts/controllers/account-controller.js | 8 +- .../scripts/controllers/theme-controller.ts | 240 +++++++++--------- .../src/scripts/elements/commandline-lists.ts | 16 +- frontend/src/scripts/elements/commandline.ts | 8 +- frontend/src/scripts/settings/theme-picker.ts | 81 +++--- frontend/src/scripts/test/test-logic.js | 2 +- frontend/src/scripts/types/types.d.ts | 2 +- 9 files changed, 195 insertions(+), 188 deletions(-) diff --git a/backend/api/schemas/config-schema.ts b/backend/api/schemas/config-schema.ts index 5d4f8a1b7..be88137d8 100644 --- a/backend/api/schemas/config-schema.ts +++ b/backend/api/schemas/config-schema.ts @@ -16,7 +16,7 @@ const CONFIG_SCHEMA = joi.object({ themeLight: joi.string(), themeDark: joi.string(), autoSwitchTheme: joi.boolean(), - customThemeIndex: joi.number().min(-1).max(9), + customThemeId: joi.string().min(0).max(24), customThemeColors: joi .array() .items(joi.string().pattern(/^#([\da-f]{3}){1,2}$/i)) diff --git a/frontend/src/scripts/config.ts b/frontend/src/scripts/config.ts index c5f33123d..6044573f7 100644 --- a/frontend/src/scripts/config.ts +++ b/frontend/src/scripts/config.ts @@ -27,7 +27,7 @@ const defaultConfig: MonkeyTypes.Config = { themeLight: "serika", themeDark: "serika_dark", autoSwitchTheme: false, - customThemeIndex: -1, + customThemeId: "", customThemeColors: [ "#323437", "#e2b714", @@ -1319,21 +1319,21 @@ export function setAutoSwitchTheme(boolean: boolean, nosave?: boolean): void { ConfigEvent.dispatch("autoSwitchTheme", config.autoSwitchTheme); } -export function setCustomThemeIndex(index: number, nosave?: boolean): void { - if (index !== -1) setRandomTheme("off"); - if (!isConfigValueValid(index, ["number"])) - return invalid("custom theme", index); +export function setCustomThemeId(customId: string, nosave?: boolean): void { + if (customId !== "") setRandomTheme("off"); + if (!isConfigValueValid(customId, ["string"])) + return invalid("custom theme", customId); - if (index !== undefined) config.customThemeIndex = index; + if (customId !== undefined) config.customThemeId = customId; if (!nosave) saveToLocalStorage(); - ConfigEvent.dispatch("customThemeIndex", config.customThemeIndex); + ConfigEvent.dispatch("customThemeId", config.customThemeId); } export function setTheme(name: string, nosave?: boolean): void { if (!isConfigValueValid(name, ["string"])) return invalid("", name); config.theme = name; - setCustomThemeIndex(-1, true); + setCustomThemeId("", true); if (!nosave) saveToLocalStorage(); ConfigEvent.dispatch("theme", config.theme); } @@ -1355,11 +1355,11 @@ export function setThemeDark(name: string, nosave?: boolean): void { ConfigEvent.dispatch("themeDark", config.themeDark, nosave); } -function setThemes(theme: string, customState: number, nosave?: boolean): void { +function setThemes(theme: string, customState: string, nosave?: boolean): void { if (!isConfigValueValid(theme, ["string"])) return invalid("", theme); config.theme = theme; - config.customThemeIndex = customState; + config.customThemeId = customState; if (!nosave) saveToLocalStorage(); ConfigEvent.dispatch("setThemes", customState); } @@ -1377,7 +1377,7 @@ export function setRandomTheme( val = "off"; } - if (val !== "off") setCustomThemeIndex(-1); + if (val !== "off") setCustomThemeId(""); config.randomTheme = val; if (!nosave) saveToLocalStorage(); ConfigEvent.dispatch("randomTheme", config.randomTheme); @@ -1754,7 +1754,7 @@ export function apply(configObj: MonkeyTypes.Config | null | "null"): void { setThemeLight(configObj.themeLight, true); setThemeDark(configObj.themeDark, true); setAutoSwitchTheme(configObj.autoSwitchTheme, true); - setThemes(configObj.theme, configObj.customThemeIndex, true); + setThemes(configObj.theme, configObj.customThemeId, true); // setTheme(configObj.theme, true); // setCustomTheme(configObj.customTheme, true, true); setCustomLayoutfluid(configObj.customLayoutfluid, true); diff --git a/frontend/src/scripts/controllers/account-controller.js b/frontend/src/scripts/controllers/account-controller.js index bd74babaf..3c0ddc004 100644 --- a/frontend/src/scripts/controllers/account-controller.js +++ b/frontend/src/scripts/controllers/account-controller.js @@ -74,7 +74,7 @@ export async function getDataAndInit() { } Loader.hide(); } - ThemeController.set(Config.customThemeIndex); + ThemeController.set(Config.customThemeId); } catch (e) { AccountButton.loading(false); if (e?.response?.status === 429) { @@ -304,7 +304,7 @@ const authListener = firebase.auth().onAuthStateChanged(async function (user) { } let themeColors = Misc.findGetParameter("customTheme"); - const oldCustomThemeIndex = Config.customThemeIndex; + const oldCustomThemeIndex = Config.customThemeId; if (themeColors !== null) { try { themeColors = themeColors.split(","); @@ -331,7 +331,7 @@ const authListener = firebase.auth().onAuthStateChanged(async function (user) { _id: response.data.theme._id, }); - UpdateConfig.setCustomThemeIndex(customThemesLength); + UpdateConfig.setCustomThemeId(customThemesLength); Notifications.add( "Custom theme: 'custom' sucessfully created and applied.", 1 @@ -346,7 +346,7 @@ const authListener = firebase.auth().onAuthStateChanged(async function (user) { "Something went wrong. Reverting to previous state.", 0 ); - UpdateConfig.setCustomThemeIndex(oldCustomThemeIndex); + UpdateConfig.setCustomThemeId(oldCustomThemeIndex); } } if (/challenge_.+/g.test(window.location.pathname)) { diff --git a/frontend/src/scripts/controllers/theme-controller.ts b/frontend/src/scripts/controllers/theme-controller.ts index f497e0c05..7109ce0a3 100644 --- a/frontend/src/scripts/controllers/theme-controller.ts +++ b/frontend/src/scripts/controllers/theme-controller.ts @@ -85,118 +85,120 @@ const loadStyle = async function (name: string): Promise { }); }; -export async function apply( - themeNameOrIndex: string | number, +export async function apply_custom( + themeId: string, isPreview = false ): Promise { clearCustomTheme(); - - if (themeNameOrIndex === -1) themeNameOrIndex = Config.theme; - - if (typeof themeNameOrIndex === "number") { - // The user has not yet loaded - if (DB.getSnapshot() === undefined) { - return; - } - // We have been given the index of the custom theme - const customThemes = DB.getSnapshot().customThemes; - const customTheme = customThemes ? customThemes[themeNameOrIndex] : null; - if (customTheme === undefined || customTheme === null) { - Notifications.add( - `No custom theme at index: ${themeNameOrIndex}\nReverting to presets`, - 0 - ); - UpdateConfig.setCustomThemeIndex(-1); - return; - } - const themeName = customTheme.name; - Misc.swapElements( - $('.pageSettings [tabContent="preset"]'), - $('.pageSettings [tabContent="custom"]'), - 250 - ); - - ThemeColors.reset(); - await loadStyle("serika_dark"); - colorVars.forEach((e, index) => { - document.documentElement.style.setProperty(e, customTheme.colors[index]); - }); - ThemeColors.update(); - - try { - firebase.analytics().logEvent("changedCustomTheme", { - theme: themeName, - }); - } catch (e) { - console.log("Analytics unavailable"); - } - - if (!isPreview) { - UpdateConfig.setCustomThemeColors([...customTheme.colors]); - ThemeColors.getAll().then((colors) => { - $(".current-theme .text").text( - "custom: " + themeName.replace(/_/g, " ") - ); - $(".keymap-key").attr("style", ""); - ChartController.updateAllChartColors(); - updateFavicon(128, 32); - $("#metaThemeColor").attr("content", colors.bg); - }); - } - } else { - const themeName = themeNameOrIndex; - Misc.swapElements( - $('.pageSettings [tabContent="custom"]'), - $('.pageSettings [tabContent="preset"]'), - 250 - ); - ThemeColors.reset(); - - loadStyle(themeName).then(() => { - ThemeColors.update(); - try { - firebase.analytics().logEvent("changedTheme", { - theme: themeNameOrIndex, - }); - } catch (e) { - console.log("Analytics unavailable"); - } - if (!isPreview) { - ThemeColors.getAll().then((colors) => { - $(".current-theme .text").text(themeName.replace(/_/g, " ")); - $(".keymap-key").attr("style", ""); - ChartController.updateAllChartColors(); - updateFavicon(128, 32); - $("#metaThemeColor").attr("content", colors.bg); - }); - } - }); + if (!DB.getSnapshot()) return; // The user has not yet loaded or is not signed in + if (themeId.trim() === "") { + // Rizwan TODO: Remove this if statement later + Notifications.add("apply_custom got an empty value. This shouldn't happen"); } + + const customThemes = DB.getSnapshot().customThemes; + const customTheme = customThemes + ? customThemes.filter((t) => t._id === themeId)[0] + : undefined; + if (!customTheme) { + Notifications.add(`No custom theme with id: ${themeId}`, 0); + if (customThemes && customThemes.length > 1) + UpdateConfig.setCustomThemeId(customThemes[0]._id); + else UpdateConfig.setCustomThemeId(""); + return; + } + const themeName = customTheme.name; + Misc.swapElements( + $('.pageSettings [tabContent="preset"]'), + $('.pageSettings [tabContent="custom"]'), + 250 + ); + + ThemeColors.reset(); + await loadStyle("serika_dark"); + colorVars.forEach((e, index) => { + document.documentElement.style.setProperty(e, customTheme.colors[index]); + }); + ThemeColors.update(); + + try { + firebase.analytics().logEvent("changedCustomTheme", { theme: themeName }); + } catch (e) { + console.log("Analytics unavailable"); + } + if (isPreview) return; + + UpdateConfig.setCustomThemeColors([...customTheme.colors]); + const colors = await ThemeColors.getAll(); + $(".current-theme .text").text("custom: " + themeName.replace(/_/g, " ")); + $(".keymap-key").attr("style", ""); + ChartController.updateAllChartColors(); + updateFavicon(128, 32); + $("#metaThemeColor").attr("content", colors.bg); } +export async function apply_preset( + themeName: string, + isPreview = false +): Promise { + clearCustomTheme(); + if (themeName.trim() === "") themeName = Config.theme; + Misc.swapElements( + $('.pageSettings [tabContent="custom"]'), + $('.pageSettings [tabContent="preset"]'), + 250 + ); + ThemeColors.reset(); + await loadStyle(themeName); + ThemeColors.update(); + + try { + firebase.analytics().logEvent("changedTheme", { theme: themeName }); + } catch (e) { + console.log("Analytics unavailable"); + } + + if (isPreview) return; + + const colors = await ThemeColors.getAll(); + $(".current-theme .text").text(themeName.replace(/_/g, " ")); + $(".keymap-key").attr("style", ""); + ChartController.updateAllChartColors(); + updateFavicon(128, 32); + $("#metaThemeColor").attr("content", colors.bg); +} + +export const apply = async ( + custom: boolean, + themeIdentifier: string, + isPreview = false +): Promise => { + if (custom === true) apply_custom(themeIdentifier, isPreview); + else apply_preset(themeIdentifier, isPreview); +}; + export function preview( - themeNameOrIndex: string | number, + custom: boolean, + themeIdentifier: string, randomTheme = false ): void { + apply(custom, themeIdentifier, !randomTheme); isPreviewingTheme = true; - apply(themeNameOrIndex, true && !randomTheme); } -export function set(themeNameOrIndex: string | number): void { - apply(themeNameOrIndex); -} +export const set = async ( + custom: boolean, + themeIdentifier: string +): Promise => apply(custom, themeIdentifier); -export function clearPreview(): void { - if (isPreviewingTheme) { - isPreviewingTheme = false; - randomTheme = null; - if (Config.customThemeIndex !== -1) { - apply(Config.customThemeIndex); - } else { - apply(Config.theme); - } - } -} +export const clearPreview = (): void => { + if (!isPreviewingTheme) return; + + isPreviewingTheme = false; + randomTheme = null; + if (Config.customThemeId !== "") apply_custom(Config.customThemeId); + else apply_preset(Config.theme); +}; export function randomizeTheme(): void { let randomList; @@ -217,14 +219,14 @@ export function randomizeTheme(): void { }); } - const previousTheme = randomTheme; + // const previousTheme = randomTheme; randomTheme = randomList[Math.floor(Math.random() * randomList.length)]; - preview(randomTheme, true); + preview(false, randomTheme, true); - if (previousTheme != randomTheme) { - // Notifications.add(randomTheme.replace(/_/g, " "), 0); - } + // if (previousTheme != randomTheme) { + // // Notifications.add(randomTheme.replace(/_/g, " "), 0); + // } }); } @@ -267,38 +269,38 @@ export function applyCustomBackground(): void { window .matchMedia("(prefers-color-scheme: dark)") ?.addEventListener("change", (event) => { - if (!Config.autoSwitchTheme || Config.customThemeIndex !== -1) return; + if (!Config.autoSwitchTheme || Config.customThemeId !== "") return; if (event.matches) { - set(Config.themeDark); + set(false, Config.themeDark); } else { - set(Config.themeLight); + set(false, Config.themeLight); } }); ConfigEvent.subscribe((eventKey, eventValue, nosave) => { - if (eventKey === "customThemeIndex") { - set(eventValue); + if (eventKey === "customThemeId") { + set(true, eventValue); } if (eventKey === "theme") { clearPreview(); - set(eventValue); + set(false, eventValue); } if (eventKey === "setThemes") { clearPreview(); if (eventValue) { - set(eventValue); + set(true, eventValue); } else { if (Config.autoSwitchTheme) { if ( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ) { - set(Config.themeDark); + set(false, Config.themeDark); } else { - set(Config.themeLight); + set(false, Config.themeLight); } } else { - set(Config.theme); + set(false, Config.theme); } } } @@ -311,12 +313,12 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => { window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ) { - set(Config.themeDark); + set(false, Config.themeDark); } else { - set(Config.themeLight); + set(false, Config.themeLight); } } else { - set(Config.theme); + set(false, Config.theme); } } if ( @@ -328,7 +330,7 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => { ) && !nosave ) { - set(Config.themeLight); + set(false, Config.themeLight); } if ( eventKey === "themeDark" && @@ -337,6 +339,6 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => { window.matchMedia("(prefers-color-scheme: dark)").matches && !nosave ) { - set(Config.themeDark); + set(false, Config.themeDark); } }); diff --git a/frontend/src/scripts/elements/commandline-lists.ts b/frontend/src/scripts/elements/commandline-lists.ts index 3906d8721..dc78436d2 100644 --- a/frontend/src/scripts/elements/commandline-lists.ts +++ b/frontend/src/scripts/elements/commandline-lists.ts @@ -1217,7 +1217,7 @@ export const commandsEnableAds: MonkeyTypes.CommandsGroup = { const commandsCustomTheme: MonkeyTypes.CommandsGroup = { title: "Custom theme...", - configKey: "customThemeIndex", + configKey: "customThemeId", list: [], }; @@ -1228,9 +1228,9 @@ export function updateCustomThemeCommands(): void { commandsCustomTheme.list.push({ id: "setCustomThemeOff", display: "off", - configValue: -1, + configValue: "", exec: (): void => { - UpdateConfig.setCustomThemeIndex(-1); + UpdateConfig.setCustomThemeId(""); }, }); if (customThemes !== undefined && customThemes.length > 0) { @@ -1241,10 +1241,10 @@ export function updateCustomThemeCommands(): void { configValue: index, hover: (): void => { // previewTheme(theme.name); - ThemeController.preview(index); + ThemeController.preview(true, theme._id); }, exec: (): void => { - UpdateConfig.setCustomThemeIndex(index); + UpdateConfig.setCustomThemeId(theme._id); }, }); }); @@ -2373,7 +2373,7 @@ Misc.getThemesList().then((themes) => { configValue: theme.name, hover: (): void => { // previewTheme(theme.name); - ThemeController.preview(theme.name); + ThemeController.preview(false, theme.name); }, exec: (): void => { UpdateConfig.setTheme(theme.name); @@ -2412,7 +2412,7 @@ export function updateThemeCommands(): void { display: theme.replace(/_/g, " "), hover: (): void => { // previewTheme(theme); - ThemeController.preview(theme); + ThemeController.preview(false, theme); }, exec: (): void => { UpdateConfig.setTheme(theme); @@ -2427,7 +2427,7 @@ export function updateThemeCommands(): void { display: theme.name.replace(/_/g, " "), hover: (): void => { // previewTheme(theme.name); - ThemeController.preview(theme.name); + ThemeController.preview(false, theme.name); }, exec: (): void => { UpdateConfig.setTheme(theme.name); diff --git a/frontend/src/scripts/elements/commandline.ts b/frontend/src/scripts/elements/commandline.ts index 989b9774e..6334aaf3a 100644 --- a/frontend/src/scripts/elements/commandline.ts +++ b/frontend/src/scripts/elements/commandline.ts @@ -675,13 +675,15 @@ $(document).on("click", "#bottom .leftright .right .current-theme", (e) => { if (e.shiftKey) { if (DB.getSnapshot().customThemes.length < 1) { Notifications.add("No custom themes!", 0); - UpdateConfig.setCustomThemeIndex(-1); + UpdateConfig.setCustomThemeId(""); return; } // Turn on the first custom theme - if (Config.customThemeIndex === -1) UpdateConfig.setCustomThemeIndex(0); - else UpdateConfig.setCustomThemeIndex(-1); + const firstCustomThemeId = DB.getSnapshot().customThemes[0]._id; + if (Config.customThemeId === "") + UpdateConfig.setCustomThemeId(firstCustomThemeId); + else UpdateConfig.setCustomThemeId(""); } else { CommandlineLists.pushCurrent(CommandlineLists.themeCommands); show(); diff --git a/frontend/src/scripts/settings/theme-picker.ts b/frontend/src/scripts/settings/theme-picker.ts index 9986eb60d..a4f70f573 100644 --- a/frontend/src/scripts/settings/theme-picker.ts +++ b/frontend/src/scripts/settings/theme-picker.ts @@ -10,11 +10,11 @@ import * as DB from "../db"; import Ape from "../ape"; export function updateActiveButton(): void { - if (Config.customThemeIndex !== -1) { - const activeThemeIndex = Config.customThemeIndex; + if (Config.customThemeId !== "") { + const activeThemeId = Config.customThemeId; $(`.pageSettings .section.themes .customTheme`).removeClass("active"); $( - `.pageSettings .section.themes .customTheme[customThemeIndex=${activeThemeIndex}]` + `.pageSettings .section.themes .customTheme[customThemeId=${activeThemeId}]` ).addClass("active"); } else { let activeThemeName = Config.theme; @@ -102,7 +102,7 @@ function updateColors( } export async function refreshButtons(): Promise { - if (Config.customThemeIndex !== -1) { + if (Config.customThemeId !== "") { // Update custom theme buttons const customThemesEl = $( ".pageSettings .section.themes .allCustomThemes.buttons" @@ -114,14 +114,16 @@ export async function refreshButtons(): Promise { return; } - customThemes.forEach((customTheme, customThemeIndex) => { + customThemes.forEach((customTheme) => { const activeTheme = - Config.customThemeIndex === customThemeIndex ? "active" : ""; + Config.customThemeId === customTheme._id ? "active" : ""; const bgColor = customTheme.colors[0]; const mainColor = customTheme.colors[1]; customThemesEl.append( - `
${customTheme.name.replace(/_/g, " ")}
@@ -183,9 +185,10 @@ export async function refreshButtons(): Promise { } export function setCustomInputs(noThemeUpdate = false): void { - const customTheme = (DB.getSnapshot().customThemes ?? [])[ - Config.customThemeIndex - ]; + if (!DB.getSnapshot() || !DB.getSnapshot().customThemes) return; + const customTheme = DB.getSnapshot().customThemes.filter( + (t) => t._id === Config.customThemeId + )[0]; $(".pageSettings .section.themes .tabContainer .customThemeEdit #name").val( customTheme !== undefined ? customTheme.name : "custom" ); @@ -225,7 +228,7 @@ export function updateActiveTab(forced = false): void { ".pageSettings .section.themes .tabs .button[tab='custom']" ); - if (Config.customThemeIndex === -1) { + if (Config.customThemeId === "") { $customTab.removeClass("active"); if (!$presetTab.hasClass("active") || forced) { $presetTab.addClass("active"); @@ -249,7 +252,7 @@ $(".pageSettings .section.themes .tabs .button").on("click", async (e) => { // $target.addClass("active"); Don't uncomment it. updateActiveTab() will add the active class itself setCustomInputs(); if ($target.attr("tab") == "preset") { - UpdateConfig.setCustomThemeIndex(-1); + UpdateConfig.setCustomThemeId(""); } else { const customThemes = DB.getSnapshot().customThemes; if (customThemes.length < 1) { @@ -264,12 +267,12 @@ $(".pageSettings .section.themes .tabs .button").on("click", async (e) => { DB.getSnapshot().customThemes = [ { ...newCustomTheme, _id: response.data.theme._id }, ]; - UpdateConfig.setCustomThemeIndex(0); + UpdateConfig.setCustomThemeId(response.data.theme._id); } else { Notifications.add("Could not create custom theme: custom", -1); } Loader.hide(); - } else UpdateConfig.setCustomThemeIndex(0); + } else UpdateConfig.setCustomThemeId(customThemes[0]._id); } }); @@ -305,19 +308,15 @@ $(document).on( (e) => { // Do not apply if user wanted to delete it if ($(e.target).hasClass("delButton")) return; - const customThemeIndex = parseInt( - $(e.currentTarget).attr("customThemeIndex") ?? "" - ); + const customThemeId = + $(e.currentTarget).attr("customThemeId") ?? ("" as string); const customThemes = DB.getSnapshot().customThemes ?? []; - if ( - customThemeIndex !== undefined && - customThemes.length > customThemeIndex - ) { - UpdateConfig.setCustomThemeIndex(customThemeIndex); + if (customThemes.filter((t) => t._id === customThemeId)[0]) { + UpdateConfig.setCustomThemeId(customThemeId); updateActiveButton(); } else console.error( - "Could not find the custom theme index attribute attached to the button clicked!" + "Could not find the custom theme id attribute attached to the button clicked!" ); } ); @@ -327,19 +326,19 @@ $(document).on( "click", ".pageSettings .section.themes .customTheme .delButton", async (e) => { - const customThemeIndex = parseInt( - $(e.currentTarget) - .parents(".customTheme.button") - .attr("customThemeIndex") ?? "-1" - ); - if (customThemeIndex !== -1) { + const parentElement = $(e.currentTarget).parent(".customTheme.button"); + // const customThemeId = $(e.currentTarget).parents(".customTheme.button").attr("customThemeId") ?? ""; + const customThemeId = parentElement.attr("customThemeId") ?? ""; + const themeActive = parentElement.hasClass("active"); + + if (customThemeId !== "") { const customThemes = DB.getSnapshot().customThemes; if (customThemes.length < 1) { Notifications.add("No custom themes!", -1); return; } - const customTheme = customThemes[customThemeIndex]; - if (customTheme === undefined) { + const customTheme = customThemes.find((t) => t._id === customThemeId); + if (!customTheme) { Notifications.add("Custom theme does not exist!"); return; } @@ -347,14 +346,16 @@ $(document).on( const response = await Ape.users.deleteCustomThemes(customTheme._id); if (response.status === 200) { - const filteredThemes = customThemes.filter((_customTheme, index) => { - return index !== customThemeIndex; - }); + const filteredThemes = customThemes.filter( + (customTheme) => customTheme._id !== customThemeId + ); DB.getSnapshot().customThemes = filteredThemes; if (filteredThemes.length < 1) { - UpdateConfig.setCustomThemeIndex(filteredThemes.length < 1 ? -1 : 0); + UpdateConfig.setCustomThemeId(""); } else { - UpdateConfig.setCustomThemeIndex(0); + if (themeActive) + // If active theme was deleted set the first custom theme + UpdateConfig.setCustomThemeId(filteredThemes[0]._id); updateActiveTab(true); } Notifications.add("Deleted custom theme sucessfully", 1); @@ -512,7 +513,9 @@ $(".pageSettings .saveCustomThemeButton").on("click", async () => { return; } - const customTheme = snapshot.customThemes[Config.customThemeIndex]; + const customTheme = snapshot.customThemes.find( + (t) => t._id === Config.customThemeId + ); if (customTheme === undefined) { Notifications.add("Custom theme does not exist!", -1); return; @@ -524,7 +527,7 @@ $(".pageSettings .saveCustomThemeButton").on("click", async () => { Loader.show(); const response = await Ape.users.editCustomThemes(customTheme._id, newTheme); if (response.status === 200) { - snapshot.customThemes[Config.customThemeIndex] = { + snapshot.customThemes[snapshot.customThemes.indexOf(customTheme)] = { ...newTheme, _id: customTheme._id, }; @@ -532,6 +535,6 @@ $(".pageSettings .saveCustomThemeButton").on("click", async () => { } else Notifications.add(response.message, -1); Loader.hide(); - ThemeController.set(Config.customThemeIndex); + ThemeController.set(true, Config.customThemeId); updateActiveTab(true); }); diff --git a/frontend/src/scripts/test/test-logic.js b/frontend/src/scripts/test/test-logic.js index f87435549..46d4cc6b2 100644 --- a/frontend/src/scripts/test/test-logic.js +++ b/frontend/src/scripts/test/test-logic.js @@ -397,7 +397,7 @@ export function restart( if ( Config.randomTheme !== "off" && !PageTransition.get() && - Config.customThemeIndex === -1 + Config.customThemeId === -1 ) { ThemeController.randomizeTheme(); } diff --git a/frontend/src/scripts/types/types.d.ts b/frontend/src/scripts/types/types.d.ts index dc4ceeedb..fff45842f 100644 --- a/frontend/src/scripts/types/types.d.ts +++ b/frontend/src/scripts/types/types.d.ts @@ -238,7 +238,7 @@ declare namespace MonkeyTypes { themeLight: string; themeDark: string; autoSwitchTheme: boolean; - customThemeIndex: number; + customThemeId: string; customThemeColors: string[]; favThemes: string[]; showKeyTips: boolean;