From 0920e5546bc493195c590dc8151370621d5eb1eb Mon Sep 17 00:00:00 2001
From: AudricV <74829229+AudricV@users.noreply.github.com>
Date: Sat, 14 Jan 2023 17:49:47 +0100
Subject: [PATCH] [Client] Improve game HTML page

- Remove unused elements;
- Improve some comments and elements.
---
 truthseeker/templates/game.html | 70 ++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/truthseeker/templates/game.html b/truthseeker/templates/game.html
index 3e8618a..4b8b786 100644
--- a/truthseeker/templates/game.html
+++ b/truthseeker/templates/game.html
@@ -27,7 +27,7 @@
                 </svg>
             </button>
             <div class="suspects">
-                <!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
+                <!-- TODO: model, remove from HTML and add it dynamically with JavaScript for each suspect -->
                 <div class="suspect">
                     <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
                     <button class="ask_button action_button">Interroger</button>
@@ -42,9 +42,10 @@
                 </svg>
             </button>
             <div class="suspects">
-                <!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
+                <!-- TODO: model, remove from HTML and add it dynamically with JavaScript for each suspect -->
                 <div class="suspect">
                     <select class="suspect_emotion_chooser" required="required">
+                        <!-- This is the place holder value-->
                         <option value="">Choisissez une émotion</option>
                         <!-- Add other emotions here -->
                     </select>
@@ -65,69 +66,66 @@
         </div>
         <div class="interrogation_suspect hidden">
             <h1 class="interrogation_title">Poser une question au suspect</h1>
+            <button id="interrogation_suspect_previous_btn" class="next_btn" aria-label="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"/>
+                </svg>
+            </button>
             <div class="questions_list">
                 <button class="action_button question_button">Où étiez vous hier soir&nbsp;?</button>
                 <button class="action_button question_button">Avec qui étiez vous&nbsp;?</button>
-                <button id="next_button" aria-label="Retourner à la selection du suspect">
-                <svg class="next_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="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>
             </div>
-            <div class="question_answer">
+            <div class="question_answer hidden">
                 <h1 class="anwser_title">Réponse du suspect à la question</h1>
                 <p class="suspect_answer"></p>
             </div>
         </div>
-        <div class="final_choice hidden">
-            <h1 class="interrogation_title">Quelles sont vos déductions&nbsp;?</h1>
-        </div>
-        <div class="results_game">
+        <div class="results_game hidden">
             <h1 class="results_title">Résultats</h1>
             <div class="reveal_and_scores">
                 <div class="scores">
-                    <h1 class="score_title">SCORE :</h1>
-                    <h2 class="reveal_score">4/5</h2>
+                    <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">
-                            <h3 class="player_names">nom1 : </h3>
-                            <h3 class="player_scores"> score1</h3><br>
-                            <h3 class="player_names">nom2 : </h3>
-                            <h3 class="player_scores"> score2</h3><br>
-                            <h3 class="player_names">nom3 : </h3>
-                            <h3 class="player_scores"> score3</h3><br>
-                            <h3 class="player_names">nom4 : </h3>
-                            <h3 class="player_scores"> score4</h3>
+                            <!-- TODO: model, remove from HTML and add it dynamically with JavaScript for each player -->
+                            <h3 class="player_name_and_score">nom&nbsp;: score</h3>
+                            <h3 class="player_name_and_score">nom&nbsp;: score</h3>
+                            <h3 class="player_name_and_score">nom&nbsp;: score</h3>
+                            <h3 class="player_name_and_score">nom&nbsp;: score</h3>
                         </div>
                     </div>
                 </div>
-                <div class="reveal">
+                <div class="reveal_culprit">
                     <h2 class="reveal_culprit_title">Le coupable était ...</h2>
-                    <img>
-                    <h3 class="explain_culprit_reveal">Ce suspect était le coupable car il ...</h3>
+                    <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                    <h3 class="reveal_culprit_explaination">Ce suspect était le coupable car il ...</h3>
                 </div>
             </div>
             <div class="summary">
                 <h1 class="summary_title">Débrief</h1>
                 <div class="suspects_list">
                     <div class="summary_suspect">
-                        <h2 class="suspect_title">Le suspect 1 était ...</h2>
-                        <img>
-                        <h3 class="explain_suspect">En effet, la ... se caractérise par un ..</h3>
+                        <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                        <h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
+                        <p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
                     </div>
                     <div class="summary_suspect">
-                        <h2 class="suspect_title">Le suspect 2 était ...</h2>
-                        <img>
-                        <h3 class="explain_suspect">En effet, la ... se caractérise par un ..</h3>
+                        <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                        <h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
+                        <p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
                     </div>
                     <div class="summary_suspect">
-                        <h2 class="suspect_title">Le suspect 3 était ...</h2>
-                        <img>
-                        <h3 class="explain_suspect">En effet, la ... se caractérise par un ..</h3>
+                        <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                        <h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
+                        <p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
                     </div>
                     <div class="summary_suspect">
-                        <h2 class="suspect_title">Le suspect 4 était ...</h2>
-                        <img>
-                        <h3 class="explain_suspect">En effet, la ... se caractérise par un ...</h3>
+                        <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                        <h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
+                        <p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
                     </div>
                 </div>
             </div>