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

[Client] Refactor and improve game JavaScript code

Browse Source
This commit is contained in:
AudricV 2023-03-09 16:17:39 +01:00
parent 09b925eb67
commit 47a3088b4d
No known key found for this signature in database
GPG Key ID: DA92EC7905614198
1 changed files with 214 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,77 +1,94 @@
const intro_image_path = "/static/images/entrée-manoir.png"; const INTRO_IMAGE_PATH = "/static/images/entrée-manoir.png";
const interrogation_image_path = "/static/images/salle-interrogation.png"; const INTERROGATION_IMAGE_PATH = "/static/images/salle-interrogation.png";
const results_image_path = "/static/images/salle-resultats.png"; const RESULTS_IMAGE_PATH = "/static/images/salle-resultats.png";
const NPC_REACTION_PATH = "/api/v1/getNpcReaction?npcid=";
const NPC_IMAGE_PATH = "/api/v1/getNpcImage?npcid=";
var npcs_ids = []; let npcsIds = [];
var gamedata = {}; let gameData = {};
var currentNpc = null; let currentNpc = null;
var username = null; let username = null;
function show(className) {
document.getElementsByClassName(className)[0].classList.remove("hidden");
}
function hide(className) {
document.getElementsByClassName(className)[0].classList.add("hidden");
}
/*
* Set the current game background to the first element with the current_background CSS class.
*/
function setGameBackground(backgroundPath) { function setGameBackground(backgroundPath) {
document.getElementsByClassName("current_background")[0].style.backgroundImage = 'url("' + backgroundPath +'")'; document.querySelector(".current_background").style.backgroundImage = 'url("' + backgroundPath + '")';
} }
function setListenerToIntroductionNextBtn() { /**
document.getElementById("introduction_next_btn").addEventListener("click", showInterogationViewFromIntroduction); * Set listeners to introduction and interrogation navigation buttons.
} */
function setIntroductionAndInterrogationListeners() {
function setListenerToInterrogationSuspectPreviousBtn() { document.getElementById("introduction_next_btn")
document.getElementById("interrogation_suspect_previous_btn").addEventListener("click", goBackToInterogation); .addEventListener("click", showInterrogationViewFromIntroduction);
} document.getElementById("interrogation_suspect_previous_btn")
.addEventListener("click", goBackToInterrogation);
function setListenerToInterrogationNextBtn() { document.getElementById("interrogation_next_btn")
document.getElementById("interrogation_next_btn").addEventListener("click", showEmotionAndCulpritChoicesView); .addEventListener("click", showEmotionAndCulpritChoicesView);
} }
/**
* Set listeners to questions buttons.
*/
function setQuestionButtonsListeners() { function setQuestionButtonsListeners() {
document.getElementById("QA_0").addEventListener("click", askTypeZeroQuestion); document.getElementById("QA_0")
document.getElementById("QA_1").addEventListener("click", askTypeOneQuestion); .addEventListener("click", askTypeZeroQuestion);
document.getElementById("QA_1")
.addEventListener("click", askTypeOneQuestion);
} }
function removeQuestionButtonsListeners() { /**
document.getElementById("QA_0").removeEventListener("click", askTypeZeroQuestion); * Unset listeners to questions buttons.
document.getElementById("QA_1").removeEventListener("click", askTypeOneQuestion); */
function unsetQuestionButtonsListeners() {
document.getElementById("QA_0")
.removeEventListener("click", askTypeZeroQuestion);
document.getElementById("QA_1")
.removeEventListener("click", askTypeOneQuestion);
} }
function goBackToInterogation() { /**
hide("interrogation_suspect"); * Go back to interrogation view, by hiding the interrogation suspect view.
show("interrogation"); */
function goBackToInterrogation() {
hideFirstClassElement("interrogation_suspect");
showFirstClassElement("interrogation");
} }
function showInterogationViewFromIntroduction() { /**
hide("introduction"); * Show the interrogation view from the introduction one and hide the interrogation one.
show("interrogation"); */
setGameBackground(interrogation_image_path); function showInterrogationViewFromIntroduction() {
hideFirstClassElement("introduction");
showFirstClassElement("interrogation");
setGameBackground(INTERROGATION_IMAGE_PATH);
} }
/**
* Show the emotion and culprit choices view and hide the interrogation one.
*/
function showEmotionAndCulpritChoicesView() { function showEmotionAndCulpritChoicesView() {
hide("interrogation"); hideFirstClassElement("interrogation");
show("emotion_and_culprit_choices"); showFirstClassElement("emotion_and_culprit_choices");
} }
function getNpcLocationAndPartner(npcid) { function getNpcLocationAndPartner(npcid) {
data = {}; const data = {};
npcid = parseInt(npcid); const npcidInt = parseInt(npcid);
for (const room in gamedata["rooms"]) { for (const room in gameData["rooms"]) {
if (gamedata["rooms"][room]["npcs"].includes(npcid)) { if (gameData["rooms"][room]["npcs"].includes(npcidInt)) {
data["room"] = gamedata["rooms"][room]["name"]; data["room"] = gameData["rooms"][room]["name"];
if (gamedata["rooms"][room]["npcs"].length === 1) { if (gameData["rooms"][room]["npcs"].length === 1) {
do { do {
const random = Math.floor(Math.random() * npcs_ids.length); const random = Math.floor(Math.random() * npcsIds.length);
data["partner"] = npcs_ids[random]; data["partner"] = npcsIds[random];
} while (data["partner"] === npcid); } while (data["partner"] === npcidInt);
} 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] === npcidInt ? 0 : 1];
} }
} }
} }
@ -81,21 +98,24 @@ function getNpcLocationAndPartner(npcid) {
function disableCulpritButtons(culprit_choices_element, selected_suspect) { function disableCulpritButtons(culprit_choices_element, selected_suspect) {
let childrenCulpritChoicesElement = culprit_choices_element.children; let childrenCulpritChoicesElement = culprit_choices_element.children;
for (let index = 0; index < childrenCulpritChoicesElement.length; index++) { for (let index = 0; index < childrenCulpritChoicesElement.length; index++) {
let child = childrenCulpritChoicesElement[index]; let child = childrenCulpritChoicesElement[index];
if (selected_suspect != child) { if (selected_suspect != child) {
child.getElementsByClassName("culprit_btn")[0].classList.add("hidden"); child.querySelector(".culprit_btn").classList.add("hidden");
} else { } else {
child.getElementsByClassName("culprit_unchecked_icon")[0].classList.add("hidden"); child.querySelector(".culprit_unchecked_icon").classList.add("hidden");
child.getElementsByClassName("culprit_checked_icon")[0].classList.remove("hidden"); child.querySelector(".culprit_checked_icon").classList.remove("hidden");
child.getElementsByClassName("culprit_btn")[0].classList.add("culprit_btn_checked"); child.querySelector(".culprit_btn").classList.add("culprit_btn_checked");
} }
} }
} }
function getCulprit() { function getCulprit() {
culprit = null; let 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]; culprit = element['npcs'][0];
return; return;
@ -106,198 +126,223 @@ function getCulprit() {
} }
async function askTypeOneQuestion() { async function askTypeOneQuestion() {
removeQuestionButtonsListeners(); askQuestion(npcLocationAndPartner => gameData["npcs"][currentNpc]["QA_1"].replace(
partnerId = getNpcLocationAndPartner(currentNpc)["partner"]; "{NPC}", gameData["npcs"][npcLocationAndPartner["partner"]]["name"]));
anwser = gamedata["npcs"][currentNpc]["QA_1"];
anwser = anwser.replace("{NPC}",gamedata["npcs"][partnerId]["name"]);
document.getElementsByClassName("suspect_answer")[0].textContent = anwser;
show("question_answer");
document.getElementById("currentNpcPicure").src = "/api/v1//getNpcReaction?npcid="+currentNpc;
// Sleep for 5 sec
await new Promise(r => setTimeout(r, 2000));
document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+currentNpc;
hide("question_answer");
document.getElementsByClassName("suspect_answer")[0].textContent = "";
setQuestionButtonsListeners();
} }
async function askTypeZeroQuestion() { async function askTypeZeroQuestion() {
removeQuestionButtonsListeners(); askQuestion(npcLocationAndPartner => gameData["npcs"][currentNpc]["QA_0"].replace(
room = getNpcLocationAndPartner(currentNpc)["room"]; "{SALLE}", npcLocationAndPartner["room"]));
anwser = gamedata["npcs"][currentNpc]["QA_0"]; }
anwser = anwser.replace("{SALLE}",room);
document.getElementsByClassName("suspect_answer")[0].textContent = anwser; async function askQuestion(buildAnswer) {
show("question_answer"); unsetQuestionButtonsListeners();
document.getElementById("currentNpcPicure").src = "/api/v1//getNpcReaction?npcid="+currentNpc;
// Sleep for 5 sec document.querySelector(".suspect_answer").textContent = buildAnswer(
await new Promise(r => setTimeout(r, 5000)); getNpcLocationAndPartner(currentNpc));
document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+currentNpc;
hide("question_answer"); showFirstClassElement("question_answer");
document.getElementsByClassName("suspect_answer")[0].textContent = "";
document.getElementById("currentNpcPicure").src = NPC_REACTION_PATH + currentNpc;
//TODO: change this code which produces strange behaviors
// Sleep for 4 sec
await new Promise(r => setTimeout(r, 4000));
document.getElementById("currentNpcPicure").src = NPC_REACTION_PATH + currentNpc;
hideFirstClassElement("question_answer");
document.querySelector(".suspect_answer").textContent = "";
setQuestionButtonsListeners(); setQuestionButtonsListeners();
} }
async function sendAnswers() { async function sendAnswers() {
selects = document.getElementsByClassName("suspect_emotion_chooser"); const selections = document.getElementsByClassName("suspect_emotion_chooser");
let playerResponses = {};
for (let index = 0; index < selects.length; index++) { const playerResponses = {};
select = selects[index];
for (let index = 0; index < selections.length; index++) {
select = selections[index];
playerResponses[select.id] = select.value; playerResponses[select.id] = select.value;
} }
data = {}; const data = {};
data["responses"] = JSON.stringify(playerResponses); data["responses"] = JSON.stringify(playerResponses);
return await makeAPIRequest("submitAnswers", data); return await makeAPIRequest("submitAnswers", data);
} }
function renderAnswerSelectionPanel() { function renderAnswerSelectionPanel() {
npcs_ids.forEach(element => { npcsIds.forEach(element => {
let suspect = document.createElement("div"); const suspect = document.createElement("div");
suspect.classList.add("suspect"); suspect.classList.add("suspect");
suspect_emotion_chooser = document.createElement("select"); const suspectEmotionChooser = document.createElement("select");
suspect_emotion_chooser.classList.add("suspect_emotion_chooser") suspectEmotionChooser.classList.add("suspect_emotion_chooser")
suspect_emotion_chooser.setAttribute("id", element); suspectEmotionChooser.setAttribute("id", element);
gamedata["traits"].forEach(trait =>{
let option = document.createElement("option"); gameData["traits"].forEach(trait => {
const option = document.createElement("option");
option.value = trait; option.value = trait;
option.text = trait; option.text = trait;
suspect_emotion_chooser.appendChild(option); suspectEmotionChooser.appendChild(option);
}); });
suspect.appendChild(suspect_emotion_chooser); suspect.appendChild(suspectEmotionChooser);
let img = document.createElement('img'); const img = document.createElement('img');
img.classList.add("suspect_picture"); img.classList.add("suspect_picture");
img.src = "/api/v1/getNpcImage?npcid=" + element; img.src = NPC_IMAGE_PATH + element;
suspect.appendChild(img); suspect.appendChild(img);
let button = document.getElementById("culpritButton"); const button = document.createElement("button");
let button_clone = button.cloneNode(true); button.classList.add("culprit_btn", "action_button");
let culprit_choices = document.getElementById("culprits_choices"); button.innerHTML = '<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_clone.addEventListener("click", () => { const culpritChoices = document.getElementById("culprits_choices");
disableCulpritButtons(culprit_choices, suspect);
button.addEventListener("click", () => {
disableCulpritButtons(culpritChoices, suspect);
sendAnswers(); sendAnswers();
}); });
button_clone.removeAttribute("id"); suspect.appendChild(button);
button_clone.classList.remove("hidden"); culpritChoices.appendChild(suspect);
suspect.appendChild(button_clone);
culprit_choices.appendChild(suspect);
}); });
} }
function renderInterogation() { function renderInterrogation() {
document.getElementById("QA_0").textContent = gamedata["questions"]["QA_0"], document.getElementById("QA_0").textContent = gameData["questions"]["QA_0"];
document.getElementById("QA_1").textContent = gamedata["questions"]["QA_1"], document.getElementById("QA_1").textContent = gameData["questions"]["QA_1"];
npcs_ids.forEach(element => {
let suspect = document.createElement("div"); const interrogationSuspects = document.getElementById("interrogation_suspects");
npcsIds.forEach(element => {
const suspect = document.createElement("div");
suspect.classList.add("suspect"); suspect.classList.add("suspect");
let img = document.createElement('img'); const img = document.createElement('img');
img.classList.add("suspect_picture"); img.classList.add("suspect_picture");
img.src = "/api/v1/getNpcImage?npcid=" + element; img.src = NPC_IMAGE_PATH + element;
suspect.appendChild(img); suspect.appendChild(img);
let button = document.getElementById("interogationButton"); const button = document.createElement("button");
let button_clone = button.cloneNode(true); button.classList.add("ask_button", "action_button");
button_clone.classList.remove("hidden"); button.textContent = "Interroger";
button_clone.addEventListener("click", () => { button.addEventListener("click", () => {
// TODO remove this listener when we know the questions has already been asked; // TODO remove this listener when we know the questions has already been asked;
currentNpc = element currentNpc = element;
document.getElementById("currentNpcPicure").src = "/api/v1/getNpcImage?npcid="+element; document.getElementById("currentNpcPicure").src = NPC_IMAGE_PATH + element;
hide("interrogation"); hideFirstClassElement("interrogation");
show("interrogation_suspect"); showFirstClassElement("interrogation_suspect");
}); });
suspect.appendChild(button_clone); suspect.appendChild(button);
document.getElementById("interrogation_suspects").appendChild(suspect); interrogationSuspects.appendChild(suspect);
}); });
} }
function initSock(){ function initSock() {
socket = io({ const socket = io({
auth : { auth : {
game_id: gamedata["game_id"] game_id: gameData["game_id"]
} }
}); });
socket.on("connect", () => { socket.on("connect", () => {
console.log("Connected !") console.log("Connected to the server!");
}) });
//TODO Send and receive userprogress when they have sent their responses //TODO Send and receive userprogress when they have sent their responses
socket.on("gameprogress", (username) => { socket.on("gameprogress", username => {
console.log(username); console.log(username);
}); });
socket.on("gamefinished", (finalResults) => { socket.on("gamefinished", finalResults => {
hide("emotion_and_culprit_choices"); hideFirstClassElement("emotion_and_culprit_choices");
document.getElementsByClassName("reveal_score")[0].textContent = Object.values(finalResults["player"][username]).filter(x => x == true).length + "/5"; document.querySelector(".reveal_score").textContent =
for (const player in finalResults["player"]){ Object.values(finalResults["player"][username])
.filter(x => x == true).length + " / 5";
const playerListElement = document.querySelector(".players_list");
for (const player in finalResults["player"]) {
if (player === username) { if (player === username) {
continue; continue;
} }
let playerNode = document.createElement("h3"); const playerNode = document.createElement("h3");
playerNode.classList.add("player_name_and_score"); playerNode.classList.add("player_name_and_score");
let playerResultArray = Object.values(finalResults["player"][player]); const playerResultArray = Object.values(finalResults["player"][player]);
playerNode.textContent = "" + player + " : " + playerResultArray.filter(x => x == true).length; playerNode.textContent = "" + player + " : "
+ playerResultArray.filter(x => x == true).length;
document.getElementsByClassName("players_list")[0].appendChild(playerNode); playerListElement.appendChild(playerNode);
} }
culprit = getCulprit(); const culprit = getCulprit();
document.getElementsByClassName("reveal_culprit_title")[0].textContent += " " + gamedata["npcs"][culprit]["name"]; const culpritName = gameData["npcs"][culprit]["name"];
document.getElementById("culprit").src = "/api/v1/getNpcImage?npcid="+culprit; document.querySelector(".reveal_culprit_title").textContent += " " + culpritName;
show("results_game"); const culpritElement = document.getElementById("culprit");
setGameBackground(results_image_path); culpritElement.src = NPC_IMAGE_PATH + culprit;
culpritElement.setAttribute("alt", "Image du ou de la coupable, " + culpritName);
npcs_ids.filter(x => x != culprit).forEach(npcid =>{ showFirstClassElement("results_game");
let suspect = document.createElement("div"); setGameBackground(RESULTS_IMAGE_PATH);
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"); const suspectListElement = document.querySelector(".suspects_list");
emotionTitle.classList.add("explain_suspect_emotion_title");
emotionTitle.textContent = "Ce suspect était " + finalResults["npcs"][npcid]["reaction"];
suspect.appendChild(emotionTitle);
let emotionDesc = document.createElement("p"); npcsIds.filter(x => x != culprit)
emotionDesc.classList.add("explain_suspect_emotion_description"); .forEach(npcid => {
emotionDesc.textContent = "Qui se caractérise par " + finalResults["npcs"][npcid]["description"]; const suspect = document.createElement("div");
suspect.appendChild(emotionDesc) suspect.classList.add("summary_suspect");
document.getElementsByClassName("suspects_list")[0].appendChild(suspect) const img = document.createElement("img");
}) img.src = NPC_IMAGE_PATH + npcid;
suspect.appendChild(img);
const emotionTitle = document.createElement("h2");
emotionTitle.classList.add("explain_suspect_emotion_title");
emotionTitle.textContent = "Ce suspect était "
+ finalResults["npcs"][npcid]["reaction"] + ".";
suspect.appendChild(emotionTitle);
const emotionDesc = document.createElement("p");
emotionDesc.classList.add("explain_suspect_emotion_description");
emotionDesc.textContent = "Cette émotion se caractérise par "
+ finalResults["npcs"][npcid]["description"];
suspect.appendChild(emotionDesc);
suspectListElement.appendChild(suspect);
});
}); });
} }
async function setGameData() { async function setGameData() {
data = {}; const response = await makeAPIRequest("getGameData");
response = await makeAPIRequest("getGameData"); gameData = response["gamedata"];
gamedata = response["gamedata"];
username = response["username"]; username = response["username"];
npcs_ids = Object.keys(gamedata["npcs"]).sort((a, b) => 0.5 - Math.random()) npcsIds = Object.keys(gameData["npcs"]).sort(() => 0.5 - Math.random());
} }
/**
* Initialize the game, by setting the game data, initializing the socket, rendering the answer
* selection panel, rendering the interrogation view, setting questions buttons listeners,
* setting introduction and interrogation listeners, showing the introduction view and setting the
* introduction image as the game background.
*/
async function initGame() { async function initGame() {
await setGameData(); await setGameData();
initSock(); initSock();
renderAnswerSelectionPanel(); renderAnswerSelectionPanel();
renderInterogation(); renderInterrogation();
setQuestionButtonsListeners() setQuestionButtonsListeners()
setListenerToInterrogationSuspectPreviousBtn() setIntroductionAndInterrogationListeners();
setListenerToIntroductionNextBtn() showFirstClassElement("introduction");
setListenerToInterrogationNextBtn(); setGameBackground(INTRO_IMAGE_PATH);
show("introduction");
setGameBackground(intro_image_path);
} }
initGame(); initGame();