feat(frontend): add basic end screen

frontend/src/i18n/de.json

@@ -71,6 +71,13 @@
         "host": "Host",
         "you": "Du"
     },
+    "end_screen": {
+        "game_has_ended": "Das Spiel ist vorbei",
+        "player_won_the_game": "{player_name} hat das Spiel gewonnen!",
+        "you_won_the_game": "Du hast das Spiel gewonnen!",
+        "go_back": "Zurück",
+        "play_again": "Erneut spielen"
+    },
     "player_status": {
         "connected": "Verbunden",
         "disconnected": "Getrennt"

frontend/src/i18n/en.json

@@ -73,6 +73,13 @@
         "player": "Player",
         "return_to_game": "Return to game"
     },
+    "end_screen": {
+        "game_has_ended": "The game has ended",
+        "player_won_the_game": "{player_name} has won the game!",
+        "you_won_the_game": "You have won the game!",
+        "go_back": "Go back",
+        "play_again": "Play again"
+    },
     "player_status": {
         "connected": "Connected",
         "disconnected": "Disconnected"

frontend/src/routes/Game.svelte

@@ -66,8 +66,6 @@
             <Main />
         </div>
     {:else if $sessionStore.gameState == GameState.Ended}
-        <div>
-            <EndScreen />
-        </div>
+        <EndScreen />
     {/if}
 {/if}

frontend/src/stores/sessionStore.ts

@@ -36,6 +36,7 @@ interface SessionData {
     playedCards: CardPlayedObj[];
     ownCards: CardInfoObj[];
     playerStates: { [key: string]: PlayerStateObj };
+    winner: string | undefined;
 }
 interface RoomInfoObj {
     RoomId: string;
@@ -106,6 +107,7 @@ class SessionManager {
         playedCards: [],
         ownCards: [],
         playerStates: {},
+        winner: undefined,
     });
 
     private socket: Socket | null = null;
@@ -297,6 +299,7 @@ class SessionManager {
             gameState: message.GameState,
             cardDeckId: message.CardDeckId,
             players: message.Players,
+            winner: message.Winner,
         }));
         if (message.TopCard && get(this.store).playedCards.length == 0) {
             this.store.update((state) => ({
@@ -416,6 +419,7 @@ class SessionManager {
             playedCards: [],
             ownCards: [],
             playerStates: {},
+            winner: undefined,
         });
         window.history.replaceState({}, "", "/");
     }

frontend/src/views/Game/EndScreen.svelte

@@ -0,0 +1,37 @@
+<script>
+    import { CrownIcon, TimerIcon } from "lucide-svelte";
+    import { _ } from "svelte-i18n";
+    import { sessionStore } from "../../stores/sessionStore";
+    import { Button } from "flowbite-svelte";
+</script>
+
+<div class="flex size-full justify-center items-center">
+    <div class="flex flex-col items-center gap-2">
+        {#if $sessionStore.winner == undefined}
+            <TimerIcon size={64} />
+            <span>{$_("end_screen.game_has_ended")}</span>
+        {:else}
+            <CrownIcon size={64} />
+            {#if $sessionStore.winner == sessionStore.getUserId()}
+                <span>{$_("end_screen.you_won_the_game")}</span>
+            {:else}
+                <span
+                    >{$_("end_screen.player_won_the_game", {
+                        values: { player_name: sessionStore.getUser($sessionStore.winner)?.Username },
+                    })}</span
+                >
+            {/if}
+        {/if}
+        <div class="flex flex-row gap-3 mt-5">
+            <Button
+                color="alternative"
+                on:click={() => {
+                    sessionStore.leaveRoom();
+                    window.history.replaceState({}, "/Game", "/");
+                }}>{$_("end_screen.go_back")}</Button
+            >
+            <!-- TODO: implement rematch with the same players -->
+            <Button>{$_("end_screen.play_again")}</Button>
+        </div>
+    </div>
+</div>