Merge pull request #63 from ThomasRubini/client_game-fixes-and-improvements

[Client] Game fixes and improvements

truthinquiry/static/css/game_ui_game.css

@@ -17,6 +17,8 @@ html {
     background-size: cover;
     position: fixed;
     height: 100%;
+    left: 0;
+    top: 0;
     width: 100%;
     /* Place the background behind everything */
     z-index: -9999;

truthinquiry/static/js/game.js

@@ -1,87 +1,111 @@
-var npcs_ids = []
+const intro_image_path = "/static/images/entrée-manoir.png";
-var gamedata = {}
+const interrogation_image_path = "/static/images/salle-interrogation.png";
-var currentNpc = null
+const results_image_path = "/static/images/salle-resultats.png";
-var username = null
 
-function show(className){
+var npcs_ids = [];
+var gamedata = {};
+var currentNpc = null;
+var username = null;
+
+function show(className) {
     document.getElementsByClassName(className)[0].classList.remove("hidden");
 }
 
-function hide(className){
+function hide(className) {
     document.getElementsByClassName(className)[0].classList.add("hidden");
 }
 
-function setListenerToIntroductionNextBtn(){
+function setGameBackground(backgroundPath) {
+    document.getElementsByClassName("current_background")[0].style.backgroundImage = 'url("' + backgroundPath +'")';
+}
+
+function setListenerToIntroductionNextBtn() {
     document.getElementById("introduction_next_btn").addEventListener("click", showInterogationViewFromIntroduction);
 }
 
-function setListenerToInterrogationSuspectPreviousBtn(){
+function setListenerToInterrogationSuspectPreviousBtn() {
-    document.getElementById("interrogation_suspect_previous_btn").addEventListener("click",goBackToInterogation)
+    document.getElementById("interrogation_suspect_previous_btn").addEventListener("click", goBackToInterogation);
 }
 
-function setListenerToInterrogationNextBtn(){
+function setListenerToInterrogationNextBtn() {
-    document.getElementById("interrogation_next_btn").addEventListener("click", showEmotionAndCulpritChoicesView)
+    document.getElementById("interrogation_next_btn").addEventListener("click", showEmotionAndCulpritChoicesView);
 }
 
-function setQuestionButtonsListeners(){
+function setQuestionButtonsListeners() {
-    document.getElementById("QA_0").addEventListener("click",askTypeZeroQuestion);
+    document.getElementById("QA_0").addEventListener("click", askTypeZeroQuestion);
-    document.getElementById("QA_1").addEventListener("click",askTypeOneQuestion);
+    document.getElementById("QA_1").addEventListener("click", askTypeOneQuestion);
 }
 
-function removeQuestionButtonsListeners(){
+function removeQuestionButtonsListeners() {
-    document.getElementById("QA_0").removeEventListener("click",askTypeZeroQuestion);
+    document.getElementById("QA_0").removeEventListener("click", askTypeZeroQuestion);
-    document.getElementById("QA_1").removeEventListener("click",askTypeOneQuestion);
+    document.getElementById("QA_1").removeEventListener("click", askTypeOneQuestion);
 }
 
-function goBackToInterogation(){
+function goBackToInterogation() {
     hide("interrogation_suspect");
     show("interrogation");
 }
 
-
+function showInterogationViewFromIntroduction() {
-function showInterogationViewFromIntroduction(){
     hide("introduction");
     show("interrogation");
+    setGameBackground(interrogation_image_path);
 }
 
-function showEmotionAndCulpritChoicesView(){
+function showEmotionAndCulpritChoicesView() {
     hide("interrogation");
     show("emotion_and_culprit_choices");
 }
 
-function getNpcLocationAndPartner(npcid){
+function getNpcLocationAndPartner(npcid) {
-    data = {}
+    data = {};
-    npcid = parseInt(npcid)
+    npcid = parseInt(npcid);
-    for(const room in gamedata["rooms"]){
+
-        if(gamedata["rooms"][room]["npcs"].includes(npcid)){
+    for (const room in gamedata["rooms"]) {
+        if (gamedata["rooms"][room]["npcs"].includes(npcid)) {
             data["room"] = gamedata["rooms"][room]["name"];
-            if(gamedata["rooms"][room]["npcs"].length === 1){
+
-                do{
+            if (gamedata["rooms"][room]["npcs"].length === 1) {
+                do {
                     const random = Math.floor(Math.random() * npcs_ids.length);
-                    data["partner"] = npcs_ids[random]
+                    data["partner"] = npcs_ids[random];
-                }while(data["partner"] === npcid);
+                } while (data["partner"] === npcid);
-            }
+            } else {
-            else{
+                data["partner"] = gamedata["rooms"][room]["npcs"][gamedata["rooms"][room]["npcs"][1] === npcid ? 0 : 1];
-                data["partner"] = gamedata["rooms"][room]["npcs"][gamedata["rooms"][room]["npcs"][1] === npcid ?0:1];
             }
         }
     }
+
     return data;
 }
 
+function disableCulpritButtons(culprit_choices_element, selected_suspect) {
+    let childrenCulpritChoicesElement = culprit_choices_element.children;
+    for (let index = 0; index < childrenCulpritChoicesElement.length; index++) {
+        let child = childrenCulpritChoicesElement[index];
+        if (selected_suspect != child) {
+            child.getElementsByClassName("culprit_btn")[0].classList.add("hidden");
+        } else {
+            child.getElementsByClassName("culprit_unchecked_icon")[0].classList.add("hidden");
+            child.getElementsByClassName("culprit_checked_icon")[0].classList.remove("hidden");
+            child.getElementsByClassName("culprit_btn")[0].classList.add("culprit_btn_checked");
+        }
+    }
+}
 
-function getCulprit(){
+function getCulprit() {
-    culprit = null
+    culprit = null;
-    Object.values(gamedata["rooms"]).forEach(element =>{
+    Object.values(gamedata["rooms"]).forEach(element => {
-        if (element['npcs'].length === 1){
+        if (element['npcs'].length === 1) {
             culprit = element['npcs'][0];
             return;  
         } 
-    })
+    });
-    return culprit
+
+    return culprit;
 }
 
-async function askTypeOneQuestion(){
+async function askTypeOneQuestion() {
     removeQuestionButtonsListeners();
     partnerId = getNpcLocationAndPartner(currentNpc)["partner"];
     anwser = gamedata["npcs"][currentNpc]["QA_1"];
@@ -89,7 +113,7 @@ async function askTypeOneQuestion(){
     document.getElementsByClassName("suspect_answer")[0].textContent = anwser;
     show("question_answer");
     document.getElementById("currentNpcPicure").src = "/api/v1//getNpcReaction?npcid="+currentNpc;
-    //sleep for 5 sec
+    // Sleep for 5 sec
     await new Promise(r => setTimeout(r, 5000));
     document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+currentNpc;
     hide("question_answer");
@@ -98,16 +122,15 @@ async function askTypeOneQuestion(){
 }
 
 
-async function askTypeZeroQuestion(){
+async function askTypeZeroQuestion() {
     removeQuestionButtonsListeners();
-    document.getElementById("QA_0")
     room = getNpcLocationAndPartner(currentNpc)["room"];
     anwser = gamedata["npcs"][currentNpc]["QA_0"];
     anwser = anwser.replace("{SALLE}",room);
     document.getElementsByClassName("suspect_answer")[0].textContent = anwser;
     show("question_answer");
     document.getElementById("currentNpcPicure").src = "/api/v1//getNpcReaction?npcid="+currentNpc;
-    //sleep for 5 sec
+    // Sleep for 5 sec
     await new Promise(r => setTimeout(r, 5000));
     document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+currentNpc;
     hide("question_answer");
@@ -115,17 +138,17 @@ async function askTypeZeroQuestion(){
     setQuestionButtonsListeners();
 }
 
-async function sendAnswers(){
+async function sendAnswers() {
     selects = document.getElementsByClassName("suspect_emotion_chooser");
-    let playerResponses = {}
+    let playerResponses = {};
     for (let index = 0; index < selects.length; index++) {
         select = selects[index];
-        playerResponses[select.id] = select.value
+        playerResponses[select.id] = select.value;
     }
+
     data = {};
     data["responses"] = JSON.stringify(playerResponses);
-    return await makeAPIRequest("submitAnswers",data);
+    return await makeAPIRequest("submitAnswers", data);
-    //TODO Waiting screen until results shows
 }
 
 function renderAnswerSelectionPanel() {
@@ -135,33 +158,38 @@ function renderAnswerSelectionPanel() {
 
         suspect_emotion_chooser = document.createElement("select");
         suspect_emotion_chooser.classList.add("suspect_emotion_chooser")
-        suspect_emotion_chooser.setAttribute("id",element);
+        suspect_emotion_chooser.setAttribute("id", element);
         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 = {};
+
         let img = document.createElement('img');
         img.classList.add("suspect_picture");
-        img.src = "/api/v1/getNpcImage?npcid="+element; 
+        img.src = "/api/v1/getNpcImage?npcid=" + element;
         suspect.appendChild(img);
+
         let button = document.getElementById("culpritButton");
         let button_clone = button.cloneNode(true);
-        button_clone.addEventListener("click",()=>{
+        let culprit_choices = document.getElementById("culprits_choices");
+
+        button_clone.addEventListener("click", () => {
+            disableCulpritButtons(culprit_choices, suspect);
             sendAnswers();
-            //TODO Make this button green when clicked, and reset all other green button if any 
         });
+
         button_clone.removeAttribute("id");
         button_clone.classList.remove("hidden");
         suspect.appendChild(button_clone);
-        document.getElementById("culprits_choices").appendChild(suspect);
+        culprit_choices.appendChild(suspect);
     });
 }
 
-function renderInterogation(){
+function renderInterogation() {
     document.getElementById("QA_0").textContent = gamedata["questions"]["QA_0"],
     document.getElementById("QA_1").textContent = gamedata["questions"]["QA_1"],
     npcs_ids.forEach(element => {
@@ -170,26 +198,28 @@ function renderInterogation(){
 
         let img = document.createElement('img');
         img.classList.add("suspect_picture");
-        img.src = "/api/v1/getNpcImage?npcid="+element; 
+        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");
-        button_clone.addEventListener("click",()=>{
+        button_clone.addEventListener("click", () => {
             // TODO remove this listener when we know the questions has already been asked;
             currentNpc = element
             document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+element;
             hide("interrogation");
             show("interrogation_suspect");
-        })
+        });
-        suspect.appendChild(button_clone)
+
+        suspect.appendChild(button_clone);
         document.getElementById("interrogation_suspects").appendChild(suspect);
     });
 }
 
 function initSock(){
     socket = io({
-        auth:{
+        auth : {
             game_id: gamedata["game_id"]
         }
     });
@@ -205,21 +235,29 @@ function initSock(){
     
     socket.on("gamefinished", (finalResults) => {
         hide("emotion_and_culprit_choices");
-        console.log(finalResults);
+        document.getElementsByClassName("reveal_score")[0].textContent = Object.values(finalResults["player"][username]).filter(x => x == true).length + "/5";
-        document.getElementsByClassName("reveal_score")[0].textContent = Object.values(finalResults["player"][username]).filter(x => x==true).length +"/5"
         for (const player in finalResults["player"]){
-            if(player === username){continue}
+            if (player === username) {
-            let playerNode = document.createElement("h3")
+                continue;
-            playerNode.classList.add("player_name_and_score")
+            }
-            let playerResultArray = Object.values(finalResults["player"][player])
+
-            playerNode.textContent = "" + player + " : " + playerResultArray.filter(x => x==true).length
+            let playerNode = document.createElement("h3");
+            playerNode.classList.add("player_name_and_score");
+
+            let playerResultArray = Object.values(finalResults["player"][player]);
+            playerNode.textContent = "" + player + " : " + playerResultArray.filter(x => x == true).length;
+
             document.getElementsByClassName("players_list")[0].appendChild(playerNode);
         }
+
         culprit = getCulprit();
         document.getElementsByClassName("reveal_culprit_title")[0].textContent += " " + gamedata["npcs"][culprit]["name"];
         document.getElementById("culprit").src = "/api/v1/getNpcImage?npcid="+culprit;
+
         show("results_game");
-        npcs_ids.filter(x => x!=culprit).forEach(npcid =>{
+        setGameBackground(results_image_path);
+
+        npcs_ids.filter(x => x != culprit).forEach(npcid =>{
             let suspect = document.createElement("div");
             suspect.classList.add("summary_suspect");
             let img = document.createElement("img")
@@ -233,7 +271,6 @@ function initSock(){
 
             let emotionDesc = document.createElement("p");
             emotionDesc.classList.add("explain_suspect_emotion_description");
-            //TODO fix typos on the database 
             emotionDesc.textContent = "Qui se caractérise par " + finalResults["npcs"][npcid]["description"];
             suspect.appendChild(emotionDesc)
 
@@ -242,15 +279,15 @@ function initSock(){
     });
 }
 
-async function setGameData(){
+async function setGameData() {
     data = {};
     response = await makeAPIRequest("getGameData");
     gamedata = response["gamedata"];
-    username = response["username"]
+    username = response["username"];
     npcs_ids = Object.keys(gamedata["npcs"]).sort((a, b) => 0.5 - Math.random())
 }
 
-async function initGame(){
+async function initGame() {
     await setGameData();
     initSock();
     renderAnswerSelectionPanel();
@@ -260,5 +297,7 @@ async function initGame(){
     setListenerToIntroductionNextBtn()
     setListenerToInterrogationNextBtn();
     show("introduction");
+    setGameBackground(intro_image_path);
 }
+
 initGame();