diff --git a/truthinquiry/static/css/game_ui_game.css b/truthinquiry/static/css/game_ui_game.css index 4748702..ae26d27 100644 --- a/truthinquiry/static/css/game_ui_game.css +++ b/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; diff --git a/truthinquiry/static/js/game.js b/truthinquiry/static/js/game.js index fc27805..a2a1cc0 100644 --- a/truthinquiry/static/js/game.js +++ b/truthinquiry/static/js/game.js @@ -1,87 +1,111 @@ -var npcs_ids = [] -var gamedata = {} -var currentNpc = null -var username = null +const intro_image_path = "/static/images/entrée-manoir.png"; +const interrogation_image_path = "/static/images/salle-interrogation.png"; +const results_image_path = "/static/images/salle-resultats.png"; -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(){ - document.getElementById("interrogation_suspect_previous_btn").addEventListener("click",goBackToInterogation) +function setListenerToInterrogationSuspectPreviousBtn() { + document.getElementById("interrogation_suspect_previous_btn").addEventListener("click", goBackToInterogation); } -function setListenerToInterrogationNextBtn(){ - document.getElementById("interrogation_next_btn").addEventListener("click", showEmotionAndCulpritChoicesView) +function setListenerToInterrogationNextBtn() { + document.getElementById("interrogation_next_btn").addEventListener("click", showEmotionAndCulpritChoicesView); } -function setQuestionButtonsListeners(){ - document.getElementById("QA_0").addEventListener("click",askTypeZeroQuestion); - document.getElementById("QA_1").addEventListener("click",askTypeOneQuestion); +function setQuestionButtonsListeners() { + document.getElementById("QA_0").addEventListener("click", askTypeZeroQuestion); + document.getElementById("QA_1").addEventListener("click", askTypeOneQuestion); } -function removeQuestionButtonsListeners(){ - document.getElementById("QA_0").removeEventListener("click",askTypeZeroQuestion); - document.getElementById("QA_1").removeEventListener("click",askTypeOneQuestion); +function removeQuestionButtonsListeners() { + document.getElementById("QA_0").removeEventListener("click", askTypeZeroQuestion); + 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){ - data = {} - npcid = parseInt(npcid) - for(const room in gamedata["rooms"]){ - if(gamedata["rooms"][room]["npcs"].includes(npcid)){ +function getNpcLocationAndPartner(npcid) { + data = {}; + npcid = parseInt(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] - }while(data["partner"] === npcid); - } - else{ - data["partner"] = gamedata["rooms"][room]["npcs"][gamedata["rooms"][room]["npcs"][1] === npcid ?0:1]; + data["partner"] = npcs_ids[random]; + } while (data["partner"] === npcid); + } else { + 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(){ - culprit = null - Object.values(gamedata["rooms"]).forEach(element =>{ - if (element['npcs'].length === 1){ +function getCulprit() { + culprit = null; + Object.values(gamedata["rooms"]).forEach(element => { + 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); - //TODO Waiting screen until results shows + return await makeAPIRequest("submitAnswers", data); } 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} - 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 + if (player === username) { + continue; + } + + 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(); \ No newline at end of file + +initGame();