atomic commit

truthinquiry/routes/routes_api.py

@@ -90,7 +90,7 @@ def join_game():
     flask.session["is_owner"] = False
     flask.session["username"] = username
 
-    socket_io.emit("playersjoin", [flask.session["username"]], room="game."+game.game_id)
+    socket_io.emit("playersjoin", flask.session["username"], room="game."+game.game_id)
 
     return {"error": 0}
 

truthinquiry/static/css/game_ui.css

@@ -17,6 +17,23 @@
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+@font-face {
+    font-display: swap;
+    font-family: "Park Lane";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../fonts/park_lane/parklane.regular.otf") format('otf'), url("../fonts/park_lane/parklane.regular.ttf") format('truetype');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Ironick";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../fonts/ironick_nf/IronickNF.otf") format('otf'), url("../fonts/ironick_nf/IronickNF.ttf") format('truetype');
+}
+
+
 @font-face {
     font-display: swap;
     font-family: "Roboto Mono";
@@ -37,6 +54,8 @@
     --game-green: #008000;
     --game-grey: #5A5656;
     --game-red: #BD1E1E;
+    --game-gold:  #E5BA73;
+    --game-dark-gold:  #B9935A;
     --game-white: #FFFFFF;
     --light-theme-background-color: #B1EDE8;
     /* Sizes */
@@ -58,7 +77,7 @@ noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_d
 }
 
 .action_button {
-    background-color: var(--game-red);
+    background-color: var(--game-dark-gold);
     border-color: var(--game-black);
     border-radius: var(--button-and-dialog-border-radius);
     border-style: solid;
@@ -89,8 +108,14 @@ noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_d
 /* Utility classes */
 .hidden {
     display: none !important;
+    transition: all 0.5s ease;
 }
 
+.gray {
+    filter: grayscale(1);
+}
+
+
 /* Links */
 .link {
     text-decoration: none;

truthinquiry/static/css/game_ui_game.css

@@ -12,8 +12,8 @@ html {
     font-family: "Titan One", sans-serif;
 }
 
-.anwser_title, .emotion_and_culprit_choices_title, .introduction_text, .introduction_title, .interrogation_title, .results_title, .reveal_culprit_title, .score_title, .summary_title {
-    font-family: "Spicy Rice", serif;
+.anwser_title, .emotion_and_culprit_choices_title, .introduction_text, .introduction_title, .interrogation_title, .results_title,.introduction_right ,.reveal_culprit_title, .score_title, .summary_title {
+    font-family: "Ironick", serif;
 }
 
 .culprit_btn, .interrogation, .player_score, .question_answer, .questions_and_image, .reveal_culprit, .reveal_score, .scores, .summary, .summary_suspect, .suspect_picture[alt], .suspect, .suspects, .suspects_list {
@@ -50,7 +50,7 @@ html {
 }
 
 .emotion_and_culprit_choices_title, .interrogation_title, .introduction_title, .results_title, .reveal_culprit_title, .reveal_score, .score_title, .summary_title {
-    color: var(--game-red);
+    color: var(--game-gold);
 }
 
 .emotion_and_culprit_choices_title, .results_title, .reveal_culprit_title, .score_title, .summary, .summary_title, .suspect_picture[alt] {
@@ -110,8 +110,32 @@ html {
 }
 
 .suspect_picture {
+    border: var(--game-dark-gold) solid 5px;
+    border-radius: 1em;
     height: 15em;
     width: 15em;
+    transition: all 0.5s ease;
+    
+}
+.npc_answer{
+    flex-direction: column;
+    width: 40em;
+}
+.image_interrogation{
+    height: 25em;
+    width: 25em;
+}
+
+.question_answer{
+border: var(--game-dark-gold) solid;
+border-radius: 1em;
+height: 5em;
+background-color: #000000d0;
+}
+
+.suspect_picture:hover {
+    filter: grayscale(0);
+    transition: all 0.5s ease;
 }
 
 .suspect_picture[alt] {
@@ -151,12 +175,21 @@ html {
 
 /* Introduction */
 .introduction {
+    padding: 1em;
+    display: flex;
+    flex-direction: row;
+}
+.introduction_left{
     padding: 1em;
     max-width: 50vw;
 }
-
-.introduction_text {
+.introduction_right{
     font-size: 2em;
+    padding: 1em;
+    max-width: 50vw;
+}
+.introduction_text {
+    font-size: 3em;
     margin-bottom: 1em;
     margin-top: 1em;
 }
@@ -166,13 +199,25 @@ html {
     text-align: left;
 }
 
+.inspector_picture{
+    border: var(--game-dark-gold) solid 5px;
+    border-radius: 1em;
+    max-width: 45vw;
+    background-color: #000000d0;
+}
+
+.username{
+    font-size: 3em;
+    margin-bottom: 1em;
+    margin-top: 1em;
+}
+
 /* Interrogation */
 .ask_button {
     background-color: var(--game-white);
     color: var(--game-black);
     text-transform: none;
 }
-
 .anwser_title {
     font-size: 2.5em;
     margin: 0.25em;
@@ -235,6 +280,13 @@ html {
 }
 
 /* Results and scores */
+.explain {
+    border: var(--game-dark-gold) solid;
+    border-radius: 1em;
+    background-color: #000000d0;
+}
+
+
 .explain_suspect_emotion_description {
     font-size: 1.25em;
     font-weight: normal;

truthinquiry/static/css/game_ui_lobby.css

@@ -3,6 +3,18 @@ html {
     background-color: var(--game-black);
     color: var(--game-white);
 }
+.current_background {
+    background-position: center;
+    background-size: cover;
+    filter: blur(4px);
+    position: fixed;
+    height: 100%;
+    left: 0;
+    top: 0;
+    width: 100%;
+    /* Place the background behind everything */
+    z-index: -9999;
+}
 
 .action_button, .multi_player_mode_choice_title, .multi_player_mode_waiting_for_host, .player_name, .players_title, .rounds_count_title, .room_code_text_title, .room_title, #game_username, #rounds_count {
     font-family: "Titan One", sans-serif;
@@ -133,6 +145,9 @@ html {
 
 .multi_player_mode_choices {
     padding: 1em;
+    border: var(--game-dark-gold) solid;
+    border-radius: 1em;
+    background-color: #000000d0;
 }
 
 /* Rounds count */
@@ -163,7 +178,6 @@ html {
     border-radius: 0.75em;
     font-size: 1.25em;
     max-height: 12em;
-    min-width: 25em;
     overflow-y: scroll;
     padding: 0.25em;
 }

truthinquiry/static/css/game_ui_start.css

@@ -54,7 +54,7 @@ input::placeholder {
 }
 
 .game_begin {
-    background-image: url("../images/start_background.png");
+    background-image: url("../images/start_background.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -73,8 +73,8 @@ input::placeholder {
 }
 
 .game_title {
-    color: var(--game-red);
-    font-family: "Spicy Rice", serif;
+    color: var(--game-gold);
+    font-family: "Ironick", serif;
     font-size: 5em;
     font-weight: bold;
     margin: 0.25em;
@@ -109,7 +109,7 @@ input::placeholder {
 }
 
 .game_mode_selection {
-    background-image: url("../images/start_background.png");
+    background-image: url("../images/start_background.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -133,10 +133,6 @@ input::placeholder {
 }
 
 .game_mode_choice_selector {
-    background-color: var(--game-black);
-    border-color: var(--game-white);
-    border-style: solid;
-    border-radius: 1.5em;
     padding: 1em;
 }
 

truthinquiry/static/js/game.js

@@ -187,7 +187,7 @@ async function askQuestion(buildAnswer) {
     // Sleep for 4 sec
     await new Promise(r => setTimeout(r, 4000));
 
-    document.getElementById("currentNpcPicure").src = NPC_IMAGE_PATH + currentNpc;
+    document.getElementById("currentNpcPicure").src = NPC_REACTION_PATH + currentNpc;
     hideFirstClassElement("question_answer");
 
     document.querySelector(".suspect_answer").textContent = "";
@@ -296,14 +296,27 @@ function renderInterrogation() {
 
     const interrogationSuspects = document.getElementById("interrogation_suspects");
 
-    npcsIds.forEach(element => {
+    npcsIds.forEach(npc_id => {
         const suspect = document.createElement("li");
         suspect.classList.add("suspect");
 
+        const name = document.createElement('p')
+        name.textContent = gameData['npcs'][npc_id]["name"]
+        suspect.appendChild(name);
+
         const img = document.createElement('img');
+        img.id = "suspect_picture_of_" + npc_id
         img.classList.add("suspect_picture");
         img.setAttribute("alt", "Image d'un suspect");
-        img.src = NPC_IMAGE_PATH + element;
+        img.src = NPC_IMAGE_PATH + npc_id;
+        img.addEventListener("click", () => {
+            // TODO remove this listener when we know the questions has already been asked;
+            currentNpc = npc_id;
+            document.getElementById("suspect_picture_of_" + npc_id).classList.add("gray");
+            document.getElementById("currentNpcPicure").src = NPC_IMAGE_PATH + npc_id;
+            hideFirstClassElement("interrogation");
+            showFirstClassElement("interrogation_suspect");
+        });
         suspect.appendChild(img);
 
         const button = document.createElement("button");
@@ -311,17 +324,22 @@ function renderInterrogation() {
         button.textContent = "Interroger";
         button.addEventListener("click", () => {
             // TODO remove this listener when we know the questions has already been asked;
-            currentNpc = element;
-            document.getElementById("currentNpcPicure").src = NPC_IMAGE_PATH + element;
+            currentNpc = npc_id;
+            document.getElementById("suspect_picture_of_" + npc_id).classList.add("gray");
+            document.getElementById("currentNpcPicure").src = NPC_IMAGE_PATH + npc_id;
             hideFirstClassElement("interrogation");
             showFirstClassElement("interrogation_suspect");
         });
-
         suspect.appendChild(button);
         interrogationSuspects.appendChild(suspect);
     });
 }
 
+
+function renderIntroduction(){
+    document.getElementById("username").textContent += username;
+}
+
 /**
  * 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.
@@ -401,19 +419,22 @@ function initSock() {
                 img.src = NPC_IMAGE_PATH + npcid;
                 suspect.appendChild(img);
                 
+                const explain = document.createElement("div")
+                explain.classList.add("explain")
+
                 const emotionTitle = document.createElement("h2");
                 emotionTitle.classList.add("explain_suspect_emotion_title");
                 emotionTitle.textContent = "Ce suspect était "
                     + finalResults["npcs"][npcid]["reaction"] + ".";
                 
-                suspect.appendChild(emotionTitle);
+                explain.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);
-
+                explain.appendChild(emotionDesc);
+                suspect.appendChild(explain)
                 suspectListElement.appendChild(suspect);
             });
     });
@@ -439,6 +460,7 @@ async function setGameData() {
 async function initGame() {
     await setGameData();
     initSock();
+    renderIntroduction();
     renderAnswerSelectionPanel();
     renderInterrogation();
     setQuestionButtonsListeners()

truthinquiry/static/js/game_lobby.js

@@ -1,5 +1,13 @@
+const LOBBY_IMAGE_PATH = "/static/images/cuisine.png"
 // Display functions
 
+/*
+ * Set the current game background to the first element with the current_background CSS class.
+ */
+function setGameBackground(backgroundPath) {
+    document.querySelector(".current_background").style.backgroundImage = 'url("' + backgroundPath + '")';
+}
+
 /**
  * Display the invalid rounds count message element, by removing the hidden CSS class.
  *
@@ -353,8 +361,8 @@ function initSock() {
     })
 
     socket.on("playersjoin", username => {
-        document.querySelector(".player_names")
-            .appendChild(document.createTextNode(username + "\n"));
+        console.log(username);
+        document.querySelector(".player_names").textContent += username + "\n";
     });
 }
 
@@ -375,6 +383,7 @@ function initSock() {
  * </p>
  */
 async function initLobby() {
+    setGameBackground(LOBBY_IMAGE_PATH)
     getMembers()
     if (await hasJoinedRoom()) {
         initSock();

truthinquiry/templates/game.html

@@ -18,6 +18,7 @@
     <body class="game_app">
         <div class="current_background"></div>
         <section class="introduction hidden">
+            <div class="introduction_left">
                 <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" title="Cliquez ici pour commencer à jouer">
@@ -25,6 +26,11 @@
                         <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="introduction_right">
+                <p id="username">Le celebre inspecteur : </p>
+                <img class="inspector_picture" src="/static/images/inspector.png" alt="Image de l'inspecteur">
+            </div>
         </section>
         <section class="interrogation hidden">
             <h1 class="interrogation_title">Suspects</h1>
@@ -53,15 +59,17 @@
                     </svg>
                 </button>
                 <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 ="npc_answer">
+                    <h1 class="anwser_title">Réponse du suspect à la question</h1>
+                    <div class="question_answer">
+                        <p class="suspect_answer"></p>
+                    </div>
+                </div>
+            </div>
             <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>
             </div>
-            </div>
-            <div class="question_answer hidden">
-                <h1 class="anwser_title">Réponse du suspect à la question</h1>
-                <p class="suspect_answer"></p>
-            </div>
         </section>
         <section class="results_game hidden">
             <h1 class="results_title">Résultats</h1>

truthinquiry/templates/lobby.html

@@ -16,6 +16,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body class="game_app">
+        <div class="current_background"></div>
         <input type="hidden" id="game_id" name="game_id" value={{gameid}}>
         <section class="join_room_view hidden">
             <h1 class="room_title">Salon</h1>