diff --git a/truthinquiry/static/css/game_ui.css b/truthinquiry/static/css/game_ui.css index fc644fb..635a76a 100644 --- a/truthinquiry/static/css/game_ui.css +++ b/truthinquiry/static/css/game_ui.css @@ -13,7 +13,7 @@ font-family: "Titan One"; font-style: normal; font-weight: 400; - src: url("../fonts/titan_one_v13/titan_one_v13.woff2") format('woff2'), url("../fonts/titan_one_v13/titan_one_v13.woff") format('woff'), url("../fonts/titan_one_v13/titan_one_v13.ttf") format('truetype'); + src: url("../fonts/titan_one_v13/titan_one_v13.woff2") format("woff2"), url("../fonts/titan_one_v13/titan_one_v13.woff") format("woff"), url("../fonts/titan_one_v13/titan_one_v13.ttf") format("truetype"); 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; } @@ -22,7 +22,7 @@ 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'); + src: url("../fonts/park_lane/park_lane.woff2") format("woff2"), url("../fonts/park_lane/park_lane.woff") format("woff"), url("../fonts/park_lane/park_lane.ttf") format("truetype"); } @font-face { @@ -30,16 +30,15 @@ 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'); + src: url("../fonts/ironick_nf/ironick_nf.woff2") format("woff2"), url("../fonts/ironick_nf/ironick_nf.woff") format("woff"), url("../fonts/ironick_nf/ironick_nf.ttf") format("truetype"); } - @font-face { font-display: swap; font-family: "Roboto Mono"; font-style: normal; font-weight: 400; - src: url("../fonts/roboto_mono_v22/roboto_mono_v22.woff2") format('woff2'), url("../fonts/roboto_mono_v22/roboto_mono_v22.woff") format('woff'), url("../fonts/roboto_mono_v22/roboto_mono_v22.ttf") format('truetype'); + src: url("../fonts/roboto_mono_v22/roboto_mono_v22.woff2") format("woff2"), url("../fonts/roboto_mono_v22/roboto_mono_v22.woff") format("woff"), url("../fonts/roboto_mono_v22/roboto_mono_v22.ttf") format("truetype"); 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; } @@ -47,8 +46,8 @@ :root { /* Colors */ color-scheme: dark; - --alert-dialog-background-color: #000000DF; - --dark-theme-background-color: #0c0b0c; + --background-color: #141416; + --filter-background-color: #000000DF; --game-black: #000000; --game-blue: #7DDCFF; --game-green: #008000; @@ -57,7 +56,6 @@ --game-gold: rgb(214,168,81); --game-dark-gold: #B9935A; --game-white: #FFFFFF; - --light-theme-background-color: #B1EDE8; /* Sizes */ --body-margin: 0.375em; --button-and-dialog-border-radius: 1em; @@ -65,6 +63,8 @@ } html { + background-color: var(--background-color); + color: var(--game-white); margin: 0; } @@ -82,6 +82,7 @@ noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_d border-radius: var(--button-and-dialog-border-radius); border-style: solid; border-width: 0.125em; + color: var(--game-white); cursor: pointer; overflow: hidden; padding-bottom: 0.5em; @@ -96,15 +97,6 @@ noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_d align-items: center; } -/* Themes */ -.dark { - background-color: var(--dark-theme-background-color); -} - -.light { - background-color: var(--light-theme-background-color); -} - /* Utility classes */ .hidden { display: none !important; @@ -195,7 +187,7 @@ noscript .alert_dialog_background, noscript .alert_dialog_msg, noscript .alert_d } .alert_dialog_background { - background-color: var(--alert-dialog-background-color); + background-color: var(--filter-background-color); display: none; height: 100vh; left: 0; diff --git a/truthinquiry/static/css/game_ui_game.css b/truthinquiry/static/css/game_ui_game.css index 00077c4..1a0973e 100644 --- a/truthinquiry/static/css/game_ui_game.css +++ b/truthinquiry/static/css/game_ui_game.css @@ -1,4 +1,8 @@ /* Common properties */ +* { + box-sizing: border-box; +} + html { background-color: var(--game-black); color: var(--game-white); @@ -8,11 +12,11 @@ html { text-transform: uppercase; } -.action_button, .scores, .summary { +.action_button, .chat_btn, .scores, .summary, #open_chat_button { font-family: "Titan One", sans-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 { +.anwser_title, .emotion_and_culprit_choices_title, .introduction_text, .introduction_title, .interrogation_title, .results_title, .introduction_right, .reveal_culprit_title, .score_title, .summary_title, #chat_popup_title { font-family: "Ironick", serif; } @@ -57,7 +61,7 @@ html { text-align: center; } -.explain_suspect_emotion_title, .interrogation_title, .introduction_title, .results_title, .reveal_culprit_title, .score_title, .suspect_answer { +.explain_suspect_emotion_title, .interrogation_title, .introduction_title, .results_title, .reveal_culprit_title, .score_title, .suspect_answer, #open_chat_button { font-weight: bold; } @@ -93,6 +97,10 @@ html { background-color: transparent; } +.message, #chat_message_box { + font-family: "Roboto Mono", sans-serif; +} + .question_answer, .questions_list, .questions_and_image, .reveal_culprit, .suspect_picture[alt], .scores, .summary_suspect, .suspects, .suspects_list { align-content: center; } @@ -110,33 +118,37 @@ html { } .suspect_picture { - border: var(--game-dark-gold) solid 5px; + border-color: var(--game-dark-gold); border-radius: 1em; + border-style: solid; + border-width: 0.125em; height: 15em; - width: 15em; transition: all 0.5s ease; - + width: 15em; } -.npc_answer{ + +.npc_answer { flex-direction: column; width: 40em; } -.image_interrogation{ + +.image_interrogation { height: 25em; width: 25em; } -.question_answer{ -border: var(--game-dark-gold) solid; -border-radius: 1em; -height: 6em; -background-color: #000000d0; +.question_answer { + background-color: #000000d0; + border-color: var(--game-dark-gold); + border-style: solid; + border-radius: 1em; + height: 6em; } .suspect > .suspect_picture:hover { + background-color: var(--filter-background-color); filter: grayscale(0); transition: all 0.5s ease; - background-color: #000000d0; } .suspect_picture[alt] { @@ -169,26 +181,32 @@ background-color: #000000d0; } #emotion_and_culprit_choices_next_btn, #interrogation_next_btn, #interrogation_suspect_previous_btn, #return_to_home_btn { - position: fixed; left: calc(100% - 6em); + position: fixed; top: 1em; } /* Introduction */ .introduction { - padding: 1em; + align-content: center; + align-items: center; display: flex; flex-direction: row; -} -.introduction_left{ + flex-wrap: wrap; + justify-content: center; + justify-items: center; padding: 1em; - max-width: 50vw; } -.introduction_right{ + +.introduction_left, .introduction_right { + padding: 1em; + width: 48vw; /* 50vw - padding * 2 */ +} + +.introduction_right { font-size: 2em; - padding: 1em; - max-width: 50vw; } + .introduction_text { font-size: 3em; margin-bottom: 1em; @@ -200,15 +218,14 @@ background-color: #000000d0; text-align: left; } -.inspector_picture{ - border: var(--game-dark-gold) solid 5px; +.inspector_picture { + background-color: var(--filter-background-color); + border: var(--game-dark-gold) solid 0.125em; border-radius: 1em; - max-width: 45vw; - background-color: #000000d0; - position: fixed; + width: 100%; } -.username{ +.username { font-size: 3em; margin-bottom: 1em; margin-top: 1em; @@ -220,6 +237,7 @@ background-color: #000000d0; color: var(--game-black); text-transform: none; } + .anwser_title { font-size: 2.5em; margin: 0.25em; @@ -238,11 +256,8 @@ background-color: #000000d0; margin-top: 1em; } -#interrogation_suspect_previous_btn { - margin-right: 1em; -} -.suspect_name{ - font-family: "Park Lane"; +.suspect_name { + font-family: "Park Lane", serif; font-size: 2em; color: var(--game-dark-gold); border-radius: 0.25em; @@ -252,6 +267,10 @@ background-color: #000000d0; background-color: #000000dd; } +#interrogation_suspect_previous_btn { + margin-right: 1em; +} + /* Emotion and culprit choices */ .culprit_icon { fill: var(--game-white); @@ -260,13 +279,12 @@ background-color: #000000d0; width: 1em; } - .culprit_btn_checked { background-color: var(--game-green); } .emotion_and_culprit_choices_title { - font-size: 2em; + font-size: 3em; margin: 0.5em; } @@ -299,7 +317,6 @@ background-color: #000000d0; background-color: #000000d0; } - .explain_suspect_emotion_description { font-size: 1.25em; font-weight: normal; @@ -349,86 +366,92 @@ background-color: #000000d0; border: transparent; } -* {box-sizing: border-box;} - -/* chat */ -/* Button used to open the chat form - fixed at the bottom of the page */ -.open-button { - background-color: #000000dd; - color: var(--game-dark-gold); - padding: 16px 20px; - border: var(--game-dark-gold) solid; - border-radius: 1em; - cursor: pointer; - opacity: 0.8; - position: fixed; - bottom: 23px; - right: 28px; - width: 280px; -} - -/* The popup chat - hidden by default */ +/* Chat */ .chat-popup { - display: none; - position: fixed; - bottom: 0; - color: var(--game-dark-gold); - right: 15px; - z-index: 9; - border: solid black 1px; - border-radius: 1em; + bottom: 0.5em; + color: var(--game-dark-gold); + display: none; + position: fixed; + right: 0.5em; + z-index: 1; } -/* Add styles to the form container */ .form-container { - max-width: 300px; - padding: 10px; - border: solid var(--game-dark-gold); - border-radius: 1em; - background-color: black; + align-content: center; + align-items: center; + background-color: var(--game-black); + border-color: var(--game-dark-gold); + border-style: solid; + border-radius: 1em; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + padding: 0.25em; + width: calc(min(30em, 100vw) - 1em); } -/* Full-width textarea */ -.form-container textarea { - width: 100%; - padding: 15px; - margin: 5px 0 22px 0; - border: none; - background: #f1f1f1; - resize: none; - min-height: 5em; +.chat_btn { + border-radius: 1em; + border-style: solid; + cursor: pointer; + font-size: 1em; + margin: 1em; + opacity: 0.8; + padding: 0.25em; + width: 100%; } -/* When the textarea gets focus, do something */ -#chat_message_box{ - background-color: #505050; - outline: none; - margin: 10px; -} -.message{ - list-style-type: none -} -/* Set a style for the submit/send button */ -.form-container .btn { - background-color: black; - color: #04AA6D; - padding: 16px 20px; - border: #04AA6D solid; - border-radius: 1em; - cursor: pointer; - width: 100%; - margin-bottom:10px; - opacity: 0.8; -} - -/* Add a red background color to the cancel button */ -.form-container .cancel { - background-color: black; - color: red; - border-color: red; -} - -/* Add some hover effects to buttons */ -.form-container .btn:hover, .open-button:hover { +.chat_btn:hover, .open-button:hover { opacity: 1; -} \ No newline at end of file +} + +.message { + font-size: 1em; + list-style-type: none; +} + +#chat_button_send { + background-color: var(--game-green); + border-color: var(--game-green); +} + +#close_chat_button { + background-color: var(--game-red); + border-color: var(--game-red); +} + +#chat_message_box { + background-color: var(--game-grey); + border-style: solid; + border-width: 0.125em; + color: var(--game-white); + font-size: 1em; + outline: none; + margin: 1em; + width: 100%; +} + +#chat_popup_title { + font-size: 2em; + margin: 0.25em; +} + +#message_list { + padding: 0; +} + +#open_chat_button { + background-color: var(--filter-background-color); + border: var(--game-dark-gold) solid; + border-radius: 1em; + bottom: 0.25em; + color: var(--game-dark-gold); + cursor: pointer; + font-size: 1.25em; + padding: 1em; + position: fixed; + opacity: 0.8; + right: 0.25em; + width: 5em; +} diff --git a/truthinquiry/static/css/game_ui_legal.css b/truthinquiry/static/css/game_ui_legal.css index d32c47c..70020d9 100644 --- a/truthinquiry/static/css/game_ui_legal.css +++ b/truthinquiry/static/css/game_ui_legal.css @@ -1,7 +1,6 @@ /* Common properties */ html { background-color: var(--game-grey); - color: var(--game-white); font-family: "Roboto Mono", "sans-serif"; } diff --git a/truthinquiry/static/css/game_ui_lobby.css b/truthinquiry/static/css/game_ui_lobby.css index 8c7d4b3..a99c963 100644 --- a/truthinquiry/static/css/game_ui_lobby.css +++ b/truthinquiry/static/css/game_ui_lobby.css @@ -3,6 +3,7 @@ html { background-color: var(--game-black); color: var(--game-white); } + .current_background { background-position: center; background-size: cover; @@ -178,7 +179,7 @@ html { border-radius: 0.75em; font-size: 1.25em; max-height: 12em; - overflow-y: scroll; + overflow-y: auto; padding: 0.25em; } @@ -188,6 +189,10 @@ html { margin: 1em; } +.unjoined_view_players_list { + margin: 1em; +} + /* Game join view */ #game_username { background-color: var(--game-white); @@ -199,7 +204,7 @@ html { } #join_game_button { - font-size: 1.25em; + font-size: 1.5em; margin: 1em; } diff --git a/truthinquiry/static/fonts/ironick_nf/IronickNF.otf b/truthinquiry/static/fonts/ironick_nf/IronickNF.otf deleted file mode 100644 index 6c8f383..0000000 Binary files a/truthinquiry/static/fonts/ironick_nf/IronickNF.otf and /dev/null differ diff --git a/truthinquiry/static/fonts/ironick_nf/IronickNF.ttf b/truthinquiry/static/fonts/ironick_nf/ironick_nf.ttf similarity index 100% rename from truthinquiry/static/fonts/ironick_nf/IronickNF.ttf rename to truthinquiry/static/fonts/ironick_nf/ironick_nf.ttf diff --git a/truthinquiry/static/fonts/ironick_nf/ironick_nf.woff b/truthinquiry/static/fonts/ironick_nf/ironick_nf.woff new file mode 100644 index 0000000..bcb2515 Binary files /dev/null and b/truthinquiry/static/fonts/ironick_nf/ironick_nf.woff differ diff --git a/truthinquiry/static/fonts/ironick_nf/ironick_nf.woff2 b/truthinquiry/static/fonts/ironick_nf/ironick_nf.woff2 new file mode 100644 index 0000000..22254c6 Binary files /dev/null and b/truthinquiry/static/fonts/ironick_nf/ironick_nf.woff2 differ diff --git a/truthinquiry/static/fonts/park_lane/parklane.regular.ttf b/truthinquiry/static/fonts/park_lane/park_lane.ttf similarity index 100% rename from truthinquiry/static/fonts/park_lane/parklane.regular.ttf rename to truthinquiry/static/fonts/park_lane/park_lane.ttf diff --git a/truthinquiry/static/fonts/park_lane/park_lane.woff b/truthinquiry/static/fonts/park_lane/park_lane.woff new file mode 100644 index 0000000..c7b148d Binary files /dev/null and b/truthinquiry/static/fonts/park_lane/park_lane.woff differ diff --git a/truthinquiry/static/fonts/park_lane/park_lane.woff2 b/truthinquiry/static/fonts/park_lane/park_lane.woff2 new file mode 100644 index 0000000..e28db0c Binary files /dev/null and b/truthinquiry/static/fonts/park_lane/park_lane.woff2 differ diff --git a/truthinquiry/static/fonts/park_lane/parklane.regular.otf b/truthinquiry/static/fonts/park_lane/parklane.regular.otf deleted file mode 100644 index 57e6d47..0000000 Binary files a/truthinquiry/static/fonts/park_lane/parklane.regular.otf and /dev/null differ diff --git a/truthinquiry/static/js/game.js b/truthinquiry/static/js/game.js index 92dd995..820be8d 100644 --- a/truthinquiry/static/js/game.js +++ b/truthinquiry/static/js/game.js @@ -51,28 +51,26 @@ function unsetQuestionButtonsListeners() { function setChatBoxButtonsListeners() { document.getElementById("close_chat_button") - .addEventListener("click", closeForm); + .addEventListener("click", closeChatBox); document.getElementById("open_chat_button") - .addEventListener("click", openForm); + .addEventListener("click", openChatBox); document.getElementById("chat_button_send") .addEventListener("click", sendChatMessage); - } - /** - * Shows the chat box + * Show the chat box. */ -function openForm() { +function openChatBox() { document.getElementById("chatbox").style.display = "block"; - } +} /** - * Hides the chat box + * Hide the chat box. */ - function closeForm() { +function closeChatBox() { document.getElementById("chatbox").style.display = "none"; - } +} /** @@ -281,10 +279,9 @@ function renderAnswerSelectionPanel() { button.appendChild(document.createTextNode("Couplable")); - button.addEventListener("click", (event) => { + button.addEventListener("click", event => { disableCulpritButtons(culpritChoices, suspect); - if (gameData["solo"] === true) event.target.textContent = "envoie des réponses..."; - else event.target.textContent = "attente des autres joueurs..."; + event.target.textContent = gameData["solo"] === true ? "Envoi des réponses\u00A0..." : "En attente des autres joueurs\u00A0..."; sendAnswers(); }); @@ -399,7 +396,6 @@ function initSock() { console.log("Connected to the server!"); }); - //TODO Send and receive userprogress when they have sent their responses socket.on("gameprogress", username => { console.log(username); }); @@ -412,7 +408,6 @@ function initSock() { }); socket.on("gamefinished", finalResults => { - console.log(finalResults); hideFirstClassElement("emotion_and_culprit_choices"); const revealScoreElement = document.createElement("h2"); revealScoreElement.classList.add("reveal_score"); @@ -462,6 +457,7 @@ function initSock() { suspect.classList.add("summary_suspect"); const img = document.createElement("img"); + img.classList.add("suspect_picture"); img.setAttribute("alt", "Image d'un suspect"); img.src = NPC_FINAL_REACTION_PATH + finalResults["npcs"][npcid]["uuid"]; suspect.appendChild(img); diff --git a/truthinquiry/static/js/game_lobby.js b/truthinquiry/static/js/game_lobby.js index 0442cc1..dc6e61c 100644 --- a/truthinquiry/static/js/game_lobby.js +++ b/truthinquiry/static/js/game_lobby.js @@ -1,4 +1,5 @@ -const LOBBY_IMAGE_PATH = "/static/images/cuisine.jpg" +const LOBBY_IMAGE_PATH = "/static/images/cuisine.jpg"; + // Display functions /* @@ -81,9 +82,11 @@ function displayInvalidNickNameErrorMessage(errorMessage) { /** * Start a game in the history mode. */ -function startHistoryGame(event) { - event.target.textContent = "Chargement..."; - makeAPIRequest("startGame"); +function startHistoryGame(startHistoryGameButton) { + startHistoryGameButton.target.textContent = "Chargement\u00A0..."; + makeAPIRequest("startGame").then(null, () => { + startHistoryGameButton.target.textContent = "Jouer"; + }); } /** @@ -98,20 +101,20 @@ function startChallengeGame() { alert("Ce mode de jeu n'est malheureusement pas disponible."); } -function getMembers(){ - let data = {}; +function getMembers() { + const data = {}; data['game_id'] = getRoomCode(); - const response = makeAPIRequest("getGameMembers",data); + + const response = makeAPIRequest("getGameMembers", data); response.then(value => { - let divs = document.getElementsByClassName("player_names"); - for (let playerList of divs) { + for (const playerList of document.getElementsByClassName("player_names")) { value["members"].forEach(username => { - console.log(username); playerList.appendChild(document.createTextNode(username + "\n")); }); } }); } + // Join room functions /** @@ -357,14 +360,15 @@ function initSock() { }) socket.on("gamestart", async () => { - if (await hasJoinedRoom()) window.location.href = "/multi"; + if (await hasJoinedRoom()) { + window.location.href = "/multi"; + } }) socket.on("playersjoin", username => { - console.log(username); - Array.from(document.getElementsByClassName("player_names")).forEach(playerList =>{ + for (const playerList of document.getElementsByClassName("player_names")) { playerList.textContent += username + "\n"; - }) + } }); } @@ -385,8 +389,8 @@ function initSock() { *

*/ async function initLobby() { - setGameBackground(LOBBY_IMAGE_PATH) - getMembers() + setGameBackground(LOBBY_IMAGE_PATH); + getMembers(); initSock(); if (await hasJoinedRoom()) { displayRoomView(); diff --git a/truthinquiry/static/js/game_start_page.js b/truthinquiry/static/js/game_start_page.js index 99ca08e..8a68508 100644 --- a/truthinquiry/static/js/game_start_page.js +++ b/truthinquiry/static/js/game_start_page.js @@ -118,7 +118,7 @@ function createMultiPlayerRoom(event) { } hideInvalidInputErrorMessage(); - event.target.textContent = "Chargement..."; + event.target.textContent = "Chargement\u00A0..."; startGame(); } @@ -131,120 +131,53 @@ function joinMultiPlayerRoom(event) { } hideInvalidInputErrorMessage(); - event.target.textContent = "Chargement..."; - joinGame(); + event.target.textContent = "Chargement\u00A0..."; + joinGame(event); } /** - * Set the current theme for the game. + * Launch a single player game. * *

- * The theme preference is read from the local storage. - *

- * - *

- * If accessing to the local storage is not allow, an error message which prevents playing the game - * and requesting user to enable localStorage is shown, and the error is logged in the console. + * It sends the api request to + * create a game then it immediately starts the game by using the startGame API endpoint. *

*/ -function setCurrentTheme() { - const htmlElement = document.getElementsByTagName("html")[0]; - - try { - const currentTheme = localStorage.getItem("pref_theme"); - - if (currentTheme == "light") { - htmlElement.classList.remove("dark"); - htmlElement.classList.add("light"); - } else { - // Use dark theme by default - htmlElement.classList.remove("light"); - htmlElement.classList.add("dark"); - } - - const btn = document.getElementsByClassName("theme_switcher")[0]; - btn.addEventListener("pointerup", changeTheme); - } catch (e) { - console.error("Unable to set theme from localStorage", e); - htmlElement.classList.add("dark"); - } -} - -/** - * Change the theme from the current theme to its opposite. - * - *

- * If the current theme is "dark", it will become "light" and vice versa. - *

- * - *

- * The new theme is saved in the localStorage, if the browser allows this action; otherwise, an - * error message is shown in the console. - *

- */ -function changeTheme() { - const currentTheme = localStorage.getItem("pref_theme"); - - const htmlElement = document.getElementsByTagName("html")[0]; - let newTheme; - if (currentTheme == "light") { - htmlElement.classList.remove("light"); - htmlElement.classList.add("dark"); - newTheme = "dark"; - } else { - htmlElement.classList.remove("dark"); - htmlElement.classList.add("light"); - newTheme = "light"; - } - - try { - localStorage.setItem("pref_theme", newTheme); - } catch (e) { - console.error("Unable to save theme change to localStorage", e); - } -} - -/** - * This function launches a single player game. It sends the api request to - * create a game then it immediately start the game by sendind the startGame api - */ -async function startSoloGame(event){ - +async function startSoloGame(event) { if (!areInputsValid(false)) { return; } - event.target.textContent = "Chargement..."; + event.target.textContent = "Chargement\u00A0..."; hideInvalidInputErrorMessage(); username = document.getElementById("game_username").value; let data = {} data["username"] = username; data["solo"] = true; await makeAPIRequest("createGame",data); - start = makeAPIRequest("startGame"); - start.then(()=>{ + makeAPIRequest("startGame").then(() => { window.location.href = "/solo"; - }) + }, () => { + startHistoryGameButton.target.textContent = "Jouer"; + }); } /** * This function creates a multiplayer game by sending the createGame api call * then, if no error occured, redirects to the lobby page. */ -async function startGame(){ +async function startGame() { username = document.getElementById("game_username").value; let data = {} data["username"] = username; - response = makeAPIRequest("createGame",data); + response = makeAPIRequest("createGame", data); response.then((value) => { if (value["error"] != 0){ alert(value["msg"]); - } - else{ + } else { gameid = value["game_id"] window.location.href = "/lobby/" + gameid; } - }); - + }); } /** @@ -252,23 +185,17 @@ async function startGame(){ * join an already existing game, to do so it calls the joinGame endpoint * with the aftermentioned username and room code as parameter. */ -async function joinGame(){ +async function joinGame(event) { username = document.getElementById("game_username").value; gameid = document.getElementById("game_room_code").value; - console.log(username); - data = {} + const data = {}; data["username"] = username; data["game_id"] = gameid; - response = makeAPIRequest("joinGame",data); - response.then((value)=>{ - console.log(value); - if (value["error"] != 0){ - //alert(value["msg"]); - } - else{ - window.location.href = "/lobby/" + gameid; - } - }) + makeAPIRequest("joinGame", data).then(() => { + window.location.href = "/lobby/" + gameid; + }, () => { + event.target.textContent = "Jouer"; + }); } // Set event listeners diff --git a/truthinquiry/templates/game.html b/truthinquiry/templates/game.html index 8e25b90..784710f 100644 --- a/truthinquiry/templates/game.html +++ b/truthinquiry/templates/game.html @@ -20,7 +20,7 @@