added image placeholder generator in anwser view

truthseeker/static/js/api.js

@@ -15,3 +15,14 @@ async function makeAPIRequest(endpoint, body){
         })
     })
 }
+async function makeAPIImageRequest(endpoint, body){
+    return new Promise((resolve, reject)=>{
+        const fetchOptions = {
+            method: "POST",
+            body: new URLSearchParams(body)
+        }
+        fetch("/api/v1/"+endpoint, fetchOptions).then(resp => {
+            resolve(resp)
+        })
+    })
+}

truthseeker/static/js/game.js

@@ -0,0 +1,55 @@
+var npcs_ids = []
+var gamedata = {}
+async function showAnswerSelectionPanel() {
+    npcs_ids.forEach(async element => {
+        console.log(element);
+        let suspect = document.createElement("div");
+        suspect.classList.add("suspect");
+
+        suspect_emotion_chooser = document.createElement("select");
+        suspect_emotion_chooser.classList.add("suspect_emotion_chooser")
+        gamedata["traits"].forEach(trait =>{
+            let option = document.createElement("option");
+            option.value = trait;
+            option.text = trait;
+            suspect_emotion_chooser.appendChild(option);
+        });
+        suspect.appendChild(suspect_emotion_chooser);
+        let data = {};
+        data["npcid"] = element;
+        let img_binary = await makeAPIImageRequest("getNpcImage",data);
+        let img = document.createElement('img');
+        img.classList.add("suspect_picture");
+        img.src = img_binary;
+        //img.src = 'data:image/png;base64,' + btoa('your-binary-data');
+        suspect.appendChild(img);
+        document.getElementById("123").appendChild(suspect);
+    });
+}
+
+function initSock(){
+    socket = io({
+        auth:{
+            game_id: gameid
+        }
+    });
+
+    socket.on("connect", () => {
+        console.log("Connected !")
+    })
+
+    socket.on("gameprogress", (username) => {
+        console.log(username);
+    });
+}
+
+function setGameData(){
+    data = {};
+    response = makeAPIRequest("getGameData");
+    response.then((value) => {
+        gamedata = value["gamedata"];
+        npcs_ids = Object.keys(gamedata["npcs"]);
+    })
+}
+
+setGameData()

truthseeker/templates/game.html

@@ -42,26 +42,6 @@
                 </svg>
             </button>
             <div class="suspects">
-                <!-- 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>
-                    <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="interrogation_suspect hidden">
@@ -145,6 +125,8 @@
                 </div>
             </div>
         </noscript>
+        <script src="/static/js/api.js"></script>
         <script src="/static/js/game_common.js"></script>
+        <script src="/static/js/game.js"></script>
     </body>
 </html>