From b5e6e80df185743b52b9a456426aecca0e6ac359 Mon Sep 17 00:00:00 2001
From: AudricV <74829229+AudricV@users.noreply.github.com>
Date: Fri, 13 Jan 2023 14:10:49 +0100
Subject: [PATCH] [Client] Add emotion and culprit choices view

---
 truthseeker/templates/game.html | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/truthseeker/templates/game.html b/truthseeker/templates/game.html
index d1fdbbf..0dcb578 100644
--- a/truthseeker/templates/game.html
+++ b/truthseeker/templates/game.html
@@ -21,7 +21,7 @@
         </div>
         <div class="interrogation hidden">
             <h1 class="interrogation_title">Suspects</h1>
-            <button id="interrogation_next_btn" class="next_btn" aria-label="Voir les résultats">
+            <button id="interrogation_next_btn" class="next_btn" aria-label="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">
                 </svg>
@@ -34,6 +34,35 @@
                 </div>
             </div>
         </div>
+        <div class="emotion_and_culprit_choices">
+            <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">
+                <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">
+                </svg>
+            </button>
+            <div class="suspects">
+                <!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
+                <div class="suspect">
+                    <select class="suspect_emotion_chooser" required="required">
+                        <option value="">Choisissez une émotion</option>
+                        <!-- Add other emotions here -->
+                    </select>
+                    <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                    <!-- Add culprit_btn_checked class when a choice is checked -->
+                    <!-- Only one button can be checked at a time, so when one is checked, the previous one, if applicable, is unchecked -->
+                    <button class="culprit_btn action_button">
+                        <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>
+                    </button>
+                </div>
+            </div>
+        </div>
         <div class="alert_dialog_background"></div>
         <div class="unsupported_browser">
             <div id="unsupported_browser_dialog" class="alert_dialog">