From 6a0d7547c2880814e08e2c3fba11fb571476694f Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Tue, 3 Jan 2023 16:04:58 +0100 Subject: [PATCH 1/2] [Client] Add game selection view to start page Some changes in the existing code have been also made to avoid code duplication and fix some issues. Co-authored-by: Cazals Mathias --- truthseeker/static/css/game_ui.css | 2 +- truthseeker/static/css/game_ui_start.css | 117 ++++++++++++++++++++--- truthseeker/static/js/game_start_page.js | 33 +++++++ truthseeker/templates/index.html | 29 +++++- 4 files changed, 168 insertions(+), 13 deletions(-) create mode 100644 truthseeker/static/js/game_start_page.js diff --git a/truthseeker/static/css/game_ui.css b/truthseeker/static/css/game_ui.css index fca2a65..31e0096 100644 --- a/truthseeker/static/css/game_ui.css +++ b/truthseeker/static/css/game_ui.css @@ -53,7 +53,7 @@ body { /* Utility classes */ .hidden { - display: none; + display: none !important; } /* Links */ diff --git a/truthseeker/static/css/game_ui_start.css b/truthseeker/static/css/game_ui_start.css index 6f46adf..8142ec9 100644 --- a/truthseeker/static/css/game_ui_start.css +++ b/truthseeker/static/css/game_ui_start.css @@ -3,6 +3,32 @@ --header-actions-height: 3em; } +button { + background-color: transparent; + border: none; + cursor: pointer; + padding: 0; +} + +input { + background-color: white; + border: none; + border-radius: 1em; + font-family: "Titan One", sans-serif; + font-size: 1em; + padding: 0.5em; + color: black; +} + +input::placeholder { + color: black; + opacity: 0.5; +} + +.back_btn { + fill: #BD1E1E; +} + .game_begin { align-items: center; border-radius: 1.5em; @@ -30,19 +56,12 @@ font-family: "Spicy Rice", serif; font-weight: bold; font-size: 5em; - margin-block-start: 0; - margin-block-end: 0; - margin-top: 0.5em; - margin-bottom: 0.5em; + margin: 0.25em; text-align: center; } -.top_button { - background-color: transparent; - border: none; - fill: white; - cursor: pointer; - padding: 0; +.ingame { + margin: 0; } .header_actions { @@ -59,7 +78,6 @@ border-radius: var(--button-and-dialog-border-radius); cursor: pointer; font-family: "Titan One", sans-serif; - font-size: 3em; margin-left: auto; margin-right: auto; padding-top: 0.5em; @@ -75,3 +93,80 @@ transform: translate(0.1em, 0.1em); box-shadow: 10px -10px 25px 0px black, -10px 10px 25px 0px black; } + +.game_mode_selection { + align-items: center; + background-image: url("../images/start_background.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + height: 100vh; + justify-content: center; +} + +.game_mode_item { + margin: 0.5em; + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + align-items: center; +} + +.game_mode_item_title { + font-family: "Titan One", sans-serif; + font-size: 2em; + margin: 0.25em; +} + +.game_mode_item_input_text_single_line { + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.game_mode_items { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.game_mode_choice_selector { + background-color: black; + border-color: white; + border-style: solid; + border-radius: 1.5em; + padding: 1em; +} + +.theme_switcher { + fill: white; +} + +#back_button { + position: absolute; + left: 0; + top: 0; +} + +#create_room_button, #join_room_button, #start_solo_game_button { + font-size: 1.5em; +} + +#game_username { + margin: 0.5em; + width: calc(100% - 1.5em); +} + +#play_button { + font-size: 3em; +} diff --git a/truthseeker/static/js/game_start_page.js b/truthseeker/static/js/game_start_page.js new file mode 100644 index 0000000..3fc1586 --- /dev/null +++ b/truthseeker/static/js/game_start_page.js @@ -0,0 +1,33 @@ +/** + * Show the game selection view. + * + *

+ * The "hidden" class is added on the footer, the game_start elements and the game_mode_selection + * elements are show. The body margin is also set to 0 by adding the ingame class. + *

+ */ +function showGameModeSelection() { + document.getElementsByTagName("body")[0].classList.add("ingame"); + document.getElementsByTagName("footer")[0].classList.add("hidden"); + document.getElementsByClassName("game_start")[0].classList.add("hidden"); + document.getElementsByClassName("game_mode_selection")[0].classList.remove("hidden"); +} + +/** + * Show the game selection view. + * + *

+ * The "hidden" class is removed on the footer, the game_start elements and the game_mode_selection + * elements are hidden. The body margin is also set to its normal value by removing the ingame + * class. + *

+ */ +function hideGameModeSelection() { + document.getElementsByTagName("body")[0].classList.remove("ingame"); + document.getElementsByTagName("footer")[0].classList.remove("hidden"); + document.getElementsByClassName("game_start")[0].classList.remove("hidden"); + document.getElementsByClassName("game_mode_selection")[0].classList.add("hidden"); +} + +document.getElementById("play_button").addEventListener("click", showGameModeSelection); +document.getElementById("back_button").addEventListener("click", hideGameModeSelection); diff --git a/truthseeker/templates/index.html b/truthseeker/templates/index.html index 6802828..b594fe5 100644 --- a/truthseeker/templates/index.html +++ b/truthseeker/templates/index.html @@ -12,7 +12,7 @@
-
+

Navigateur non supporté

@@ -46,5 +72,6 @@
+ From 12a0626d649a324f1713300f6b191f6859763732 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Wed, 4 Jan 2023 10:03:27 +0100 Subject: [PATCH 2/2] [Client] Add initial interactions on the game selection view These interactions are checks of nickname and room code validity, where it is relevant. Also set a maximum room code length to 20 characters, at least for now. --- truthseeker/static/css/game_ui_start.css | 12 +++ truthseeker/static/js/game_start_page.js | 112 +++++++++++++++++++++++ truthseeker/templates/index.html | 3 +- 3 files changed, 126 insertions(+), 1 deletion(-) diff --git a/truthseeker/static/css/game_ui_start.css b/truthseeker/static/css/game_ui_start.css index 8142ec9..a160f98 100644 --- a/truthseeker/static/css/game_ui_start.css +++ b/truthseeker/static/css/game_ui_start.css @@ -148,6 +148,18 @@ input::placeholder { padding: 1em; } +.game_start_failed { + color: #BD1E1E; + font-family: "Roboto Mono", sans-serif; + font-size: 1em; + font-size: 1.5em; + font-weight: bold; + margin-bottom: 0.25em; + margin-left: 0.5em; + margin-top: 0.25em; + margin-right: 0.5em; +} + .theme_switcher { fill: white; } diff --git a/truthseeker/static/js/game_start_page.js b/truthseeker/static/js/game_start_page.js index 3fc1586..4df0062 100644 --- a/truthseeker/static/js/game_start_page.js +++ b/truthseeker/static/js/game_start_page.js @@ -29,5 +29,117 @@ function hideGameModeSelection() { document.getElementsByClassName("game_mode_selection")[0].classList.add("hidden"); } +/** + * Hide an error message on the first game_start_failed CSS element. + * + *

+ * The element will be hidden by removing the hidden CSS class on the element. + *

+ */ +function hideInvalidInputErrorMessage() { + document.getElementsByClassName("game_start_failed")[0].classList.add("hidden"); +} + +/** + * Show an error message on the first game_start_failed CSS element. + * + *

+ * The current error message text will be replaced by the given message and the element will be + * shown, by removing the hidden CSS class on the element. + *

+ * + * @param {boolean} errorMessage the error message to show + */ +function showInvalidInputErrorMessage(errorMessage) { + let gameStartFailedElement = document.getElementsByClassName("game_start_failed")[0]; + gameStartFailedElement.textContent = errorMessage; + gameStartFailedElement.classList.remove("hidden"); +} + +/** + * Determine whether a nickname is invalid. + * + *

+ * A nickname is invalid when it only contains spaces characters or is empty. + *

+ * + * @returns whether a nickname is invalid + */ +function isNickNameInvalid() { + return document.getElementById("game_username").value.trim() == ""; +} + +/** + * Determine whether a room code is invalid. + * + *

+ * A room code is invalid when it only contains spaces characters or is empty. + *

+ * + * @returns whether a room code is invalid + */ +function isRoomCodeInvalid() { + return document.getElementById("game_room_code").value.trim() == ""; +} + +/** + * Determine whether nickname and/or room code inputs are valid. + * + *

+ * The nickname validity is always checked, while the room code validity is checked only when + * checkRoomCode is true (because when creating a room or playing on a solo match, the room code is + * not used so checking it would be useless and would require a valid room code). + *

+ * + * @param {boolean} checkRoomCode whether the room code input should be checked + * @returns whether the checked inputs are valid + */ +function areInputsValid(checkRoomCode) { + if (isNickNameInvalid()) { + showInvalidInputErrorMessage("Le nom saisi n'est pas valide."); + return false; + } + + if (checkRoomCode && isRoomCodeInvalid()) { + showInvalidInputErrorMessage("Le code de salon saisi n'est pas valide."); + return false; + } + + return true; +} + +function startSoloGame() { + if (!areInputsValid(false)) { + return; + } + + hideInvalidInputErrorMessage(); + + //TODO: code to start solo game +} + +function createMultiPlayerRoom() { + if (!areInputsValid(false)) { + return; + } + + hideInvalidInputErrorMessage(); + + //TODO: code to create multi player game +} + +function joinMultiPlayerRoom() { + if (!areInputsValid(true)) { + return; + } + + hideInvalidInputErrorMessage(); + + //TODO: code to join multi player game +} + 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); diff --git a/truthseeker/templates/index.html b/truthseeker/templates/index.html index b594fe5..c5cb68b 100644 --- a/truthseeker/templates/index.html +++ b/truthseeker/templates/index.html @@ -31,6 +31,7 @@

Thruth Inquiry

+
@@ -42,7 +43,7 @@

Code :

- +