[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

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

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.
+ *
+ * <p>
+ * The element will be hidden by removing the hidden CSS class on the element.
+ * </p>
+ */
+function hideInvalidInputErrorMessage() {
+    document.getElementsByClassName("game_start_failed")[0].classList.add("hidden");
+}
+
+/**
+ * Show an error message on the first game_start_failed CSS element.
+ *
+ * <p>
+ * 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.
+ * </p>
+ *
+ * @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.
+ *
+ * <p>
+ * A nickname is invalid when it only contains spaces characters or is empty.
+ * </p>
+ *
+ * @returns whether a nickname is invalid
+ */
+function isNickNameInvalid() {
+    return document.getElementById("game_username").value.trim() == "";
+}
+
+/**
+ * Determine whether a room code is invalid.
+ *
+ * <p>
+ * A room code is invalid when it only contains spaces characters or is empty.
+ * </p>
+ *
+ * @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.
+ *
+ * <p>
+ * 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).
+ * </p>
+ *
+ * @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);

truthseeker/templates/index.html

@@ -31,6 +31,7 @@
             </button>
             <h1 class="game_title">Thruth Inquiry</h1>
             <div class="game_mode_choice_selector">
+                <p class="game_start_failed hidden">Une erreur s'est produite. Réessayez ultérieurement.</p>
                 <input type="text" id="game_username" placeholder="Entrez un pseudo" value="" required="required" maxlength="20">
                 <div class="game_mode_items">
                     <div class="game_mode_item">
@@ -42,7 +43,7 @@
                         <button class="action_button" id="create_room_button">Créer un salon</button>
                         <div class="game_mode_item_input_text_single_line">
                             <h3 class="game_mode_item_title">Code&nbsp;:</h3>
-                            <input type="text" id="game_room_code" placeholder="" value="" required="required">
+                            <input type="text" id="game_room_code" placeholder="" value="" required="required" maxlength="20">
                         </div>
                         <button class="action_button" id="join_room_button">Rejoindre</button>
                     </div>