Merge pull request #151 from ThomasRubini/client_game-various-fixes-and-improvements
[Client] Various improvements and fixes to all game pages
This commit is contained in:
Audric V
GitHub
commit
c24fd88f4a
@ -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;
|
||||
|
||||
@ -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 {
|
||||
bottom: 0.5em;
|
||||
color: var(--game-dark-gold);
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
color: var(--game-dark-gold);
|
||||
right: 15px;
|
||||
z-index: 9;
|
||||
border: solid black 1px;
|
||||
border-radius: 1em;
|
||||
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);
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--game-black);
|
||||
border-color: var(--game-dark-gold);
|
||||
border-style: solid;
|
||||
border-radius: 1em;
|
||||
background-color: black;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.chat_btn {
|
||||
border-radius: 1em;
|
||||
border-style: solid;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin-bottom:10px;
|
||||
font-size: 1em;
|
||||
margin: 1em;
|
||||
opacity: 0.8;
|
||||
padding: 0.25em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/* Common properties */
|
||||
html {
|
||||
background-color: var(--game-grey);
|
||||
color: var(--game-white);
|
||||
font-family: "Roboto Mono", "sans-serif";
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
BIN
truthinquiry/static/fonts/ironick_nf/ironick_nf.woff
Normal file
BIN
truthinquiry/static/fonts/ironick_nf/ironick_nf.woff
Normal file
Binary file not shown.
BIN
truthinquiry/static/fonts/ironick_nf/ironick_nf.woff2
Normal file
BIN
truthinquiry/static/fonts/ironick_nf/ironick_nf.woff2
Normal file
Binary file not shown.
BIN
truthinquiry/static/fonts/park_lane/park_lane.woff
Normal file
BIN
truthinquiry/static/fonts/park_lane/park_lane.woff
Normal file
Binary file not shown.
BIN
truthinquiry/static/fonts/park_lane/park_lane.woff2
Normal file
BIN
truthinquiry/static/fonts/park_lane/park_lane.woff2
Normal file
Binary file not shown.
Binary file not shown.
@ -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);
|
||||
|
||||
@ -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() {
|
||||
* </p>
|
||||
*/
|
||||
async function initLobby() {
|
||||
setGameBackground(LOBBY_IMAGE_PATH)
|
||||
getMembers()
|
||||
setGameBackground(LOBBY_IMAGE_PATH);
|
||||
getMembers();
|
||||
initSock();
|
||||
if (await hasJoinedRoom()) {
|
||||
displayRoomView();
|
||||
|
||||
@ -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.
|
||||
*
|
||||
* <p>
|
||||
* The theme preference is read from the local storage.
|
||||
* </p>
|
||||
*
|
||||
* <p>
|
||||
* 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.
|
||||
* </p>
|
||||
*/
|
||||
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.
|
||||
*
|
||||
* <p>
|
||||
* If the current theme is "dark", it will become "light" and vice versa.
|
||||
* </p>
|
||||
*
|
||||
* <p>
|
||||
* The new theme is saved in the localStorage, if the browser allows this action; otherwise, an
|
||||
* error message is shown in the console.
|
||||
* </p>
|
||||
*/
|
||||
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{
|
||||
makeAPIRequest("joinGame", data).then(() => {
|
||||
window.location.href = "/lobby/" + gameid;
|
||||
}
|
||||
})
|
||||
}, () => {
|
||||
event.target.textContent = "Jouer";
|
||||
});
|
||||
}
|
||||
// Set event listeners
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<section class="introduction hidden">
|
||||
<div class="introduction_left">
|
||||
<h1 class="introduction_title">Truth Inquiry</h1>
|
||||
<p class="introduction_text">Vous incarnez le célèbre détective <span id="username"></span> et vous êtes missionné pour résoudre une nouvelle affaire.<br> Hier, dans la soirée, cinq personnes ont été invitées par le Comte de la région dans son manoir. Cependant, dans la matinée, le Comte s’est aperçu que son coffre avait été forcé.<br>Votre rôle est donc d’interroger les cinq suspects afin de comprendre leur état d’esprit et ainsi démasquer le coupable.<br>Cliquez sur la flèche pour découvrir les suspects et les interroger.</p>
|
||||
<p class="introduction_text">Bienvenue dans Truth Inquiry, vous incarnez le célèbre détective <span id="username"></span> et êtes missionné(e) pour résoudre une nouvelle affaire.<br><br>Hier, dans la soirée, cinq personnes ont été invitées par le Comte de la région dans son manoir.<br><br>Cependant, dans la matinée, le Comte s’est aperçu que son coffre avait été forcé.<br><br>Votre rôle est donc d’interroger les cinq suspects afin de comprendre leur état d’esprit et ainsi démasquer le coupable.<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">
|
||||
<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" />
|
||||
@ -28,7 +28,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="introduction_right">
|
||||
<img class="inspector_picture" src="/static/images/inspector.png" alt="Image de l'inspecteur">
|
||||
<img class="inspector_picture" src="/static/images/inspector.png" alt="Image de l'inspecteur" title="Une image de l'inspecteur">
|
||||
</div>
|
||||
</section>
|
||||
<section class="interrogation hidden">
|
||||
@ -39,23 +39,19 @@
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="suspects" id="interrogation_suspects"></ul>
|
||||
<Section>
|
||||
<button id="open_chat_button" class="open-button">Chat</button>
|
||||
<button id="open_chat_button">Chat</button>
|
||||
<div class="chat-popup" id="chatbox">
|
||||
<div class="form-container">
|
||||
<h1>Chat</h1>
|
||||
<h1 id="chat_popup_title">Chat</h1>
|
||||
<div class="messages_received_container">
|
||||
<ul id="message_list" class="messages">
|
||||
</ul>
|
||||
</div>
|
||||
<label for="msg"><b>Message</b></label>
|
||||
<input type="text" id="chat_message_box" placeholder="Type message.." name="msg" required></textarea>
|
||||
|
||||
<button id="chat_button_send" class="btn">Send</button>
|
||||
<button id="close_chat_button" type="button" class="btn cancel">Close</button>
|
||||
<input type="text" id="chat_message_box" placeholder="Saisissez un message" name="msg" required="">
|
||||
<button id="chat_button_send" class="chat_btn">Envoyer</button>
|
||||
<button id="close_chat_button" type="button" class="chat_btn">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</section>
|
||||
<section class="emotion_and_culprit_choices hidden">
|
||||
<h1 class="emotion_and_culprit_choices_title">Choix du coupable et émotion des suspects</h1>
|
||||
|
||||
@ -20,12 +20,12 @@
|
||||
<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>
|
||||
<div class="unjoined_view_players_list">
|
||||
<h2 class="players_title">Joueurs présents</h2>
|
||||
<div class="player_names"></div>
|
||||
</div>
|
||||
<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>
|
||||
<input id="game_username" type="text" placeholder="Entrez un pseudo" value="" required="required" maxlength="20" title="Entrez un pseudo pour rejoindre le salon">
|
||||
<button id="join_game_button" class="action_button">Rejoindre le salon</button>
|
||||
<p class="game_start_failed hidden">Une erreur s'est produite. Réessayez ultérieurement.</p>
|
||||
</section>
|
||||
<section class="room_view hidden">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user