From 1bd17419f06f46ffe2057e566cf2a409a6971761 Mon Sep 17 00:00:00 2001
From: mathiascazals <cazalsmathias@gmail.com>
Date: Sat, 14 Jan 2023 20:49:00 +0100
Subject: [PATCH] Add placeholder for image on interrogation view

---
 truthseeker/static/css/game_ui_game.css | 12 ++++++++++-
 truthseeker/templates/game.html         | 27 ++++++++++++++-----------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/truthseeker/static/css/game_ui_game.css b/truthseeker/static/css/game_ui_game.css
index 844da78..3441daf 100644
--- a/truthseeker/static/css/game_ui_game.css
+++ b/truthseeker/static/css/game_ui_game.css
@@ -226,10 +226,20 @@ html {
     text-transform: none;
 }
 
+.questions_and_image {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
 .questions_list {
-    align-items: flex-end;
+    align-content: center;
+    align-items: normal;
     display: flex;
     flex-direction: column;
+    justify-content: center;
 }
 
 /* Results and scores */
diff --git a/truthseeker/templates/game.html b/truthseeker/templates/game.html
index 4b8b786..2d0eac5 100644
--- a/truthseeker/templates/game.html
+++ b/truthseeker/templates/game.html
@@ -66,18 +66,21 @@
         </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>
-            </div>
-            <div class="question_answer hidden">
-                <h1 class="anwser_title">Réponse du suspect à la question</h1>
-                <p class="suspect_answer"></p>
+            <div class="questions_and_image">
+                <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>
+                <img class="image_interrogation suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                <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>
+                </div>
+                <div class="question_answer hidden">
+                    <h1 class="anwser_title">Réponse du suspect à la question</h1>
+                    <p class="suspect_answer"></p>
+                </div>
             </div>
         </div>
         <div class="results_game hidden">