From 2f96d16e54c415c6cbcfbeb86ff5f08417b3bbab Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Mon, 20 Mar 2023 17:12:43 +0100 Subject: [PATCH 1/7] [Client] Provide valid HTML on error page --- truthinquiry/templates/errorhandler.html | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/truthinquiry/templates/errorhandler.html b/truthinquiry/templates/errorhandler.html index 843124c..0ca40e4 100644 --- a/truthinquiry/templates/errorhandler.html +++ b/truthinquiry/templates/errorhandler.html @@ -1,2 +1,20 @@ - -

{{desc}}

+ + + + + Truth Inquiry - Error + + + + + + + + + + + + Image describing a HTTP error +

{{desc}}

+ + From 0d4b8ed3ac7b10a1d21ab50546a37ef28d49abf6 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Mon, 20 Mar 2023 17:29:18 +0100 Subject: [PATCH 2/7] Change meta HTML tag in legal pages This is required in order to pass W3C validation on these pages. --- truthinquiry/templates/legal.html | 2 +- truthinquiry/templates/licenses.html | 2 +- truthinquiry/templates/privacy.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/truthinquiry/templates/legal.html b/truthinquiry/templates/legal.html index bd3a586..a630411 100644 --- a/truthinquiry/templates/legal.html +++ b/truthinquiry/templates/legal.html @@ -1,6 +1,7 @@ + Truth Inquiry - Mentions légales @@ -13,7 +14,6 @@ -

Mentions légales

diff --git a/truthinquiry/templates/licenses.html b/truthinquiry/templates/licenses.html index e0f5472..c044aba 100644 --- a/truthinquiry/templates/licenses.html +++ b/truthinquiry/templates/licenses.html @@ -1,6 +1,7 @@ + Truth Inquiry - Licenses et crédits @@ -13,7 +14,6 @@ -

Licenses et crédits de Truth Inquiry

diff --git a/truthinquiry/templates/privacy.html b/truthinquiry/templates/privacy.html index f56d018..f528637 100644 --- a/truthinquiry/templates/privacy.html +++ b/truthinquiry/templates/privacy.html @@ -1,6 +1,7 @@ + Truth Inquiry - Politique de confidentialité @@ -13,7 +14,6 @@ -

Politique de confidentialité de Truth Inquiry

From 4acbb6214a09b1efd451d5dc6c81cd463216515b Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Mon, 27 Mar 2023 16:00:59 +0200 Subject: [PATCH 3/7] [Client] Improve game HTML code --- truthinquiry/static/css/game_ui_game.css | 16 +-- truthinquiry/static/js/game.js | 127 ++++++++++++++++------- truthinquiry/templates/game.html | 70 ++++++------- 3 files changed, 129 insertions(+), 84 deletions(-) diff --git a/truthinquiry/static/css/game_ui_game.css b/truthinquiry/static/css/game_ui_game.css index 53d33ba..f0182a6 100644 --- a/truthinquiry/static/css/game_ui_game.css +++ b/truthinquiry/static/css/game_ui_game.css @@ -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 { diff --git a/truthinquiry/static/js/game.js b/truthinquiry/static/js/game.js index 7aa3339..0ee12fa 100644 --- a/truthinquiry/static/js/game.js +++ b/truthinquiry/static/js/game.js @@ -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. + * + *

+ * When the passed npc is alone in the room, a npc is chosen at random as the returned partener. + *

*/ 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. + * + *

+ * When the passed npc is alone in the room, a npc is chosen at random as the returned partner. + *

*/ 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. + * + *

+ * 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. + *

*/ 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 = '

Couplable

'; - 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. + * + *

+ * It parses the payload send by the server containing the other players * nicknames and scores. + *

*/ 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. diff --git a/truthinquiry/templates/game.html b/truthinquiry/templates/game.html index 86cf93e..16e3da7 100644 --- a/truthinquiry/templates/game.html +++ b/truthinquiry/templates/game.html @@ -1,6 +1,7 @@ + Truth Inquiry @@ -13,89 +14,80 @@ -
- - - - - +
From 5966483e8528790b8c173e4c0bc523e653fa89f7 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Mon, 27 Mar 2023 16:01:30 +0200 Subject: [PATCH 4/7] [Client] Improve lobby HTML code --- truthinquiry/templates/lobby.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/truthinquiry/templates/lobby.html b/truthinquiry/templates/lobby.html index bcf3a9c..61ec226 100644 --- a/truthinquiry/templates/lobby.html +++ b/truthinquiry/templates/lobby.html @@ -1,6 +1,7 @@ + Truth Inquiry - Salon @@ -13,11 +14,10 @@ - - - +
From c6687748a2c34324210c1ab3b1040ce1c0a6b8ad Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Mon, 27 Mar 2023 16:01:56 +0200 Subject: [PATCH 5/7] [Client] Improve homepage code --- truthinquiry/static/css/game_ui_start.css | 17 +++++++++++--- truthinquiry/templates/index.html | 28 ++++++++++++----------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/truthinquiry/static/css/game_ui_start.css b/truthinquiry/static/css/game_ui_start.css index 18fe960..3c8799c 100644 --- a/truthinquiry/static/css/game_ui_start.css +++ b/truthinquiry/static/css/game_ui_start.css @@ -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 { diff --git a/truthinquiry/templates/index.html b/truthinquiry/templates/index.html index 124de84..824a2af 100644 --- a/truthinquiry/templates/index.html +++ b/truthinquiry/templates/index.html @@ -1,6 +1,7 @@ + Truth Inquiry @@ -13,26 +14,27 @@ -
-
-
- -
+
+ +
  • + +
  • +

    Truth Inquiry

    -
    -
    -
    +

    Navigateur non supporté

    From 8aed3a99da62b357a425a1480408b80accf72883 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Mon, 27 Mar 2023 21:54:55 +0200 Subject: [PATCH 6/7] [Client] Improve unsupported browser and footer code and design --- truthinquiry/static/css/game_ui.css | 18 ++++++++++++---- truthinquiry/templates/game.html | 22 ++++++++++---------- truthinquiry/templates/index.html | 24 +++++++++++----------- truthinquiry/templates/lobby.html | 32 ++++++++++++++--------------- 4 files changed, 53 insertions(+), 43 deletions(-) diff --git a/truthinquiry/static/css/game_ui.css b/truthinquiry/static/css/game_ui.css index fd41bad..bbf5f8e 100644 --- a/truthinquiry/static/css/game_ui.css +++ b/truthinquiry/static/css/game_ui.css @@ -31,7 +31,6 @@ /* 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; @@ -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; diff --git a/truthinquiry/templates/game.html b/truthinquiry/templates/game.html index 16e3da7..c25ecfe 100644 --- a/truthinquiry/templates/game.html +++ b/truthinquiry/templates/game.html @@ -89,8 +89,8 @@
    -
    -
    +
    +

    Navigateur non supporté

    -
    -
    + + diff --git a/truthinquiry/templates/index.html b/truthinquiry/templates/index.html index 824a2af..82243e4 100644 --- a/truthinquiry/templates/index.html +++ b/truthinquiry/templates/index.html @@ -16,7 +16,6 @@ -
  • @@ -59,8 +58,9 @@
  • -
    -
    +
    +
    +

    Navigateur non supporté

    -
    -
    + +