Add results view and style

truthseeker/static/css/game_ui_game.css

@@ -229,18 +229,109 @@ html {
     right: 50;
 }
 
+.results_game {
+    grid-template-columns: 1fr;
+}
+
 .results_title {
     color: #BD1E1E;
     font-family: "Spicy Rice", serif;
     font-weight: bold;
     font-size: 4.5em;
     margin: 0;
+    margin-left: 0.6em;
     text-align: left;
+    margin-bottom:0;
 }
 
-.reveal_killer_title {
+.reveal {
+    justify-content: left;
+}
+
+.scores {
+    font-family: "Titan One", sans-serif;
+}
+
+.summary {
+    font-family: "Titan One", sans-serif;
+    text-align: center;
+}
+
+.reveal_and_scores {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+@media (max-width: 500px) {
+    .reveal_and_scores {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.reveal_culprit_title {
     color: white;
     font-family: "Spicy Rice", serif;
     font-weight: bold;
-    font-size: 3em;
+    font-size: 2em;
+    margin-left: 1.3em;
+}
+
+.score_title {
+    text-align: center;
+}
+
+.reveal_score {
+    width: 15em;
+    height: 3em;
+    border-radius: 10%;
+    background-color: var(--button-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 2.3em;
+}
+
+.players_list {
+    margin-left: 5em;
+    margin-top: 1em;
+}
+
+.player_names, .player_scores {
+    display: inline-block;
+}
+
+.summary_title {
+    font-family: "Spicy Rice", sans-serif;
+}
+
+.suspects_list {
+    display: flex;
+    justify-content: space-between;
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+.suspect_title {
+    display: flex;
+    flex-direction: row;
+    display: inline-block;
+}
+
+
+@media (max-width: 650px) {
+    .suspects_list{
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.rtrn_lob_btn {
+   fill: #BD1E1E;
+}
+
+#return_lobby_button {
+    background-color: transparent;
+    border: transparent;
 }

truthseeker/templates/game.html

@@ -81,10 +81,45 @@
         <div class="final_choice hidden">
             <h1 class="interrogation_title">Quelles sont vos déductions&nbsp;?</h1>
         </div>
-        <div class="results_game hidden">
+        <div class="results_game">
             <h1 class="results_title">Résultats</h1>
-            <h2 class="reveal_killer_title">Le tueur était&nbsp;...</h2>
+            <div class="reveal_and_scores">
+                <div class="scores">
+                    <h1 class="score_title">SCORES :</h1>
+                    <div class="reveal_score">Votre score&nbsp;:</div>
+                    <div class="results_game_multiplayer">
+                        <div class="players_list">
+                            <h3 class="player_names">nom1 : </h3>
+                            <h3 class="player_scores"> score1</h3></br>
+                            <h3 class="player_names">nom2 : </h3>
+                            <h3 class="player_scores"> score2</h3></br>
+                            <h3 class="player_names">nom3 : </h3>
+                            <h3 class="player_scores"> score3</h3></br>
+                            <h3 class="player_names">nom4 : </h3>
+                            <h3 class="player_scores"> score4</h3>
+                        </div>
+                    </div>
+                </div>
+                <div class="reveal">
+                    <h2 class="reveal_culprit_title">Le coupable était</h2>
+                </div>
             </div>
+            <div class="summary">
+                <div class="summary_emotions">
+                    <h1 class="summary_title">Débrief</h1>
+                    <div class="suspects_list">
+                        <h2 class="suspect_title">Le suspect 1 était</h2>
+                        <h2 class="suspect_title">Le suspect 2 était</h2>
+                        <h2 class="suspect_title">Le suspect 3 était</h2>
+                        <h2 class="suspect_title">Le suspect 4 était</h2>
+                    </div>
+                </div>
+            </div>
+            <button id="return_lobby_button" aria-label="Retourner au lobby">
+                <svg class="rtrn_lob_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="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> 
         <div class="alert_dialog_background"></div>
         <div class="unsupported_browser">