diff --git a/client/index.html b/client/index.html index c5d7587..1a1af82 100644 --- a/client/index.html +++ b/client/index.html @@ -9,6 +9,7 @@ +

Thruth Inquiry

- +
-

Navigateur non supporté

-

+
+

Navigateur non supporté

+

+
- + - \ No newline at end of file + diff --git a/client/res/core/game_common.js b/client/res/core/game_common.js new file mode 100644 index 0000000..51498bf --- /dev/null +++ b/client/res/core/game_common.js @@ -0,0 +1,141 @@ +// Common functions +// These functions should be executed in all the game pages, except the privacy policy, licenses, and legal mentions ones. + +/* + * Prevent using Internet Explorer browser in the game, by detecting whether MSIE or Trident is + * present in the user agent. + * + *

+ * If Internet Explorer is used, an error message which prevents playing the game and requesting + * user to change their browser is shown. + *

+ */ +function detectIEBrowsers() { + let browserName = window.navigator.userAgent; + if (browserName.indexOf("MSIE") != -1 || browserName.indexOf("Trident") != -1) { + showUnsupportedBrowserMessage("Il semblerait que vous utilisez Internet Explorer, un navigateur non supporté. Veuillez utiliser un autre navigateur récent tel que Firefox."); + } +} + +/** + * Check the availability of the WebSocket API in the client. + * + *

+ * If it is not available, an error message which prevents playing the game and requesting user to + * enable WebSocket API is shown. + *

+ */ +function checkWebSocketAvailability() { + if (!window.WebSocket) { + showUnsupportedBrowserMessage("Votre navigateur ne prend pas en charge les API WebSocket, nécessaires au fonctionnement du jeu. Veuillez les activer ou utiliser un navigateur compatible avec ces APIs, tel que Firefox."); + } +} + +/** + * 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. + * + *

+ * This method will provide the text supplied to the first element with the unsupported_browser_msg + * CSS class found. + *

+ * + * @param {String} messageText the error message to show, as a string and not as an HTML block + */ +function showUnsupportedBrowserMessage(messageText) { + showAlertDialog(document.getElementById("unsupported_browser_dialog")); + let unsupportedBrowserMessageElement = document.getElementsByClassName("unsupported_browser_msg")[0]; + unsupportedBrowserMessageElement.textContent = messageText; + unsupportedBrowserMessageElement.classList.add("unsupported_show"); +} + +/** + * Show an alert dialog component which will show a background preventing interactions with the game. + * + *

+ * This function will add the alert_dialog_show CSS class to the element passed and show to the first + * element found with the alert_dialog_background class. + *

+ * + * @param {Element} element an HTML element which should contain the alert_dialog CSS class + */ +function showAlertDialog(element) { + element.classList.add("alert_dialog_show"); + document.getElementsByClassName("alert_dialog_background")[0].style.display = "block"; +} + +// Execution of main functions + +setCurrentTheme(); +detectIEBrowsers(); +checkWebSocketAvailability(); \ No newline at end of file diff --git a/client/res/ui/game_ui.css b/client/res/ui/game_ui.css index cbd039e..d8ad5fb 100644 --- a/client/res/ui/game_ui.css +++ b/client/res/ui/game_ui.css @@ -20,6 +20,7 @@ :root { color-scheme: dark; --footer-links-height: 2em; + --button-and-dialog-border-radius: 1em; } html { @@ -69,11 +70,55 @@ body { justify-content: flex-end; } -/* Unsupported browser message */ -.unsupported_browser { +/* JavaScript browser message */ +.unsupported_browser_msg { display: none; } .unsupported_show { display: block; +} + +/* Alert dialogs */ +.alert_dialog { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: none; + align-content: center; + align-items: center; + font-family: "Spicy Rice", serif; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + border-radius: var(--button-and-dialog-border-radius); + padding: 2em; + z-index: 2; +} + +.alert_dialog_show { + display: flex; +} + +.alert_dialog_title { + font-size: 2em; + font-weight: normal; + text-align: center; +} + +.alert_dialog_msg { + font-size: 1.5em; + text-align: justify; +} + +.alert_dialog_background { + background-color: rgba(0, 0, 0, 0.875); + position: absolute; + display: none; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + z-index: 1; } \ No newline at end of file diff --git a/client/res/ui/start/game_ui_start.css b/client/res/ui/start/game_ui_start.css index 7cf98c8..69f67cb 100644 --- a/client/res/ui/start/game_ui_start.css +++ b/client/res/ui/start/game_ui_start.css @@ -58,7 +58,7 @@ border-style: solid; border-width: 0.125em; background-color: #BD1E1E; - border-radius: 1em; + border-radius: var(--button-and-dialog-border-radius); cursor: pointer; font-family: "Titan One", sans-serif; font-size: 3em;