diff --git a/truthinquiry/routes/routes_api.py b/truthinquiry/routes/routes_api.py index a16f565..9b0f23b 100644 --- a/truthinquiry/routes/routes_api.py +++ b/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} diff --git a/truthinquiry/static/css/game_ui.css b/truthinquiry/static/css/game_ui.css index c951d4a..9d50ffb 100644 --- a/truthinquiry/static/css/game_ui.css +++ b/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; diff --git a/truthinquiry/static/css/game_ui_game.css b/truthinquiry/static/css/game_ui_game.css index f0182a6..50f872b 100644 --- a/truthinquiry/static/css/game_ui_game.css +++ b/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; diff --git a/truthinquiry/static/css/game_ui_lobby.css b/truthinquiry/static/css/game_ui_lobby.css index cc78aeb..f53a8ba 100644 --- a/truthinquiry/static/css/game_ui_lobby.css +++ b/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; } diff --git a/truthinquiry/static/css/game_ui_start.css b/truthinquiry/static/css/game_ui_start.css index 3c8799c..8f4e844 100644 --- a/truthinquiry/static/css/game_ui_start.css +++ b/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; } diff --git a/truthinquiry/static/fonts/ironick_nf/IronickNF.otf b/truthinquiry/static/fonts/ironick_nf/IronickNF.otf new file mode 100644 index 0000000..6c8f383 Binary files /dev/null and b/truthinquiry/static/fonts/ironick_nf/IronickNF.otf differ diff --git a/truthinquiry/static/fonts/ironick_nf/IronickNF.ttf b/truthinquiry/static/fonts/ironick_nf/IronickNF.ttf new file mode 100644 index 0000000..b7e334b Binary files /dev/null and b/truthinquiry/static/fonts/ironick_nf/IronickNF.ttf differ diff --git a/truthinquiry/static/fonts/park_lane/parklane.regular.otf b/truthinquiry/static/fonts/park_lane/parklane.regular.otf new file mode 100644 index 0000000..57e6d47 Binary files /dev/null and b/truthinquiry/static/fonts/park_lane/parklane.regular.otf differ diff --git a/truthinquiry/static/fonts/park_lane/parklane.regular.ttf b/truthinquiry/static/fonts/park_lane/parklane.regular.ttf new file mode 100644 index 0000000..fed443b Binary files /dev/null and b/truthinquiry/static/fonts/park_lane/parklane.regular.ttf differ diff --git a/truthinquiry/static/images/cuisine.png b/truthinquiry/static/images/cuisine.png new file mode 100644 index 0000000..478b05d Binary files /dev/null and b/truthinquiry/static/images/cuisine.png differ diff --git a/truthinquiry/static/images/inspector.png b/truthinquiry/static/images/inspector.png new file mode 100644 index 0000000..f418fcb Binary files /dev/null and b/truthinquiry/static/images/inspector.png differ diff --git a/truthinquiry/static/images/start_background.jpg b/truthinquiry/static/images/start_background.jpg new file mode 100644 index 0000000..12273f9 Binary files /dev/null and b/truthinquiry/static/images/start_background.jpg differ diff --git a/truthinquiry/static/js/game.js b/truthinquiry/static/js/game.js index 1304ea4..2ec12c6 100644 --- a/truthinquiry/static/js/game.js +++ b/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. @@ -400,20 +418,23 @@ function initSock() { img.setAttribute("alt", "Image d'un suspect"); 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() diff --git a/truthinquiry/static/js/game_lobby.js b/truthinquiry/static/js/game_lobby.js index f77920b..5f67aac 100644 --- a/truthinquiry/static/js/game_lobby.js +++ b/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() { *

*/ async function initLobby() { + setGameBackground(LOBBY_IMAGE_PATH) getMembers() if (await hasJoinedRoom()) { initSock(); diff --git a/truthinquiry/templates/game.html b/truthinquiry/templates/game.html index c25ecfe..818dfe5 100644 --- a/truthinquiry/templates/game.html +++ b/truthinquiry/templates/game.html @@ -18,13 +18,19 @@