From 71aedd3854c4c231168df110acabfbec721b17a8 Mon Sep 17 00:00:00 2001
From: SIMAILA Djalim <djalimS.pro@outlook.fr>
Date: Sat, 14 Jan 2023 12:36:15 +0100
Subject: [PATCH] show npcs on interogation screen

---
 truthseeker/static/js/game.js   | 58 +++++++++++++++++++++++++++------
 truthseeker/templates/game.html | 13 +++-----
 2 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/truthseeker/static/js/game.js b/truthseeker/static/js/game.js
index 8ec1c0b..2de9b05 100644
--- a/truthseeker/static/js/game.js
+++ b/truthseeker/static/js/game.js
@@ -1,8 +1,23 @@
 var npcs_ids = []
 var gamedata = {}
 var button = ""
-async function showAnswerSelectionPanel() {
-    npcs_ids.forEach(async element => {
+
+function showInterogation(){
+    document.getElementsByClassName("interrogation")[0].classList.remove("hidden");
+}
+function hideInterogation(){
+    document.getElementsByClassName("interrogation")[0].classList.add("hidden");
+}
+
+function showEmotionAndCulpritChoices(){
+    document.getElementsByClassName("emotion_and_culprit_choices")[0].classList.remove("hidden");
+}
+function hideEmotionAndCulpritChoices(){
+    document.getElementsByClassName("emotion_and_culprit_choices")[0].classList.add("hidden");
+}
+
+function renderAnswerSelectionPanel() {
+    npcs_ids.forEach(element => {
         console.log(element);
         let suspect = document.createElement("div");
         suspect.classList.add("suspect");
@@ -21,7 +36,7 @@ async function showAnswerSelectionPanel() {
         img.classList.add("suspect_picture");
         img.src = "/api/v1/getNpcImage?npcid="+element; 
         suspect.appendChild(img);
-        let button = document.getElementById("mainButton");
+        let button = document.getElementById("culpritButton");
         let button_clone = button.cloneNode(true);
         button_clone.classList.remove("hidden");
         suspect.appendChild(button_clone);
@@ -29,6 +44,23 @@ async function showAnswerSelectionPanel() {
     });
 }
 
+function renderInterogation(){
+    npcs_ids.forEach(element => {
+        let suspect = document.createElement("div");
+        suspect.classList.add("suspect");
+
+        let img = document.createElement('img');
+        img.classList.add("suspect_picture");
+        img.src = "/api/v1/getNpcImage?npcid="+element; 
+        suspect.appendChild(img);
+        let button = document.getElementById("interogationButton");
+        let button_clone = button.cloneNode(true);
+        button_clone.classList.remove("hidden");
+        suspect.appendChild(button_clone)
+        document.getElementById("interrogation_suspects").appendChild(suspect);
+    });
+}
+
 function initSock(){
     socket = io({
         auth:{
@@ -45,13 +77,19 @@ function initSock(){
     });
 }
 
-function setGameData(){
+async function setGameData(){
     data = {};
-    response = makeAPIRequest("getGameData");
-    response.then((value) => {
-        gamedata = value["gamedata"];
-        npcs_ids = Object.keys(gamedata["npcs"]);
-    })
+    response = await makeAPIRequest("getGameData");
+    gamedata = response["gamedata"];
+    npcs_ids = Object.keys(gamedata["npcs"]);
 }
 
-setGameData()
\ No newline at end of file
+async function initGame(){
+    await setGameData();
+    //initSock();
+    renderAnswerSelectionPanel();
+    renderInterogation();
+    showInterogation();
+}
+
+initGame();
\ No newline at end of file
diff --git a/truthseeker/templates/game.html b/truthseeker/templates/game.html
index 02fefd0..9fa3444 100644
--- a/truthseeker/templates/game.html
+++ b/truthseeker/templates/game.html
@@ -26,12 +26,7 @@
                     <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: 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>
-                </div>
+            <div class="suspects" id="interrogation_suspects">
             </div>
         </div>
         <div class="emotion_and_culprit_choices hidden">
@@ -125,10 +120,11 @@
                 </div>
             </div>
         </noscript>
-        <!-- button to clone in js-->   
+        <!-- buttons to clone in js-->
+        <button class="ask_button action_button hidden" id="interogationButton">Interroger</button>
         <!-- 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 hidden", id="mainButton">
+        <button class="culprit_btn action_button hidden", id="culpritButton">
             <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>
@@ -137,6 +133,7 @@
             </svg>
             <p class="culprit_btn_text">Couplable</p>
         </button>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
         <script src="/static/js/api.js"></script>
         <script src="/static/js/game_common.js"></script>
         <script src="/static/js/game.js"></script>