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/package.json

@@ -10,24 +10,33 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.0.0",
     "@tsconfig/svelte": "^5.0.4",
     "flowbite": "^3.1.2",
-    "flowbite-svelte": "^0.47.4",
+    "flowbite-svelte": "^0.48.4",
     "flowbite-svelte-icons": "^2.0.2",
-    "sass-embedded": "^1.83.4",
-    "svelte": "^5.15.0",
-    "svelte-check": "^4.1.1",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.5"
+    "sass-embedded": "^1.85.1",
+    "svelte": "^5.22.5",
+    "svelte-check": "^4.1.4",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
   },
   "dependencies": {
     "@roxi/routify": "3.0.0-next.254",
-    "@tailwindcss/vite": "^4.0.6",
-    "lucide-svelte": "^0.474.0",
+    "@tailwindcss/vite": "^4.0.10",
+    "lucide-svelte": "^0.477.0",
     "routify": "^2.0.1",
     "socket.io-client": "^4.8.1",
-    "svelte-exmarkdown": "^4.0.2",
+    "svelte-exmarkdown": "^4.0.3",
     "svelte-i18n": "^4.0.1",
-    "tailwindcss": "^4.0.6"
+    "tailwindcss": "^4.0.10"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
-}
+}

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;

frontend/tailwind.config.js

@@ -1,33 +0,0 @@
-import flowbitePlugin from 'flowbite/plugin'
-const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
-
-export default {
-    content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
-    darkMode: ["class", '[data-theme="dark"]'],
-    theme: {
-        extend: {
-            fontFamily: {
-                lexend: ['"Lexend Deca"', 'sans-serif'], // Add Lexend Deca here
-            },
-        },
-    },
-    purge: {
-        content: [
-          'src/app.html',
-          'src/**/*.svelte',
-        ],
-        options: {
-          defaultExtractor: (content) => [
-            ...tailwindExtractor(content),
-            ...[
-              ...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)
-            ].map(([_match, group, ..._rest]) => group),
-          ],
-          keyframes: true,
-        },
-    },
-    plugins: [flowbitePlugin],
-    corePlugins: {
-        preflight: false,
-    }
-};