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

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

Browse Source 
[Client] Game fixes and improvements
This commit is contained in:
AudricV 2023-01-16 23:46:06 +01:00 committed by GitHub
commit 6f7edb3887
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 115 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
truthinquiry/static/css/game_ui_game.css
View File

@ -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;

187
truthinquiry/static/js/game.js
View File

@ -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();
initGame();