Merge pull request #36 from ThomasRubini/client_game-results-and-interrogation

[Client] Add game backgrounds and add interrogration and results views

truthseeker/static/css/game_ui_game.css

@@ -1,12 +1,13 @@
+:root {
+    --grey-color: #5A5656;
+    --red-color: #BD1E1E;
+}
+
 html {
     background-color: black;
     color: white;
 }
 
-:root {
-    --button-color : #FF0000;
-}
-
 .game_app {
     margin: 0;
 }
@@ -21,15 +22,55 @@ html {
     z-index: -9999;
 }
 
+.action_button, .scores, .summary {
+    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;
+}
+
+.introduction_title, .results_title, .summary_title {
+    font-size: 4em;
+}
+
+.reveal_culprit_explaination, .explain_suspect_emotion_description, .reveal_score, .suspect_emotion_chooser, .suspect_answer, .suspect_picture[alt] {
+    font-family: "Roboto Mono", sans-serif;
+}
+
+.interrogation_title, .reveal_culprit_title, .reveal_score, .results_title, .score_title, .summary_title {
+    margin: 0.25em;
+}
+
+.reveal_culprit_explaination, .question_button, .players_list, .reveal_culprit, .scores, .summary, .suspect, .suspect_emotion_chooser {
+    margin: 1em;
+}
+
+.suspect_picture {
+    margin: 1em;
+    height: 15em;
+    width: 15em;
+}
+
+.suspect_picture[alt] {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    font-size: 1em;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+}
+
 /* Buttons */
 .action_button {
     border-color: black;
     border-style: solid;
     border-width: 0.125em;
-    background-color: var(--button-color);
+    background-color: var(--red-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;
@@ -50,14 +91,14 @@ html {
     background-color: transparent;
     border: none;
     cursor: pointer;
-    fill: var(--button-color);
+    fill: var(--red-color);
     height: 5em;
     padding: 0;
     transform: rotate(180deg);
     width: 5em;
 }
 
-#emotion_and_culprit_choices_next_btn, #interrogation_next_btn {
+#emotion_and_culprit_choices_next_btn, #interrogation_next_btn, #interrogation_suspect_previous_btn {
     position: fixed;
     left: calc(100% - 6em);
     top: 1em;
@@ -70,16 +111,13 @@ html {
 }
 
 .introduction_title {
-    color: var(--button-color);
-    font-family: "Spicy Rice", serif;
-    font-size: 5em;
+    color: var(--red-color);
     font-weight: bold;
     margin: 0;
     text-align: left;
 }
 
 .introduction_text {
-    font-family: "Spicy Rice", serif;
     font-size: 2em;
     margin-bottom: 1em;
     margin-top: 1em;
@@ -95,11 +133,9 @@ html {
 }
 
 .interrogation_title {
-    color: var(--button-color);
-    font-family: "Spicy Rice", sans-serif;
+    color: var(--red-color);
     font-size: 3em;
-    margin: 1em;
-    text-transform: uppercase;
+    font-weight: bold;
 }
 
 .suspects {
@@ -117,25 +153,6 @@ html {
     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 {
@@ -144,6 +161,24 @@ html {
     text-transform: none;
 }
 
+#interrogation_suspect_previous_btn {
+    margin-right: 1em;
+}
+
+.anwser_title {
+    font-size: 2.5em;
+    margin: 0.25em;
+}
+
+.suspect_answer {
+    font-size: 1.375em;
+    font-weight: bold;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
 /* Emotion and culprit choices */
 .culprit_btn {
     align-items: center;
@@ -170,20 +205,153 @@ html {
 }
 
 .suspect_emotion_chooser {
-    background-color: #5A5656;
+    background-color: var(--grey-color);
     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 {
+    color: var(--red-color);
     font-size: 2em;
     margin: 0.5em;
     text-align: center;
-    font-family: "Spicy Rice", sans-serif;
-    color: var(--button-color);
+}
+
+.question_button {
+    background-color: var(--grey-color);
+    border-radius: 2em;
+    text-transform: none;
+}
+
+.questions_list {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Results and scores */
+.results_title {
+    color: var(--red-color);
+    font-weight: bold;
+    font-size: 4.5em;
+    text-align: center;
+}
+
+.summary {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+
+.scores {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    min-width: 15em;
+}
+
+.reveal_and_scores {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.reveal_culprit_title {
+    color: var(--red-color);
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+}
+
+.score_title {
+    color: var(--red-color);
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.reveal_score {
+    align-items: center;
+    color: var(--red-color);
+    display: flex;
+    font-size: 2em;
+    justify-content: center;
+}
+
+.summary_title {
+    color: var(--red-color);
+    display: flex;
+    font-size: 4em;
+    flex-direction: row;
+    text-align: center;
+}
+
+.suspects_list {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 1em;
+}
+
+#return_lobby_button {
+    background-color: transparent;
+    border: transparent;
+}
+
+.summary_suspect {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin-left: 1.5em;
+    margin-right: 1.5em;
+}
+
+.reveal_culprit_explaination {
+    font-size: 1.25em;
+}
+
+.explain_suspect_emotion_title {
+    font-size: 1.75em;
+    font-weight: bold;
+    margin: 0.5em;
+}
+
+.explain_suspect_emotion_description {
+    font-size: 1.25em;
+    font-weight: normal;
+    margin: 1em;
+}
+
+.player_score {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+}
+
+.player_name_and_score {
+    font-size: 1.5em;
+    font-weight: normal;
+    padding: 0.25em;
+}
+
+.reveal_culprit {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
 }

truthseeker/templates/game.html

@@ -27,14 +27,14 @@
                 </svg>
             </button>
             <div class="suspects">
-                <!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
+                <!-- TODO: model, remove from HTML and add it dynamically with JavaScript for each suspect -->
                 <div class="suspect">
                     <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
                     <button class="ask_button action_button">Interroger</button>
                 </div>
             </div>
         </div>
-        <div class="emotion_and_culprit_choices">
+        <div class="emotion_and_culprit_choices hidden">
             <h1 class="emotion_and_culprit_choices_title">Choix du coupable et émotion des suspects</h1>
             <button id="emotion_and_culprit_choices_next_btn" class="next_btn hidden" aria-label="Passer à la suite">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
@@ -42,9 +42,10 @@
                 </svg>
             </button>
             <div class="suspects">
-                <!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
+                <!-- TODO: model, remove from HTML and add it dynamically with JavaScript for each suspect -->
                 <div class="suspect">
                     <select class="suspect_emotion_chooser" required="required">
+                        <!-- This is the place holder value-->
                         <option value="">Choisissez une émotion</option>
                         <!-- Add other emotions here -->
                     </select>
@@ -63,6 +64,71 @@
                 </div>
             </div>
         </div>
+        <div class="interrogation_suspect hidden">
+            <h1 class="interrogation_title">Poser une question au suspect</h1>
+            <button id="interrogation_suspect_previous_btn" class="next_btn" aria-label="Revenir à la sélection du suspect">
+                <svg class="next_btn" 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"/>
+                </svg>
+            </button>
+            <div class="questions_list">
+                <button class="action_button question_button">Où étiez vous hier soir&nbsp;?</button>
+                <button class="action_button question_button">Avec qui étiez vous&nbsp;?</button>
+            </div>
+            <div class="question_answer hidden">
+                <h1 class="anwser_title">Réponse du suspect à la question</h1>
+                <p class="suspect_answer"></p>
+            </div>
+        </div>
+        <div class="results_game hidden">
+            <h1 class="results_title">Résultats</h1>
+            <div class="reveal_and_scores">
+                <div class="scores">
+                    <div class="player_score">
+                        <h1 class="score_title">Votre score est de&nbsp;:</h1>
+                        <h2 class="reveal_score">4/5</h2>
+                    </div>
+                    <div class="results_game_multiplayer">
+                        <div class="players_list">
+                            <!-- TODO: model, remove from HTML and add it dynamically with JavaScript for each player -->
+                            <h3 class="player_name_and_score">nom&nbsp;: score</h3>
+                            <h3 class="player_name_and_score">nom&nbsp;: score</h3>
+                            <h3 class="player_name_and_score">nom&nbsp;: score</h3>
+                            <h3 class="player_name_and_score">nom&nbsp;: score</h3>
+                        </div>
+                    </div>
+                </div>
+                <div class="reveal_culprit">
+                    <h2 class="reveal_culprit_title">Le coupable était ...</h2>
+                    <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                    <h3 class="reveal_culprit_explaination">Ce suspect était le coupable car il ...</h3>
+                </div>
+            </div>
+            <div class="summary">
+                <h1 class="summary_title">Débrief</h1>
+                <div class="suspects_list">
+                    <div class="summary_suspect">
+                        <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                        <h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
+                        <p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
+                    </div>
+                    <div class="summary_suspect">
+                        <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                        <h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
+                        <p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
+                    </div>
+                    <div class="summary_suspect">
+                        <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                        <h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
+                        <p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
+                    </div>
+                    <div class="summary_suspect">
+                        <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                        <h2 class="explain_suspect_emotion_title">Ce suspect était ...</h2>
+                        <p class="explain_suspect_emotion_description">En effet, la ... se caractérise par un ...</p>
+                    </div>
+                </div>
+            </div>
         <div class="alert_dialog_background"></div>
         <div class="unsupported_browser">
             <div id="unsupported_browser_dialog" class="alert_dialog">