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

Merge branch 'main' of gitschool:ThomasRubini/SAE-A2-TruthInquiry

Browse Source
This commit is contained in:
Thomas Rubini 2023-03-29 10:11:58 +02:00
commit 4835f0b077
No known key found for this signature in database
GPG Key ID: C7D287C8C1CAC373
12 changed files with 253 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
truthinquiry/static/css/game_ui.css
View File

@ -31,10 +31,9 @@
/* Colors */
color-scheme: dark;
--alert-dialog-background-color: #000000DF;
--button-links-gray-color: #939393;
--dark-theme-background-color: #213C40;
--game-black: #000000;
--game-blue: #0096FF;
--game-blue: #7DDCFF;
--game-green: #008000;
--game-grey: #5A5656;
--game-red: #BD1E1E;
@ -54,6 +53,10 @@ body {
margin: var(--body-margin);
}
noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_dialog_title {
display: block;
}
.action_button {
background-color: var(--game-red);
border-color: var(--game-black);
@ -100,21 +103,23 @@ body {
/* Footer */
.footer_link {
color: var(--game-white);
font-family: sans-serif;
font-family: "Roboto Mono", sans-serif;
font-size: 1em;
font-weight: bold;
margin: 0.5em;
text-align: center;
transition: color 0.25s;
}
.footer_link:hover {
color: var(--button-links-gray-color);
color: var(--game-black);
}
.footer_links {
align-items: center;
align-self: flex-end;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: var(--footer-links-height);
justify-content: flex-end;
}
@ -130,6 +135,8 @@ body {
/* Alert dialogs */
.alert_dialog {
background-color: var(--game-grey);
border-color: var(--game-white);
border-radius: var(--button-and-dialog-border-radius);
display: none;
font-family: "Spicy Rice", serif;
@ -137,6 +144,7 @@ body {
flex-wrap: nowrap;
justify-content: center;
left: 50%;
overflow: auto;
padding: 2em;
position: absolute;
top: 50%;
@ -149,6 +157,8 @@ body {
}
.alert_dialog_title {
margin-bottom: 0.5em;
margin-top: 0.5em;
font-size: 2em;
font-weight: normal;
text-align: center;

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

@ -81,6 +81,10 @@ html {
margin: 0.25em;
}
.home_button, .next_btn, .suspects {
padding: 0;
}
.home_button, .next_btn, .suspect_emotion_chooser {
border: none;
}
@ -101,6 +105,10 @@ html {
margin: 1em;
}
.suspect {
list-style-type: none;
}
.suspect_picture {
height: 15em;
width: 15em;
@ -118,7 +126,6 @@ html {
.home_button, .next_btn {
fill: var(--game-red);
height: 5em;
padding: 0;
width: 5em;
}
@ -192,13 +199,8 @@ html {
.culprit_icon {
fill: var(--game-white);
height: 1em;
width: 1em;
}
.culprit_btn_text {
margin: 0;
margin-left: 0.25em;
margin-right: 0.25em;
width: 1em;
}
.culprit_btn_checked {

13
truthinquiry/static/css/game_ui_legal.css
View File

@ -1,10 +1,21 @@
/* Common properties */
html {
background-color: var(--game-black);
background-color: var(--game-grey);
color: var(--game-white);
font-family: "Roboto Mono", "sans-serif";
}
body {
display: flex;
flex-direction: column;
height: calc(100vh - var(--body-margin) * 2);
width: calc(100vw - var(--body-margin) * 2);
}
footer {
margin-top: auto;
}
/* Legal links and texts */
.legal_text_description, .legal_text_last_update, .legal_text_title {
margin: 0;

17
truthinquiry/static/css/game_ui_start.css
View File

@ -1,13 +1,18 @@
/* Common properties */
:root {
--game-begin-margin: 2em;
--header-actions-height: 3em;
--header-actions-side: 4em;
}
input, .action_button, .game_mode_item_title {
font-family: "Titan One", sans-serif;
}
.back_button, .theme_switcher_btn {
height: var(--header-actions-side);
width: var(--header-actions-side);
}
.game_begin, .game_mode_item, .game_mode_item_input_text_single_line, .game_mode_items, .game_mode_selection {
align-items: center;
display: flex;
@ -61,7 +66,7 @@ input::placeholder {
*/
height: calc(100vh - var(--body-margin) * 2
- var(--game-begin-margin) * 2
- var(--header-actions-height)
- var(--header-actions-side)
- var(--footer-links-height));
justify-content: center;
margin: var(--game-begin-margin);
@ -80,10 +85,16 @@ input::placeholder {
margin: 0;
}
.header_action {
list-style-type: none;
}
.header_actions {
display: flex;
height: var(--header-actions-height);
height: var(--header-actions-side);
justify-content: flex-end;
margin: 0;
padding: 0;
}
.action_button {

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

@ -74,9 +74,12 @@ function showEmotionAndCulpritChoicesView() {
}
/**
* Parse the gamedata object to retreive the room in which the npc passed as parameter is
* located and the second npc located in the same room. When the passed npc is alone in the
* room, a npc is choosen at random as the returned partener
* Parse the gamedata object to retreive the room in which the npc passed as parameter is located
* and the second npc located in the same room.
*
* <p>
* When the passed npc is alone in the room, a npc is chosen at random as the returned partener.
* </p>
*/
function getNpcLocationAndPartner(npcid) {
const data = {};
@ -102,9 +105,12 @@ function getNpcLocationAndPartner(npcid) {
}
/**
* Parse the gamedata object to retreive the room in which the npc passed as parameter is
* located and the second npc located in the same room. When the passed npc is alone in the
* room, a npc is choosen at random as the returned partener
* Parse the gamedata object to retreive the room in which the npc passed as parameter is located
* and the second npc located in the same room.
*
* <p>
* When the passed npc is alone in the room, a npc is chosen at random as the returned partner.
* </p>
*/
function disableCulpritButtons(culprit_choices_element, selected_suspect) {
let childrenCulpritChoicesElement = culprit_choices_element.children;
@ -123,8 +129,8 @@ function disableCulpritButtons(culprit_choices_element, selected_suspect) {
}
/**
* Return the npc designed as the "culprit" of the crime, the culprit
* is determined by being the only npc alone in a room.
* Return the npc designed as the "culprit" of the crime, the culprit is determined by being the
* only npc alone in a room.
*/
function getCulprit() {
let culprit = null;
@ -140,8 +146,8 @@ function getCulprit() {
}
/**
* handler for the function call "askQuestion" for a type_zero question
* also known as "Where were you ?"
* Handler for the function call {@link askQuestion} for a type_zero question also known as
* "Where were you ?".
*/
async function askTypeZeroQuestion() {
askQuestion(npcLocationAndPartner => gameData["npcs"][currentNpc]["QA_0"].replace(
@ -149,8 +155,8 @@ async function askTypeZeroQuestion() {
}
/**
* handler for the function call "askQuestion" for a type_one question
* also known as "With who were you with ?"
* Handler for the function call {@link askQuestion} for a type_one question also known as
* "With who were you with ?".
*/
async function askTypeOneQuestion() {
askQuestion(npcLocationAndPartner => gameData["npcs"][currentNpc]["QA_1"].replace(
@ -158,11 +164,14 @@ async function askTypeOneQuestion() {
}
/**
* This function primary goal is to display the answer to the question the player
* asked to a npc.
* It parses the gamedata object to retreive the answer of the npc
* and fill the variables left in the string accordingly to the type of the question.
* Then it fetches the reacion of the npc and diplays it all.
* This function's primary goal is to display the answer to the question the player
* asked to a npc.
*
* <p>
* It parses the gamedata object to retreive the answer of the npc and fill the variables left in
* the string accordingly to the type of the question; then it fetches the reacion of the npc and
* diplays it all.
* </p>
*/
async function askQuestion(buildAnswer) {
unsetQuestionButtonsListeners();
@ -187,7 +196,7 @@ async function askQuestion(buildAnswer) {
}
/**
* This function sends the player's answers to the server
* Send the player's answers to the server.
*/
async function sendAnswers() {
const selections = document.getElementsByClassName("suspect_emotion_chooser");
@ -209,8 +218,10 @@ async function sendAnswers() {
* then decide on which npc is the culprit.
*/
function renderAnswerSelectionPanel() {
const culpritChoices = document.getElementById("culprits_choices");
npcsIds.forEach(element => {
const suspect = document.createElement("div");
const suspect = document.createElement("li");
suspect.classList.add("suspect");
const suspectEmotionChooser = document.createElement("select");
@ -228,14 +239,20 @@ function renderAnswerSelectionPanel() {
const img = document.createElement('img');
img.classList.add("suspect_picture");
img.setAttribute("alt", "Image d'un suspect");
img.src = NPC_IMAGE_PATH + element;
suspect.appendChild(img);
const button = document.createElement("button");
button.classList.add("culprit_btn", "action_button");
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>';
const culpritChoices = document.getElementById("culprits_choices");
button.appendChild(createCulpritSvgElement("culprit_checked_icon",
"M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z", true));
button.appendChild(createCulpritSvgElement("culprit_unchecked_icon",
"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",
false));
button.appendChild(document.createTextNode("Couplable"));
button.addEventListener("click", () => {
disableCulpritButtons(culpritChoices, suspect);
@ -248,7 +265,30 @@ function renderAnswerSelectionPanel() {
}
/**
* Show the screen in which the player asks auestions to the npcs
* Create a culprit SVG {@link Element}.
*
* @param {String} buttonCssClass the specific CSS class to add to the culprit button
* @param {String} pathAttributeValue the value of the path attribute of the SVG element generated
* @returns a svg {@link Element} with a culprit button depending of the custom CSS class, path
* attribute value and isHidden values
*/
function createCulpritSvgElement(buttonCssClass, pathAttributeValue, isHidden) {
const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElement.classList.add(buttonCssClass, "culprit_icon");
if (isHidden) {
svgElement.classList.add("hidden");
}
svgElement.setAttribute("viewBox", "0 0 48 48");
const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathElement.setAttribute("d", pathAttributeValue);
svgElement.appendChild(pathElement);
return svgElement;
}
/**
* Show the screen in which the player asks questions to the npcs.
*/
function renderInterrogation() {
document.getElementById("QA_0").textContent = gameData["questions"]["QA_0"];
@ -257,11 +297,12 @@ function renderInterrogation() {
const interrogationSuspects = document.getElementById("interrogation_suspects");
npcsIds.forEach(element => {
const suspect = document.createElement("div");
const suspect = document.createElement("li");
suspect.classList.add("suspect");
const img = document.createElement('img');
img.classList.add("suspect_picture");
img.setAttribute("alt", "Image d'un suspect");
img.src = NPC_IMAGE_PATH + element;
suspect.appendChild(img);
@ -281,12 +322,14 @@ function renderInterrogation() {
});
}
/**
* Initialize the websocket for this page, its primary use is to
* show the final page once it receive the event that all player have finished
* it parses the payload send by the server containing the other players
* Initialize the websocket for this page, its primary use is to show the final page once it
* receives the event that all players have finished.
*
* <p>
* It parses the payload send by the server containing the other players
* nicknames and scores.
* </p>
*/
function initSock() {
const socket = io({
@ -306,9 +349,12 @@ function initSock() {
socket.on("gamefinished", finalResults => {
hideFirstClassElement("emotion_and_culprit_choices");
document.querySelector(".reveal_score").textContent =
Object.values(finalResults["player"][username])
.filter(x => x == true).length + " / 5";
const revealScoreElement = document.createElement("h2");
revealScoreElement.classList.add("reveal_score");
revealScoreElement.textContent = Object.values(finalResults["player"][username])
.filter(x => x == true).length + " / 5";
document.querySelector(".player_score").appendChild(revealScoreElement);
const playerListElement = document.querySelector(".players_list");
@ -331,9 +377,14 @@ function initSock() {
const culpritName = gameData["npcs"][culprit]["name"];
document.querySelector(".reveal_culprit_title").textContent += " " + culpritName;
const culpritElement = document.getElementById("culprit");
culpritElement.src = NPC_IMAGE_PATH + culprit;
const culpritElement = document.createElement("img");
culpritElement.classList.add("suspect_picture");
culpritElement.setAttribute("alt", "Image du ou de la coupable, " + culpritName);
culpritElement.src = NPC_IMAGE_PATH + culprit;
culpritElement.setAttribute("draggable", "false");
document.querySelector(".reveal_culprit")
.appendChild(culpritElement);
showFirstClassElement("results_game");
setGameBackground(RESULTS_IMAGE_PATH);
@ -346,6 +397,7 @@ function initSock() {
suspect.classList.add("summary_suspect");
const img = document.createElement("img");
img.setAttribute("alt", "Image d'un suspect");
img.src = NPC_IMAGE_PATH + npcid;
suspect.appendChild(img);
@ -366,12 +418,11 @@ function initSock() {
});
});
}
/**
* This function retreive the initial gamedata of the game
* containing all of the needed textual ressources to make
* the game playable
*/
/**
* Retreive the initial gamedata of the game containing all of the needed textual ressources to
* make the game playable.
*/
async function setGameData() {
const response = await makeAPIRequest("getGameData");
gameData = response["gamedata"];
@ -380,7 +431,7 @@ async function setGameData() {
}
/**
* Initialize the game, by setting the game data, initializing the socket, rendering the answer
* 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.

22
truthinquiry/templates/errorhandler.html
View File

@ -1,2 +1,20 @@
<img src="{{url}}">
<p> {{desc}} </p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry - Error</title>
<link rel="icon" href="/static/images/favicon/favicon_32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/static/images/favicon/favicon_64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/static/images/favicon/favicon_96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/static/images/favicon/favicon_128.png" type="image/png" sizes="128x128">
<link rel="icon" href="/static/images/favicon/favicon_192.png" type="image/png" sizes="192x192">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="256x256">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="{{url}}" alt="Image describing a HTTP error">
<p>{{desc}}</p>
</body>
</html>

92
truthinquiry/templates/game.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_game.css">
@ -13,92 +14,83 @@
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body class="game_app">
<div class="current_background"></div>
<div class="introduction hidden">
<section class="introduction hidden">
<h1 class="introduction_title">Truth Inquiry</h1>
<p class="introduction_text">Bienvenue dans Truth Inquiry, vous allez intégrer la peau d’un enquêteur.<br><br>Vous avez été donné responsable de résoudre une enquête et devez trouver le coupable d’un vol.<br><br>Cliquez sur la flèche pour découvrir les suspects et les interroger.</p>
<button id="introduction_next_btn" class="next_btn" aria-label="Commencer">
<button id="introduction_next_btn" class="next_btn" aria-label="Commencer" title="Cliquez ici pour commencer à jouer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z" />
</svg>
</button>
</div>
<div class="interrogation hidden">
</section>
<section class="interrogation hidden">
<h1 class="interrogation_title">Suspects</h1>
<button id="interrogation_next_btn" class="next_btn" aria-label="Passer à la suite">
<button id="interrogation_next_btn" class="next_btn" aria-label="Passer à la suite" title="Cliquez ici pour passer à la suite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z" />
</svg>
</button>
<div class="suspects" id="interrogation_suspects">
</div>
</div>
<div class="emotion_and_culprit_choices hidden">
<ul class="suspects" id="interrogation_suspects"></ul>
</section>
<section class="emotion_and_culprit_choices hidden">
<h1 class="emotion_and_culprit_choices_title">Choix du coupable et émotion des suspects</h1>
<button id="emotion_and_culprit_choices_next_btn" class="next_btn hidden" aria-label="Passer à la suite">
<button id="emotion_and_culprit_choices_next_btn" class="next_btn hidden" aria-label="Passer à la suite" title="Cliquez ici pour passer à la suite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z" />
</svg>
</button>
<div class="suspects" id="culprits_choices">
</div>
</div>
<div class="interrogation_suspect hidden">
<ul class="suspects" id="culprits_choices"></ul>
</section>
<section class="interrogation_suspect hidden">
<h1 class="interrogation_title">Poser une question au suspect</h1>
<div class="questions_and_image">
<button id="interrogation_suspect_previous_btn" class="next_btn" aria-label="Revenir à la sélection du suspect">
<button id="interrogation_suspect_previous_btn" class="next_btn" aria-label="Revenir à la sélection du suspect" title="Cliquez ici pour revenir à la sélection du suspect">
<svg class="next_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z"/>
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z" />
</svg>
</button>
<img class="image_interrogation suspect_picture" id="currentNpcPicure" src="">
<img class="image_interrogation suspect_picture" id="currentNpcPicure" alt="Image du suspect en cours d'interrogation" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
<div class="questions_list">
<button class="action_button question_button" id="QA_0" >Où étiez vous hier soir&nbsp;?</button>
<button class="action_button question_button" id="QA_1" >Avec qui étiez vous&nbsp;?</button>
<button class="action_button question_button" id="QA_0">Où étiez vous hier soir&nbsp;?</button>
<button class="action_button question_button" id="QA_1">Avec qui étiez vous&nbsp;?</button>
</div>
</div>
<div class="question_answer hidden">
<h1 class="anwser_title">Réponse du suspect à la question</h1>
<p class="suspect_answer"></p>
</div>
</div>
<div class="results_game hidden">
</section>
<section class="results_game hidden">
<h1 class="results_title">Résultats</h1>
<a href="/" title="Cliquez ici pour revenir à la page d'accueil du jeu">
<button id="return_to_home_btn" class="home_button" aria-label="Revenir à la page d'accueil du jeu">
<svg class="home_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M6.9 43.1V17.4L24 4.55 41.15 17.4v25.7h-12.9V27.7h-8.5v15.4Z"/>
</svg>
</button>
<a id="return_to_home_btn" class="home_button" href="/" aria-label="Revenir à la page d'accueil du jeu" title="Cliquez ici pour revenir à la page d'accueil du jeu">
<svg class="home_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M6.9 43.1V17.4L24 4.55 41.15 17.4v25.7h-12.9V27.7h-8.5v15.4Z" />
</svg>
</a>
<div class="reveal_and_scores">
<div class="scores">
<div class="player_score">
<h1 class="score_title">Votre score est de&nbsp;:</h1>
<h2 class="reveal_score">4/5</h2>
</div>
<div class="results_game_multiplayer">
<div class="players_list">
</div>
<div class="players_list"></div>
</div>
</div>
<div class="reveal_culprit">
<h2 class="reveal_culprit_title">Le coupable était ...</h2>
<img class="suspect_picture" id="culprit" draggable="false">
<h2 class="reveal_culprit_title">Le coupable était&nbsp;...</h2>
</div>
</div>
<div class="summary">
<h1 class="summary_title">Débrief</h1>
<div class="suspects_list">
</div>
<div class="suspects_list"></div>
</div>
</div>
</section>
<div class="alert_dialog_background"></div>
<div class="unsupported_browser">
<div id="unsupported_browser_dialog" class="alert_dialog">
<section class="unsupported_browser">
<dialog id="unsupported_browser_dialog" class="alert_dialog">
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
<p class="alert_dialog_msg unsupported_browser_msg"></p>
<div class="footer_links">
@ -106,21 +98,21 @@
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
<noscript>
<div class="alert_dialog_background" style="display: block;"></div>
<div class="js_requirement">
<div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
<h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="alert_dialog_background"></div>
<section class="js_requirement">
<dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
<h3 class="alert_dialog_title">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
</noscript>
<script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
<script src="/static/js/api.js"></script>

52
truthinquiry/templates/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_start.css">
@ -13,26 +14,26 @@
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body class="game_app">
<div class="alert_dialog_background"></div>
<div class="game_start">
<div class="header_actions">
<button class="theme_switcher" aria-label="Changer de thème">
<svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<path d="M24 34q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM2 25.5v-3h8v3Zm36 0v-3h8v3ZM22.5 10V2h3v8Zm0 36v-8h3v8Zm-9.45-30.85L8.1 10.2l2.1-2.1 4.95 4.95ZM37.8 39.9l-4.95-4.95 2.1-2.1 4.95 4.95Zm-2.85-24.75-2.1-2.1L37.8 8.1l2.1 2.1ZM10.2 39.9l-2.1-2.1 4.95-4.95 2.1 2.1Z"/>
</svg>
</button>
</div>
<section class="game_start">
<menu class="header_actions">
<li class="header_action">
<button class="theme_switcher" aria-label="Changer de thème">
<svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M24 34q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM2 25.5v-3h8v3Zm36 0v-3h8v3ZM22.5 10V2h3v8Zm0 36v-8h3v8Zm-9.45-30.85L8.1 10.2l2.1-2.1 4.95 4.95ZM37.8 39.9l-4.95-4.95 2.1-2.1 4.95 4.95Zm-2.85-24.75-2.1-2.1L37.8 8.1l2.1 2.1ZM10.2 39.9l-2.1-2.1 4.95-4.95 2.1 2.1Z"/>
</svg>
</button>
</li>
</menu>
<div class="game_begin">
<h1 class="game_title">Truth Inquiry</h1>
<button class="action_button" id="play_button">Jouer</button>
</div>
</div>
<div class="game_mode_selection hidden">
</section>
<section class="game_mode_selection hidden">
<button id="back_button" aria-label="Retourner à la page précédente">
<svg class="back_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<svg class="back_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z"/>
</svg>
</button>
@ -56,9 +57,10 @@
</div>
</div>
</div>
</div>
<div class="unsupported_browser">
<div id="unsupported_browser_dialog" class="alert_dialog">
</section>
<div class="alert_dialog_background"></div>
<section class="unsupported_browser">
<dialog id="unsupported_browser_dialog" class="alert_dialog">
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
<p class="alert_dialog_msg unsupported_browser_msg"></p>
<div class="footer_links">
@ -66,21 +68,21 @@
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
<noscript>
<div class="alert_dialog_background" style="display: block;"></div>
<div class="js_requirement">
<div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
<h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="alert_dialog_background"></div>
<section class="js_requirement">
<dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
<h3 class="alert_dialog_title">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
</noscript>
<footer>
<div class="footer_links">

2
truthinquiry/templates/legal.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry - Mentions légales</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_legal.css">
@ -13,7 +14,6 @@
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h1 class="legal_text_title">Mentions légales</h1>

2
truthinquiry/templates/licenses.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry - Licenses et crédits</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_legal.css">
@ -13,7 +14,6 @@
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h1 class="legal_text_title">Licenses et crédits de Truth Inquiry</h1>

44
truthinquiry/templates/lobby.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry - Salon</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_lobby.css">
@ -13,11 +14,10 @@
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body class="game_app">
<input type="hidden" id="game_id" name="game_id" value={{gameid}} />
<div class="join_room_view hidden">
<input type="hidden" id="game_id" name="game_id" value={{gameid}}>
<section class="join_room_view hidden">
<h1 class="room_title">Salon</h1>
<div class="unjoinded_players_list">
<h2 class="players_title">Joueurs</h2>
@ -26,8 +26,8 @@
<input type="text" id="game_username" placeholder="Entrez un pseudo" value="" required="required" maxlength="20">
<button id="join_game_button" class="action_button">Rejoindre</button>
<p class="game_start_failed hidden">Une erreur s'est produite. Réessayez ultérieurement.</p>
</div>
<div class="room_view hidden">
</section>
<section class="room_view hidden">
<div class="room_view_container">
<h1 class="room_title">Salon</h1>
<div class="room_code_text hidden">
@ -57,10 +57,10 @@
</div>
<h3 class="multi_player_mode_waiting_for_host hidden">En attente du démarrage de la partie par l'hôte&nbsp;…</h3>
</div>
</div>
</section>
<div class="alert_dialog_background"></div>
<div class="unsupported_browser">
<div id="unsupported_browser_dialog" class="alert_dialog">
<section class="unsupported_browser">
<dialog id="unsupported_browser_dialog" class="alert_dialog">
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
<p class="alert_dialog_msg unsupported_browser_msg"></p>
<div class="footer_links">
@ -68,21 +68,21 @@
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</dialog>
</section>
<noscript>
<div class="alert_dialog_background" style="display: block;"></div>
<div class="js_requirement">
<div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
<h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
</div>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
<div class="alert_dialog_background"></div>
<section class="js_requirement">
<dialog id="js_requirement_dialog" class="alert_dialog alert_dialog_show">
<h3 class="alert_dialog_title">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</dialog>
</section>
</noscript>
<script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
<script src="/static/js/api.js"></script>

2
truthinquiry/templates/privacy.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry - Politique de confidentialité</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_legal.css">
@ -13,7 +14,6 @@
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h1 class="legal_text_title">Politique de confidentialité de Truth Inquiry</h1>