From 2c078806070f86162af5342689c6b83d25c36367 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Wed, 11 Jan 2023 10:54:02 +0100 Subject: [PATCH 1/6] [Client] Add game introduction view --- truthseeker/templates/game.html | 41 ++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/truthseeker/templates/game.html b/truthseeker/templates/game.html index bf821c9..9a2eb93 100644 --- a/truthseeker/templates/game.html +++ b/truthseeker/templates/game.html @@ -1,3 +1,38 @@ -game.html template -
-Return to index \ No newline at end of file + + + + Truth Inquiry + + + + + + + +
+
+

Truth Inquiry

+

Bienvenue dans Truth Inquiry, vous allez intégrer la peau d’un enquêteur.

Vous avez été donné responsable de résoudre une enquête et devez trouver le coupable d’un vol.

Cliquez sur la flèche pour découvrir les suspects et les interroger.

+ + + +
+
+
+
+

Navigateur non supporté

+

+
+
+ + + + From f1aab6698365f0a643f15490a0ad03a771cef443 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Wed, 11 Jan 2023 10:59:44 +0100 Subject: [PATCH 2/6] [Client] Add introduction style --- truthseeker/static/css/game_ui_game.css | 80 +++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 truthseeker/static/css/game_ui_game.css diff --git a/truthseeker/static/css/game_ui_game.css b/truthseeker/static/css/game_ui_game.css new file mode 100644 index 0000000..277172c --- /dev/null +++ b/truthseeker/static/css/game_ui_game.css @@ -0,0 +1,80 @@ +html { + background-color: black; + color: white; +} + +:root { + --button-color : #FF0000; +} + +.game_app { + margin: 0; +} + +.current_background { + background-position: center; + background-size: cover; + position: fixed; + height: 100%; + width: 100%; + /* Place the background behind everything */ + z-index: -9999; +} + +/* Introduction */ +.introduction { + padding: 1em; + max-width: 50vw; +} + +.introduction_title { + color: var(--button-color); + font-family: "Spicy Rice", serif; + font-size: 5em; + font-weight: bold; + margin: 0; + text-align: left; +} + +.introduction_text { + font-family: "Spicy Rice", serif; + font-size: 2em; + margin-bottom: 1em; + margin-top: 1em; +} + +/* Buttons */ +.action_button { + border-color: black; + border-style: solid; + border-width: 0.125em; + background-color: var(--button-color); + border-radius: var(--button-and-dialog-border-radius); + cursor: pointer; + font-family: "Titan One", sans-serif; + font-size: 1.5em; + min-width: 10em; + padding-bottom: 0.5em; + padding-top: 0.5em; + padding-left: 1em; + padding-right: 1em; + overflow: hidden; + text-transform: uppercase; + transition: box-shadow 0.5s, transform 0.5s; +} + +.action_button:hover { + box-shadow: 10px 10px 0px 0px black; + transform: translate(0.1em, 0.1em); +} + +.next_btn { + cursor: pointer; + fill: var(--button-color); + transform: rotate(180deg); +} + +#introduction_next_btn { + height: 5em; + width: 5em; +} From 3db8505e189da01324707fd84bbee253b161d0ab Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Thu, 12 Jan 2023 10:57:10 +0100 Subject: [PATCH 3/6] [Client] Add game interrogation view --- truthseeker/templates/game.html | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/truthseeker/templates/game.html b/truthseeker/templates/game.html index 9a2eb93..d1fdbbf 100644 --- a/truthseeker/templates/game.html +++ b/truthseeker/templates/game.html @@ -10,12 +10,29 @@
-
+ +
From e62022c43c65c2d15df296da77a0bd9ec679aa66 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Thu, 12 Jan 2023 10:58:53 +0100 Subject: [PATCH 4/6] [Client] Add game introduction style --- truthseeker/static/css/game_ui_game.css | 117 ++++++++++++++++++------ 1 file changed, 91 insertions(+), 26 deletions(-) diff --git a/truthseeker/static/css/game_ui_game.css b/truthseeker/static/css/game_ui_game.css index 277172c..42a0b6a 100644 --- a/truthseeker/static/css/game_ui_game.css +++ b/truthseeker/static/css/game_ui_game.css @@ -21,28 +21,6 @@ html { z-index: -9999; } -/* Introduction */ -.introduction { - padding: 1em; - max-width: 50vw; -} - -.introduction_title { - color: var(--button-color); - font-family: "Spicy Rice", serif; - font-size: 5em; - font-weight: bold; - margin: 0; - text-align: left; -} - -.introduction_text { - font-family: "Spicy Rice", serif; - font-size: 2em; - margin-bottom: 1em; - margin-top: 1em; -} - /* Buttons */ .action_button { border-color: black; @@ -69,12 +47,99 @@ html { } .next_btn { + background-color: transparent; + border: none; cursor: pointer; fill: var(--button-color); - transform: rotate(180deg); -} - -#introduction_next_btn { height: 5em; + padding: 0; + transform: rotate(180deg); width: 5em; } + +/* Introduction */ +.introduction { + padding: 1em; + max-width: 50vw; +} + +.introduction_title { + color: var(--button-color); + font-family: "Spicy Rice", serif; + font-size: 5em; + font-weight: bold; + margin: 0; + text-align: left; +} + +.introduction_text { + font-family: "Spicy Rice", serif; + font-size: 2em; + margin-bottom: 1em; + margin-top: 1em; +} + +/* Interrogation */ +.interrogation { + align-items: center; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; +} + +.interrogation_title { + color: var(--button-color); + font-family: "Spicy Rice", sans-serif; + font-size: 3em; + margin: 1em; + text-transform: uppercase; +} + +#interrogation_next_btn { + position: fixed; + left: calc(100% - 6em); + top: 1em; +} + +.suspects { + align-content: center; + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +.suspect { + align-items: center; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + margin: 1em; +} + +.suspect_picture { + margin-bottom: 1em; + height: 15em; + width: 15em; +} + +.suspect_picture[alt] { + align-content: center; + align-items: center; + display: flex; + font-family: "Roboto Mono", sans-serif; + font-size: 1em; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + text-align: center; +} + +.ask_button { + background-color: white; + color: black; + text-transform: none; +} From b5e6e80df185743b52b9a456426aecca0e6ac359 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Fri, 13 Jan 2023 14:10:49 +0100 Subject: [PATCH 5/6] [Client] Add emotion and culprit choices view --- truthseeker/templates/game.html | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/truthseeker/templates/game.html b/truthseeker/templates/game.html index d1fdbbf..0dcb578 100644 --- a/truthseeker/templates/game.html +++ b/truthseeker/templates/game.html @@ -21,7 +21,7 @@
+
+

Choix du coupable et émotion des suspects

+ +
+ +
+ + Example + + + +
+
+
From 49744be0940c5e0856ade0573b213afc3fd9824d Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Fri, 13 Jan 2023 14:12:33 +0100 Subject: [PATCH 6/6] [Client] Add emotion and culprit choices style --- truthseeker/static/css/game_ui_game.css | 56 ++++++++++++++++++++++--- 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/truthseeker/static/css/game_ui_game.css b/truthseeker/static/css/game_ui_game.css index 42a0b6a..ef3cdc6 100644 --- a/truthseeker/static/css/game_ui_game.css +++ b/truthseeker/static/css/game_ui_game.css @@ -57,6 +57,12 @@ html { width: 5em; } +#emotion_and_culprit_choices_next_btn, #interrogation_next_btn { + position: fixed; + left: calc(100% - 6em); + top: 1em; +} + /* Introduction */ .introduction { padding: 1em; @@ -96,12 +102,6 @@ html { text-transform: uppercase; } -#interrogation_next_btn { - position: fixed; - left: calc(100% - 6em); - top: 1em; -} - .suspects { align-content: center; align-items: center; @@ -143,3 +143,47 @@ html { color: black; text-transform: none; } + +/* Emotion and culprit choices */ +.culprit_btn { + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; +} + +.culprit_icon { + fill: white; + height: 1em; + width: 1em; +} + +.culprit_btn_text { + margin: 0; + margin-left: 0.25em; + margin-right: 0.25em; +} + +.culprit_btn_checked { + background-color: green; +} + +.suspect_emotion_chooser { + background-color: #5A5656; + border: none; + border-radius: var(--button-and-dialog-border-radius); + color: white; + font-family: "Roboto Mono", sans-serif; + font-size: 1em; + margin: 1em; + padding: 0.5em; +} + +.emotion_and_culprit_choices_title { + font-size: 2em; + margin: 0.5em; + text-align: center; + font-family: "Spicy Rice", sans-serif; + color: var(--button-color); +}