Merge branch 'main' of gitschool:ThomasRubini/SAE-A2-TruthInquiry

truthinquiry/static/css/game_ui.css

@@ -31,10 +31,9 @@
     /* Colors */
     color-scheme: dark;
     --alert-dialog-background-color: #000000DF;
-    --button-links-gray-color: #939393;
     --dark-theme-background-color: #213C40;
     --game-black: #000000;
-    --game-blue: #0096FF;
+    --game-blue: #7DDCFF;
     --game-green: #008000;
     --game-grey: #5A5656;
     --game-red: #BD1E1E;
@@ -54,6 +53,10 @@ body {
     margin: var(--body-margin);
 }
 
+noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_dialog_title {
+    display: block;
+}
+
 .action_button {
     background-color: var(--game-red);
     border-color: var(--game-black);
@@ -100,21 +103,23 @@ body {
 /* Footer */
 .footer_link {
     color: var(--game-white);
-    font-family: sans-serif;
+    font-family: "Roboto Mono", sans-serif;
     font-size: 1em;
     font-weight: bold;
     margin: 0.5em;
+    text-align: center;
     transition: color 0.25s;
 }
 
 .footer_link:hover {
-    color: var(--button-links-gray-color);
+    color: var(--game-black);
 }
 
 .footer_links {
+    align-items: center;
+    align-self: flex-end;
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     height: var(--footer-links-height);
     justify-content: flex-end;
 }
@@ -130,6 +135,8 @@ body {
 
 /* Alert dialogs */
 .alert_dialog {
+    background-color: var(--game-grey);
+    border-color: var(--game-white);
     border-radius: var(--button-and-dialog-border-radius);
     display: none;
     font-family: "Spicy Rice", serif;
@@ -137,6 +144,7 @@ body {
     flex-wrap: nowrap;
     justify-content: center;
     left: 50%;
+    overflow: auto;
     padding: 2em;
     position: absolute;
     top: 50%;
@@ -149,6 +157,8 @@ body {
 }
 
 .alert_dialog_title {
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
     font-size: 2em;
     font-weight: normal;
     text-align: center;

truthinquiry/static/css/game_ui_game.css

@@ -81,6 +81,10 @@ html {
     margin: 0.25em;
 }
 
+.home_button, .next_btn, .suspects {
+    padding: 0;
+}
+
 .home_button, .next_btn, .suspect_emotion_chooser {
     border: none;
 }
@@ -101,6 +105,10 @@ html {
     margin: 1em;
 }
 
+.suspect {
+    list-style-type: none;
+}
+
 .suspect_picture {
     height: 15em;
     width: 15em;
@@ -118,7 +126,6 @@ html {
 .home_button, .next_btn {
     fill: var(--game-red);
     height: 5em;
-    padding: 0;
     width: 5em;
 }
 
@@ -192,13 +199,8 @@ html {
 .culprit_icon {
     fill: var(--game-white);
     height: 1em;
-    width: 1em;
-}
-
-.culprit_btn_text {
-    margin: 0;
-    margin-left: 0.25em;
     margin-right: 0.25em;
+    width: 1em;
 }
 
 .culprit_btn_checked {

truthinquiry/static/css/game_ui_legal.css

@@ -1,10 +1,21 @@
 /* Common properties */
 html {
-    background-color: var(--game-black);
+    background-color: var(--game-grey);
     color: var(--game-white);
     font-family: "Roboto Mono", "sans-serif";
 }
 
+body {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - var(--body-margin) * 2);
+    width: calc(100vw - var(--body-margin) * 2);
+}
+
+footer {
+    margin-top: auto;
+}
+
 /* Legal links and texts */
 .legal_text_description, .legal_text_last_update, .legal_text_title {
     margin: 0;

truthinquiry/static/css/game_ui_start.css

@@ -1,13 +1,18 @@
 /* Common properties */
 :root {
     --game-begin-margin: 2em;
-    --header-actions-height: 3em;
+    --header-actions-side: 4em;
 }
 
 input, .action_button, .game_mode_item_title {
     font-family: "Titan One", sans-serif;
 }
 
+.back_button, .theme_switcher_btn {
+    height: var(--header-actions-side);
+    width: var(--header-actions-side);
+}
+
 .game_begin, .game_mode_item, .game_mode_item_input_text_single_line, .game_mode_items, .game_mode_selection {
     align-items: center;
     display: flex;
@@ -61,7 +66,7 @@ input::placeholder {
     */
     height: calc(100vh - var(--body-margin) * 2
         - var(--game-begin-margin) * 2
-        - var(--header-actions-height)
+        - var(--header-actions-side)
         - var(--footer-links-height));
     justify-content: center;
     margin: var(--game-begin-margin);
@@ -80,10 +85,16 @@ input::placeholder {
     margin: 0;
 }
 
+.header_action {
+    list-style-type: none;
+}
+
 .header_actions {
     display: flex;
-    height: var(--header-actions-height);
+    height: var(--header-actions-side);
     justify-content: flex-end;
+    margin: 0;
+    padding: 0;
 }
 
 .action_button {

truthinquiry/static/js/game.js

@@ -74,9 +74,12 @@ function showEmotionAndCulpritChoicesView() {
 }
 
 /**
- * Parse the gamedata object to retreive the room in which the npc passed as parameter is
+ * Parse the gamedata object to retreive the room in which the npc passed as parameter is located
- * located and the second npc located in the same room. When the passed npc is alone in the
+ * and the second npc located in the same room.
- * room, a npc is choosen at random as the returned partener
+ *
+ * <p>
+ * When the passed npc is alone in the room, a npc is chosen at random as the returned partener.
+ * </p>
  */
 function getNpcLocationAndPartner(npcid) {
     const data = {};
@@ -102,9 +105,12 @@ function getNpcLocationAndPartner(npcid) {
 }
 
 /**
- * Parse the gamedata object to retreive the room in which the npc passed as parameter is
+ * Parse the gamedata object to retreive the room in which the npc passed as parameter is located
- * located and the second npc located in the same room. When the passed npc is alone in the
+ * and the second npc located in the same room.
- * room, a npc is choosen at random as the returned partener
+ *
+ * <p>
+ * When the passed npc is alone in the room, a npc is chosen at random as the returned partner.
+ * </p>
  */
 function disableCulpritButtons(culprit_choices_element, selected_suspect) {
     let childrenCulpritChoicesElement = culprit_choices_element.children;
@@ -123,8 +129,8 @@ function disableCulpritButtons(culprit_choices_element, selected_suspect) {
 }
 
 /**
- * Return the npc designed as the "culprit" of the crime, the culprit
+ * Return the npc designed as the "culprit" of the crime, the culprit is determined by being the
- * is determined by being the only npc alone in a room.
+ * only npc alone in a room.
  */
 function getCulprit() {
     let culprit = null;
@@ -140,8 +146,8 @@ function getCulprit() {
 }
 
 /**
- * handler for the function call "askQuestion" for a type_zero question
+ * Handler for the function call {@link askQuestion} for a type_zero question also known as
- * also known as "Where were you ?"
+ * "Where were you ?".
  */
 async function askTypeZeroQuestion() {
     askQuestion(npcLocationAndPartner => gameData["npcs"][currentNpc]["QA_0"].replace(
@@ -149,8 +155,8 @@ async function askTypeZeroQuestion() {
 }
 
 /**
- * handler for the function call "askQuestion" for a type_one question
+ * Handler for the function call {@link askQuestion} for a type_one question also known as
- * also known as "With who were you with ?"
+ * "With who were you with ?".
  */
 async function askTypeOneQuestion() {
     askQuestion(npcLocationAndPartner => gameData["npcs"][currentNpc]["QA_1"].replace(
@@ -158,11 +164,14 @@ async function askTypeOneQuestion() {
 }
 
 /**
- * This function primary goal is to display the answer to the question the player
+ * This function's primary goal is to display the answer to the question the player
- * asked to a npc. 
+ * asked to a npc.
- * It parses the gamedata object to retreive the answer of the npc
+ *
- * and fill the variables left in the string accordingly to the type of the question.
+ * <p>
- * Then it fetches the reacion of the npc and diplays it all.
+ * It parses the gamedata object to retreive the answer of the npc and fill the variables left in
+ * the string accordingly to the type of the question; then it fetches the reacion of the npc and
+ * diplays it all.
+ * </p>
  */
 async function askQuestion(buildAnswer) {
     unsetQuestionButtonsListeners();
@@ -187,7 +196,7 @@ async function askQuestion(buildAnswer) {
 }
 
 /**
- * This function sends the player's answers to the server
+ * Send the player's answers to the server.
  */
 async function sendAnswers() {
     const selections = document.getElementsByClassName("suspect_emotion_chooser");
@@ -209,8 +218,10 @@ async function sendAnswers() {
  * then decide on which npc is the culprit.
  */
 function renderAnswerSelectionPanel() {
+    const culpritChoices = document.getElementById("culprits_choices");
+
     npcsIds.forEach(element => {
-        const suspect = document.createElement("div");
+        const suspect = document.createElement("li");
         suspect.classList.add("suspect");
 
         const suspectEmotionChooser = document.createElement("select");
@@ -228,14 +239,20 @@ function renderAnswerSelectionPanel() {
 
         const img = document.createElement('img');
         img.classList.add("suspect_picture");
+        img.setAttribute("alt", "Image d'un suspect");
         img.src = NPC_IMAGE_PATH + element;
         suspect.appendChild(img);
 
         const button = document.createElement("button");
         button.classList.add("culprit_btn", "action_button");
-        button.innerHTML = '<svg class="culprit_checked_icon hidden culprit_icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48"><path d="M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z"></path></svg><svg class="culprit_unchecked_icon culprit_icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48"><path d="M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z"></svg><p class="culprit_btn_text">Couplable</p>';
 
-        const culpritChoices = document.getElementById("culprits_choices");
+        button.appendChild(createCulpritSvgElement("culprit_checked_icon",
+            "M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z", true));
+        button.appendChild(createCulpritSvgElement("culprit_unchecked_icon",
+            "M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z",
+            false));
+
+        button.appendChild(document.createTextNode("Couplable"));
 
         button.addEventListener("click", () => {
             disableCulpritButtons(culpritChoices, suspect);
@@ -248,7 +265,30 @@ function renderAnswerSelectionPanel() {
 }
 
 /**
- * Show the screen in which the player asks auestions to the npcs
+ * Create a culprit SVG {@link Element}.
+ *
+ * @param {String} buttonCssClass     the specific CSS class to add to the culprit button
+ * @param {String} pathAttributeValue the value of the path attribute of the SVG element generated
+ * @returns a svg {@link Element} with a culprit button depending of the custom CSS class, path
+ * attribute value and isHidden values
+ */
+function createCulpritSvgElement(buttonCssClass, pathAttributeValue, isHidden) {
+    const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svgElement.classList.add(buttonCssClass, "culprit_icon");
+    if (isHidden) {
+        svgElement.classList.add("hidden");
+    }
+    svgElement.setAttribute("viewBox", "0 0 48 48");
+
+    const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    pathElement.setAttribute("d", pathAttributeValue);
+
+    svgElement.appendChild(pathElement);
+    return svgElement;
+}
+
+/**
+ * Show the screen in which the player asks questions to the npcs.
  */
 function renderInterrogation() {
     document.getElementById("QA_0").textContent = gameData["questions"]["QA_0"];
@@ -257,11 +297,12 @@ function renderInterrogation() {
     const interrogationSuspects = document.getElementById("interrogation_suspects");
 
     npcsIds.forEach(element => {
-        const suspect = document.createElement("div");
+        const suspect = document.createElement("li");
         suspect.classList.add("suspect");
 
         const img = document.createElement('img');
         img.classList.add("suspect_picture");
+        img.setAttribute("alt", "Image d'un suspect");
         img.src = NPC_IMAGE_PATH + element;
         suspect.appendChild(img);
 
@@ -281,12 +322,14 @@ function renderInterrogation() {
     });
 }
 
-
 /**
- * Initialize the websocket for this page, its primary use is to
+ * Initialize the websocket for this page, its primary use is to show the final page once it
- * show the final page once it receive the event that all player have finished
+ * receives the event that all players have finished.
- * it parses the payload send by the server containing the other players
+ *
+ * <p>
+ * It parses the payload send by the server containing the other players
  * nicknames and scores.
+ * </p>
  */
 function initSock() {
     const socket = io({
@@ -306,9 +349,12 @@ function initSock() {
     
     socket.on("gamefinished", finalResults => {
         hideFirstClassElement("emotion_and_culprit_choices");
-        document.querySelector(".reveal_score").textContent =
+        const revealScoreElement = document.createElement("h2");
-            Object.values(finalResults["player"][username])
+        revealScoreElement.classList.add("reveal_score");
-                .filter(x => x == true).length + " / 5";
+        revealScoreElement.textContent = Object.values(finalResults["player"][username])
+            .filter(x => x == true).length + " / 5";
+
+        document.querySelector(".player_score").appendChild(revealScoreElement);
 
         const playerListElement = document.querySelector(".players_list");
 
@@ -331,9 +377,14 @@ function initSock() {
         const culpritName = gameData["npcs"][culprit]["name"];
         document.querySelector(".reveal_culprit_title").textContent += " " + culpritName;
 
-        const culpritElement = document.getElementById("culprit");
+        const culpritElement = document.createElement("img");
-        culpritElement.src = NPC_IMAGE_PATH + culprit;
+        culpritElement.classList.add("suspect_picture");
         culpritElement.setAttribute("alt", "Image du ou de la coupable, " + culpritName);
+        culpritElement.src = NPC_IMAGE_PATH + culprit;
+        culpritElement.setAttribute("draggable", "false");
+
+        document.querySelector(".reveal_culprit")
+            .appendChild(culpritElement);
 
         showFirstClassElement("results_game");
         setGameBackground(RESULTS_IMAGE_PATH);
@@ -346,6 +397,7 @@ function initSock() {
                 suspect.classList.add("summary_suspect");
 
                 const img = document.createElement("img");
+                img.setAttribute("alt", "Image d'un suspect");
                 img.src = NPC_IMAGE_PATH + npcid;
                 suspect.appendChild(img);
 
@@ -366,12 +418,11 @@ function initSock() {
             });
     });
 }
-/** 
- * This function retreive the initial gamedata of the game
- * containing all of the needed textual ressources to make
- * the game playable
-*/
 
+/**
+ * Retreive the initial gamedata of the game containing all of the needed textual ressources to
+ * make the game playable.
+ */
 async function setGameData() {
     const response = await makeAPIRequest("getGameData");
     gameData = response["gamedata"];
@@ -380,7 +431,7 @@ async function setGameData() {
 }
 
 /**
- * Initialize the game, by setting the game data, initializing the socket, rendering the answer
+ * Initialize the game by setting the game data, initializing the socket, rendering the answer
  * selection panel, rendering the interrogation view, setting questions buttons listeners,
  * setting introduction and interrogation listeners, showing the introduction view and setting the
  * introduction image as the game background.

truthinquiry/templates/errorhandler.html

@@ -1,2 +1,20 @@
-<img src="{{url}}">
+<!DOCTYPE html>
-<p> {{desc}} </p>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Truth Inquiry - Error</title>
+        <link rel="icon" href="/static/images/favicon/favicon_32.png" type="image/png" sizes="32x32">
+        <link rel="icon" href="/static/images/favicon/favicon_64.png" type="image/png" sizes="64x64">
+        <link rel="icon" href="/static/images/favicon/favicon_96.png" type="image/png" sizes="96x96">
+        <link rel="icon" href="/static/images/favicon/favicon_128.png" type="image/png" sizes="128x128">
+        <link rel="icon" href="/static/images/favicon/favicon_192.png" type="image/png" sizes="192x192">
+        <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="256x256">
+        <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
+        <meta name="color-scheme" content="dark light">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+    </head>
+    <body>
+        <img src="{{url}}" alt="Image describing a HTTP error">
+        <p>{{desc}}</p>
+    </body>
+</html>

truthinquiry/templates/game.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
     <head>
+        <meta charset="UTF-8">
         <title>Truth Inquiry</title>
         <link rel="stylesheet" href="/static/css/game_ui.css">
         <link rel="stylesheet" href="/static/css/game_ui_game.css">
@@ -13,92 +14,83 @@
         <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
         <meta name="color-scheme" content="dark light">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta charset="UTF-8">
     </head>
     <body class="game_app">
         <div class="current_background"></div>
-        <div class="introduction hidden">
+        <section class="introduction hidden">
             <h1 class="introduction_title">Truth Inquiry</h1>
             <p class="introduction_text">Bienvenue dans Truth Inquiry, vous allez intégrer la peau d’un enquêteur.<br><br>Vous avez été donné responsable de résoudre une enquête et devez trouver le coupable d’un vol.<br><br>Cliquez sur la flèche pour découvrir les suspects et les interroger.</p>
-            <button id="introduction_next_btn" class="next_btn" aria-label="Commencer">
+            <button id="introduction_next_btn" class="next_btn" aria-label="Commencer" title="Cliquez ici pour commencer à jouer">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
+                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z" />
                 </svg>
             </button>
-        </div>
+        </section>
-        <div class="interrogation hidden">
+        <section class="interrogation hidden">
             <h1 class="interrogation_title">Suspects</h1>
-            <button id="interrogation_next_btn" class="next_btn" aria-label="Passer à la suite">
+            <button id="interrogation_next_btn" class="next_btn" aria-label="Passer à la suite" title="Cliquez ici pour passer à la suite">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
+                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z" />
                 </svg>
             </button>
-            <div class="suspects" id="interrogation_suspects">
+            <ul class="suspects" id="interrogation_suspects"></ul>
-            </div>
+        </section>
-        </div>
+        <section class="emotion_and_culprit_choices hidden">
-        <div class="emotion_and_culprit_choices hidden">
             <h1 class="emotion_and_culprit_choices_title">Choix du coupable et émotion des suspects</h1>
-            <button id="emotion_and_culprit_choices_next_btn" class="next_btn hidden" aria-label="Passer à la suite">
+            <button id="emotion_and_culprit_choices_next_btn" class="next_btn hidden" aria-label="Passer à la suite" title="Cliquez ici pour passer à la suite">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
+                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z" />
                 </svg>
             </button>
-            <div class="suspects" id="culprits_choices">
+            <ul class="suspects" id="culprits_choices"></ul>
-            </div>
+        </section>
-        </div>
+        <section class="interrogation_suspect hidden">
-        <div class="interrogation_suspect hidden">
             <h1 class="interrogation_title">Poser une question au suspect</h1>
             <div class="questions_and_image">
-                <button id="interrogation_suspect_previous_btn" class="next_btn" aria-label="Revenir à la sélection du suspect">
+                <button id="interrogation_suspect_previous_btn" class="next_btn" aria-label="Revenir à la sélection du suspect" title="Cliquez ici pour revenir à la sélection du suspect">
                     <svg class="next_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-                        <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z"/>
+                        <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z" />
                     </svg>
                 </button>
-                <img class="image_interrogation suspect_picture" id="currentNpcPicure" src="">
+                <img class="image_interrogation suspect_picture" id="currentNpcPicure" alt="Image du suspect en cours d'interrogation" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
                 <div class="questions_list">
-                    <button class="action_button question_button" id="QA_0" >Où étiez vous hier soir&nbsp;?</button>
+                    <button class="action_button question_button" id="QA_0">Où étiez vous hier soir&nbsp;?</button>
-                    <button class="action_button question_button" id="QA_1" >Avec qui étiez vous&nbsp;?</button>
+                    <button class="action_button question_button" id="QA_1">Avec qui étiez vous&nbsp;?</button>
                 </div>
             </div>
             <div class="question_answer hidden">
                 <h1 class="anwser_title">Réponse du suspect à la question</h1>
                 <p class="suspect_answer"></p>
             </div>
-        </div>
+        </section>
-        <div class="results_game hidden">
+        <section class="results_game hidden">
             <h1 class="results_title">Résultats</h1>
-            <a href="/" title="Cliquez ici pour revenir à la page d'accueil du jeu">
+            <a id="return_to_home_btn" class="home_button" href="/" aria-label="Revenir à la page d'accueil du jeu" title="Cliquez ici pour revenir à la page d'accueil du jeu">
-                <button id="return_to_home_btn" class="home_button" aria-label="Revenir à la page d'accueil du jeu">
+                <svg class="home_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-                    <svg class="home_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+                    <path d="M6.9 43.1V17.4L24 4.55 41.15 17.4v25.7h-12.9V27.7h-8.5v15.4Z" />
-                        <path d="M6.9 43.1V17.4L24 4.55 41.15 17.4v25.7h-12.9V27.7h-8.5v15.4Z"/>
+                </svg>
-                    </svg>
-                </button>
             </a>
             <div class="reveal_and_scores">
                 <div class="scores">
                     <div class="player_score">
                         <h1 class="score_title">Votre score est de&nbsp;:</h1>
-                        <h2 class="reveal_score">4/5</h2>
                     </div>
                     <div class="results_game_multiplayer">
-                        <div class="players_list">
+                        <div class="players_list"></div>
-                        </div>
                     </div>
                 </div>
                 <div class="reveal_culprit">
-                    <h2 class="reveal_culprit_title">Le coupable était ...</h2>
+                    <h2 class="reveal_culprit_title">Le coupable était&nbsp;...</h2>
-                    <img class="suspect_picture" id="culprit" draggable="false">
                 </div>
             </div>
             <div class="summary">
                 <h1 class="summary_title">Débrief</h1>
-                <div class="suspects_list">
+                <div class="suspects_list"></div>
-                </div>
             </div>
-        </div>    
+        </section>
         <div class="alert_dialog_background"></div>
-        <div class="unsupported_browser">
+        <section class="unsupported_browser">
-            <div id="unsupported_browser_dialog" class="alert_dialog">
+            <dialog id="unsupported_browser_dialog" class="alert_dialog">
                 <h3 class="alert_dialog_title">Navigateur non supporté</h3>
                 <p class="alert_dialog_msg unsupported_browser_msg"></p>
                 <div class="footer_links">
@@ -106,21 +98,21 @@
                     <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                     <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                 </div>
-            </div>
+            </dialog>
-        </div>
+        </section>
         <noscript>
-            <div class="alert_dialog_background" style="display: block;"></div>
+            <div class="alert_dialog_background"></div>
-            <div class="js_requirement">
+            <section class="js_requirement">
-                <div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
+                <dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
-                    <h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
+                    <h3 class="alert_dialog_title">JavaScript nécessaire</h3>
-                    <p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
+                    <p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
                     <div class="footer_links">
                         <a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
                         <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                         <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                     </div>
-                </div>
+                </dialog>
-            </div>
+            </section>
         </noscript>
         <script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
         <script src="/static/js/api.js"></script>

truthinquiry/templates/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
     <head>
+        <meta charset="UTF-8">
         <title>Truth Inquiry</title>
         <link rel="stylesheet" href="/static/css/game_ui.css">
         <link rel="stylesheet" href="/static/css/game_ui_start.css">
@@ -13,26 +14,26 @@
         <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
         <meta name="color-scheme" content="dark light">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta charset="UTF-8">
     </head>
     <body class="game_app">
-        <div class="alert_dialog_background"></div>
+        <section class="game_start">
-        <div class="game_start">
+            <menu class="header_actions">
-            <div class="header_actions">
+                <li class="header_action">
-                <button class="theme_switcher" aria-label="Changer de thème">
+                    <button class="theme_switcher" aria-label="Changer de thème">
-                    <svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                        <svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-                        <path d="M24 34q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM2 25.5v-3h8v3Zm36 0v-3h8v3ZM22.5 10V2h3v8Zm0 36v-8h3v8Zm-9.45-30.85L8.1 10.2l2.1-2.1 4.95 4.95ZM37.8 39.9l-4.95-4.95 2.1-2.1 4.95 4.95Zm-2.85-24.75-2.1-2.1L37.8 8.1l2.1 2.1ZM10.2 39.9l-2.1-2.1 4.95-4.95 2.1 2.1Z"/>
+                            <path d="M24 34q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM2 25.5v-3h8v3Zm36 0v-3h8v3ZM22.5 10V2h3v8Zm0 36v-8h3v8Zm-9.45-30.85L8.1 10.2l2.1-2.1 4.95 4.95ZM37.8 39.9l-4.95-4.95 2.1-2.1 4.95 4.95Zm-2.85-24.75-2.1-2.1L37.8 8.1l2.1 2.1ZM10.2 39.9l-2.1-2.1 4.95-4.95 2.1 2.1Z"/>
-                    </svg>
+                        </svg>
-                </button>
+                    </button>
-            </div>
+                </li>
+            </menu>
             <div class="game_begin">
                 <h1 class="game_title">Truth Inquiry</h1>
                 <button class="action_button" id="play_button">Jouer</button>
             </div>
-        </div>
+        </section>
-        <div class="game_mode_selection hidden">
+        <section class="game_mode_selection hidden">
             <button id="back_button" aria-label="Retourner à la page précédente">
-                <svg class="back_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                <svg class="back_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                     <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z"/>
                 </svg>
             </button>
@@ -56,9 +57,10 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
-        <div class="unsupported_browser">
+        <div class="alert_dialog_background"></div>
-            <div id="unsupported_browser_dialog" class="alert_dialog">
+        <section class="unsupported_browser">
+            <dialog id="unsupported_browser_dialog" class="alert_dialog">
                 <h3 class="alert_dialog_title">Navigateur non supporté</h3>
                 <p class="alert_dialog_msg unsupported_browser_msg"></p>
                 <div class="footer_links">
@@ -66,21 +68,21 @@
                     <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                     <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                 </div>
-            </div>
+            </dialog>
-        </div>
+        </section>
         <noscript>
-            <div class="alert_dialog_background" style="display: block;"></div>
+            <div class="alert_dialog_background"></div>
-            <div class="js_requirement">
+            <section class="js_requirement">
-                <div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
+                <dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
-                    <h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
+                    <h3 class="alert_dialog_title">JavaScript nécessaire</h3>
-                    <p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
+                    <p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
                     <div class="footer_links">
                         <a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
                         <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                         <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                     </div>
-                </div>
+                </dialog>
-            </div>
+            </section>
         </noscript>
         <footer>
             <div class="footer_links">

truthinquiry/templates/legal.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
     <head>
+        <meta charset="UTF-8">
         <title>Truth Inquiry - Mentions légales</title>
         <link rel="stylesheet" href="/static/css/game_ui.css">
         <link rel="stylesheet" href="/static/css/game_ui_legal.css">
@@ -13,7 +14,6 @@
         <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
         <meta name="color-scheme" content="dark light">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta charset="UTF-8">
     </head>
     <body>
         <h1 class="legal_text_title">Mentions légales</h1>

truthinquiry/templates/licenses.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
     <head>
+        <meta charset="UTF-8">
         <title>Truth Inquiry - Licenses et crédits</title>
         <link rel="stylesheet" href="/static/css/game_ui.css">
         <link rel="stylesheet" href="/static/css/game_ui_legal.css">
@@ -13,7 +14,6 @@
         <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
         <meta name="color-scheme" content="dark light">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta charset="UTF-8">
     </head>
     <body>
         <h1 class="legal_text_title">Licenses et crédits de Truth Inquiry</h1>

truthinquiry/templates/lobby.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
     <head>
+        <meta charset="UTF-8">
         <title>Truth Inquiry - Salon</title>
         <link rel="stylesheet" href="/static/css/game_ui.css">
         <link rel="stylesheet" href="/static/css/game_ui_lobby.css">
@@ -13,11 +14,10 @@
         <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
         <meta name="color-scheme" content="dark light">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta charset="UTF-8">
     </head>
     <body class="game_app">
-        <input type="hidden" id="game_id" name="game_id" value={{gameid}} />
+        <input type="hidden" id="game_id" name="game_id" value={{gameid}}>
-        <div class="join_room_view hidden">
+        <section class="join_room_view hidden">
             <h1 class="room_title">Salon</h1>
             <div class="unjoinded_players_list">
                 <h2 class="players_title">Joueurs</h2>
@@ -26,8 +26,8 @@
             <input type="text" id="game_username" placeholder="Entrez un pseudo" value="" required="required" maxlength="20">
             <button id="join_game_button" class="action_button">Rejoindre</button>
             <p class="game_start_failed hidden">Une erreur s'est produite. Réessayez ultérieurement.</p>
-        </div>
+        </section>
-        <div class="room_view hidden">
+        <section class="room_view hidden">
             <div class="room_view_container">
                 <h1 class="room_title">Salon</h1>
                 <div class="room_code_text hidden">
@@ -57,10 +57,10 @@
                 </div>
                 <h3 class="multi_player_mode_waiting_for_host hidden">En attente du démarrage de la partie par l'hôte&nbsp;…</h3>
             </div>
-        </div>
+        </section>
         <div class="alert_dialog_background"></div>
-        <div class="unsupported_browser">
+        <section class="unsupported_browser">
-            <div id="unsupported_browser_dialog" class="alert_dialog">
+            <dialog id="unsupported_browser_dialog" class="alert_dialog">
                 <h3 class="alert_dialog_title">Navigateur non supporté</h3>
                 <p class="alert_dialog_msg unsupported_browser_msg"></p>
                 <div class="footer_links">
@@ -68,21 +68,21 @@
                     <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
                     <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
                 </div>
-            </div>
+            </dialog>
-        </div>
+        </section>
         <noscript>
-            <div class="alert_dialog_background" style="display: block;"></div>
+            <div class="alert_dialog_background"></div>
-            <div class="js_requirement">
+            <section class="js_requirement">
-                <div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
+                <dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
-                    <h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
+                    <h3 class="alert_dialog_title">JavaScript nécessaire</h3>
-                    <p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
+                    <p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
-                </div>
+                    <div class="footer_links">
-                <div class="footer_links">
+                        <a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
-                    <a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
+                        <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
-                    <a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
+                        <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
-                    <a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
+                    </div>
-                </div>
+                </dialog>
-            </div>
+            </section>
         </noscript>
         <script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
         <script src="/static/js/api.js"></script>

truthinquiry/templates/privacy.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
     <head>
+        <meta charset="UTF-8">
         <title>Truth Inquiry - Politique de confidentialité</title>
         <link rel="stylesheet" href="/static/css/game_ui.css">
         <link rel="stylesheet" href="/static/css/game_ui_legal.css">
@@ -13,7 +14,6 @@
         <link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
         <meta name="color-scheme" content="dark light">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta charset="UTF-8">
     </head>
     <body>
         <h1 class="legal_text_title">Politique de confidentialité de Truth Inquiry</h1>