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 @@