DjalimSimaila/SAE-A2-TruthInquiry
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finished final results screen

Browse Source
This commit is contained in:
Djalim Simaila 2023-01-14 22:03:27 +01:00
parent e6daa4775b
commit da5533a57a
2 changed files with 48 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
truthseeker/static/js/game.js
View File

@ -1,7 +1,7 @@
var npcs_ids = []
var gamedata = {}
var currentNpc = null
var score = null
function show(className){
document.getElementsByClassName(className)[0].classList.remove("hidden");
@ -64,6 +64,18 @@ function getNpcLocationAndPartner(npcid){
return data;
}
function getCulprit(){
culprit = null
Object.values(gamedata["rooms"]).forEach(element =>{
if (element['npcs'].length === 1){
culprit = element['npcs'][0];
return;
}
})
return culprit
}
async function askTypeOneQuestion(){
partnerId = getNpcLocationAndPartner(currentNpc)["partner"];
anwser = gamedata["npcs"][currentNpc]["QA_1"];
@ -127,6 +139,9 @@ function renderAnswerSelectionPanel() {
suspect.appendChild(img);
let button = document.getElementById("culpritButton");
let button_clone = button.cloneNode(true);
button_clone.addEventListener("click",()=>{
sendAnswers();
});
button_clone.removeAttribute("id");
button_clone.classList.remove("hidden");
suspect.appendChild(button_clone);
@ -175,7 +190,38 @@ function initSock(){
});
socket.on("gamefinshed", (finalResults) => {
hide("emotion_and_culprit_choices");
console.log(finalResults);
for (const player in finalResults["player"]){
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 =>{
let suspect = document.createElement("div");
suspect.classList.add("summary_suspect");
let img = document.createElement("img")
img.src = "/api/v1/getNpcImage?npcid=" + npcid;
suspect.appendChild(img)
let emotionTitle = document.createElement("h2");
emotionTitle.classList.add("explain_suspect_emotion_title");
emotionTitle.textContent = "Ce suspect était " + finalResults["npcs"][npcid]["reaction"];
suspect.appendChild(emotionTitle);
let emotionDesc = document.createElement("p");
emotionDesc.classList.add("explain_suspect_emotion_description");
emotionDesc.textContent = "Qui se caractérise par un " + finalResults["npcs"][npcid]["description"];
suspect.appendChild(emotionDesc)
document.getElementsByClassName("suspects_list")[0].appendChild(suspect)
})
});
}

28
truthseeker/templates/game.html
View File

@ -66,43 +66,17 @@
</div>
<div class="results_game_multiplayer">
<div class="players_list">
<!-- TODO: model, remove from HTML and add it dynamically with JavaScript for each player -->
<h3 class="player_name_and_score">nom&nbsp;: score</h3>
<h3 class="player_name_and_score">nom&nbsp;: score</h3>
<h3 class="player_name_and_score">nom&nbsp;: score</h3>
<h3 class="player_name_and_score">nom&nbsp;: score</h3>
</div>
</div>
</div>
<div class="reveal_culprit">
<h2 class="reveal_culprit_title">Le coupable était ...</h2>
<img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
<h3 class="reveal_culprit_explaination">Ce suspect était le coupable car il ...</h3>
<img class="suspect_picture" id="culprit" src="/static/images/suspect_example.png" alt="Example" draggable="false">
</div>
</div>
<div class="summary">
<h1 class="summary_title">Débrief</h1>
<div class="suspects_list">
<div class="summary_suspect">
<img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
<h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
<p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
</div>
<div class="summary_suspect">
<img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
<h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
<p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
</div>
<div class="summary_suspect">
<img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
<h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
<p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
</div>
<div class="summary_suspect">
<img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
<h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
<p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
</div>
</div>
</div>
</div>