From 298d0e3e34a17417a8d9ac730266b14b9540bb42 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Wed, 4 Jan 2023 14:32:37 +0100 Subject: [PATCH] [Client] Move theme setting to the start page The theme setting is only used on this page right now, so it makes no sense to include in other pages. --- truthseeker/static/js/game_common.js | 71 ---------------------- truthseeker/static/js/game_start_page.js | 76 ++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 71 deletions(-) diff --git a/truthseeker/static/js/game_common.js b/truthseeker/static/js/game_common.js index 51498bf..a0655e7 100644 --- a/truthseeker/static/js/game_common.js +++ b/truthseeker/static/js/game_common.js @@ -31,76 +31,6 @@ function checkWebSocketAvailability() { } } -/** - * Set the current theme for the game. - * - *

- * The theme preference is read from the local storage. - *

- * - *

- * If accessing to the local storage is not allow, an error message which prevents playing the game - * and requesting user to enable localStorage is shown, and the error is logged in the console. - *

- */ -function setCurrentTheme() { - const htmlElement = document.getElementsByTagName("html")[0]; - - try { - const currentTheme = localStorage.getItem("pref_theme"); - - if (currentTheme == "light") { - htmlElement.classList.remove("dark"); - htmlElement.classList.add("light"); - } else { - // Use dark theme by default - htmlElement.classList.remove("light"); - htmlElement.classList.add("dark"); - } - - const btn = document.getElementsByClassName("theme_switcher")[0]; - btn.addEventListener("pointerup", changeTheme); - } catch (e) { - console.error("Unable to set theme from localStorage", e); - htmlElement.classList.add("dark"); - showUnsupportedBrowserMessage("Votre navigateur ne semble pas supporter le localStorage. Certains navigateurs nécessitant l'autorisation d'utiliser des cookies pour utiliser le localStorage, vérifiez que les cookies sont autorisés pour le site du jeu dans le vôtre."); - } -} - -/** - * Change the theme from the current theme to its opposite. - * - *

- * If the current theme is "dark", it will become "light" and vice versa. - *

- * - *

- * The new theme is saved in the localStorage, if the browser allows this action; otherwise, an - * error message is shown in the console. - *

- */ -function changeTheme() { - const currentTheme = localStorage.getItem("pref_theme"); - - const htmlElement = document.getElementsByTagName("html")[0]; - let newTheme; - if (currentTheme == "light") { - htmlElement.classList.remove("light"); - htmlElement.classList.add("dark"); - newTheme = "dark"; - } else { - htmlElement.classList.remove("dark"); - htmlElement.classList.add("light"); - newTheme = "light"; - } - - try { - localStorage.setItem("pref_theme", newTheme); - } catch (e) { - console.error("Unable to save theme change to localStorage", e); - } -} - /** * Show the unsupported browser dialog, which disables ability to play the game, using the given * unsupported browser message text. @@ -136,6 +66,5 @@ function showAlertDialog(element) { // Execution of main functions -setCurrentTheme(); detectIEBrowsers(); checkWebSocketAvailability(); \ No newline at end of file diff --git a/truthseeker/static/js/game_start_page.js b/truthseeker/static/js/game_start_page.js index 4df0062..52b68c0 100644 --- a/truthseeker/static/js/game_start_page.js +++ b/truthseeker/static/js/game_start_page.js @@ -138,8 +138,84 @@ function joinMultiPlayerRoom() { //TODO: code to join multi player game } +/** + * Set the current theme for the game. + * + *

+ * The theme preference is read from the local storage. + *

+ * + *

+ * If accessing to the local storage is not allow, an error message which prevents playing the game + * and requesting user to enable localStorage is shown, and the error is logged in the console. + *

+ */ +function setCurrentTheme() { + const htmlElement = document.getElementsByTagName("html")[0]; + + try { + const currentTheme = localStorage.getItem("pref_theme"); + + if (currentTheme == "light") { + htmlElement.classList.remove("dark"); + htmlElement.classList.add("light"); + } else { + // Use dark theme by default + htmlElement.classList.remove("light"); + htmlElement.classList.add("dark"); + } + + const btn = document.getElementsByClassName("theme_switcher")[0]; + btn.addEventListener("pointerup", changeTheme); + } catch (e) { + console.error("Unable to set theme from localStorage", e); + htmlElement.classList.add("dark"); + showUnsupportedBrowserMessage("Votre navigateur ne semble pas supporter le localStorage. Certains navigateurs nécessitant l'autorisation d'utiliser des cookies pour utiliser le localStorage, vérifiez que les cookies sont autorisés pour le site du jeu dans le vôtre."); + } +} + +/** + * Change the theme from the current theme to its opposite. + * + *

+ * If the current theme is "dark", it will become "light" and vice versa. + *

+ * + *

+ * The new theme is saved in the localStorage, if the browser allows this action; otherwise, an + * error message is shown in the console. + *

+ */ +function changeTheme() { + const currentTheme = localStorage.getItem("pref_theme"); + + const htmlElement = document.getElementsByTagName("html")[0]; + let newTheme; + if (currentTheme == "light") { + htmlElement.classList.remove("light"); + htmlElement.classList.add("dark"); + newTheme = "dark"; + } else { + htmlElement.classList.remove("dark"); + htmlElement.classList.add("light"); + newTheme = "light"; + } + + try { + localStorage.setItem("pref_theme", newTheme); + } catch (e) { + console.error("Unable to save theme change to localStorage", e); + } +} + +// Set event listeners + document.getElementById("play_button").addEventListener("click", showGameModeSelection); document.getElementById("back_button").addEventListener("click", hideGameModeSelection); document.getElementById("start_solo_game_button").addEventListener("click", startSoloGame); document.getElementById("create_room_button").addEventListener("click", createMultiPlayerRoom); document.getElementById("join_room_button").addEventListener("click", joinMultiPlayerRoom); + +// Execution of functions + +setCurrentTheme();