chore: upgrade frontend dependencies

- Upgraded all frontend dependencies to their latest versions
- Updated Tailwind CSS to v4 and adjusted configuration

Note: This is WIP. Some features are broken and there are known bugs that need to be addressed.

frontend/src/app.scss

@@ -1,5 +1,3 @@
-@custom-variant dark (&:where(.dark, .dark *));
-
 @theme inline {
   --color-primary-50: color-mix(in srgb, var(--primary) 10%, white);
   --color-primary-100: color-mix(in srgb, var(--primary) 20%, white);
@@ -66,6 +64,9 @@ body {
   --primary: #d5b6ff;
   --secondary: #ffb6f5;
   --tertiary: #08aeea;
+
+  --default-element-color: #213547;
+  --default-background-color: #ffffff;
 }
 
 body.dark-theme {

frontend/src/components/ConnectRoom.svelte

@@ -143,7 +143,7 @@
                 {/if}
             </InputAddon>
             <input
-                class="bg-primary-200 px-4 focus:bg-primary-100 text-black dark:text-white mr-md dark:bg-primary-700 dark:focus:bg-primary-600 w-full border-0 focus:outline-none h-12"
+                class="bg-primary-200 px-4 focus:bg-primary-100 placeholder:text-gray-500 dark:placeholder:text-gray-300 mr-md dark:bg-primary-700 dark:focus:bg-primary-600 w-full border-0 focus:outline-none focus:ring-0 h-12"
                 placeholder={$_("landing_page.connect_room.enter_room_code")}
                 class:cursor-not-allowed={$loading}
                 class:opacity-50={$loading}

frontend/src/components/Game/Lobby.svelte

@@ -70,10 +70,6 @@
         sessionStore.leaveRoom();
         showLeaveModal = false;
     }
-
-    function startGame() {
-        // TODO start game
-    }
 </script>
 
 <!-- Modal: Confirm Leave Room -->
@@ -244,7 +240,7 @@
         <Button
             class="w-xs mx-auto text-dark bg-green-200 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-900 backdrop-blur-lg border border-black/20 dark:border-white/20 shadow-lg p-4 rounded-2xl flex items-center justify-between transition-all cursor-pointer"
             on:click={() => {
-                startGame();
+                sessionStore.startGame();
             }}
         >
             <div class="grid justify-items-start">

frontend/src/components/RenamePlayer.svelte

@@ -68,7 +68,7 @@
         <!-- Rename Player -->
         <div class="w-full">
             <input
-                class="text-black w-full dark:text-white mr-md w-full border-0 focus:outline-none h-8 bg-opacity-50"
+                class="text-black w-full dark:text-white mr-md w-full border-0 focus:outline-none focus:ring-0 h-8 bg-transparent"
                 bind:value={playerName}
                 on:input={onInput}
                 bind:this={inputRef}

frontend/src/components/StatsContainer.svelte

@@ -37,8 +37,8 @@
     <h4 class="text-xl font-semibold">{$_("landing_page.stats_container.title")}</h4>
     <!-- content div -->
     <div class="grid justify-items-start text-start">
-        <span>{$_("landing_page.stats_container.online_player_count", { values: { count: stats.online_player_count ?? $_("landing_page.stats_container.no_data") } })}</span>
-        <span>{$_("landing_page.stats_container.current_game_rooms", { values: { count: stats.current_game_rooms ?? $_("landing_page.stats_container.no_data") } })}</span>
-        <span>{$_("landing_page.stats_container.games_played", { values: { count: stats.games_played ?? $_("landing_page.stats_container.no_data") } })}</span>
+        <span>{$_("landing_page.stats_container.online_player_count", { values: { count: stats.online_player_count ?? "..." } })}</span>
+        <span>{$_("landing_page.stats_container.current_game_rooms", { values: { count: stats.current_game_rooms ?? "..." } })}</span>
+        <span>{$_("landing_page.stats_container.games_played", { values: { count: stats.games_played ?? "..." } })}</span>
     </div>
 </div>

frontend/src/index.css

@@ -1,3 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
-@import "tailwindcss";
-@import './app.scss';
+@import 'tailwindcss';
+@plugin 'flowbite/plugin';
+@custom-variant dark {
+    @media not print {
+      .dark & {
+        @slot;
+      }
+    }
+  }
+@source "../node_modules/flowbite-svelte/dist";
+@import './app.scss';

frontend/src/routes/Game.svelte

@@ -8,9 +8,9 @@
     import { requestJoinRoom } from "../stores/roomStore";
 
     onMount(async () => {
+        // TODO: check if already connected to room, currently its overwriting the session
         const params = new URLSearchParams(window.location.search);
         const joinParam = params.get('join');
-        console.log('Join param:', joinParam);
 
         if(joinParam) {
             await requestJoinRoom(joinParam);

frontend/src/stores/sessionStore.ts

@@ -80,6 +80,10 @@ class SessionManager {
     return get(this.store);
   }
 
+  startGame() {
+    this.socket?.emit("StartGame");
+  }
+
   hasSessionData(): boolean {
     const state = this.getState();
     if (state.sessionToken && state.userId) return true;