Working websocket client with reactivity

src/lib/components/GameSettings.svelte

@@ -22,14 +22,14 @@
 		selectedPlaylistId: settings.selectedPlaylistId
 	});
 
-	$effect(() => {
+	// $effect(() => {
-		// Update local settings when change
+	// 	// Update local settings when change
-		localSettings = {
+	// 	localSettings = {
-			maxPlayers: settings.maxPlayers,
+	// 		maxPlayers: settings.maxPlayers,
-			gameMode: settings.gameMode,
+	// 		gameMode: settings.gameMode,
-			selectedPlaylistId: settings.selectedPlaylistId
+	// 		selectedPlaylistId: settings.selectedPlaylistId
-		};
+	// 	};
-	});
+	// });
 
 	function updateMaxPlayers(value: number) {
 		if (value >= 2 && value <= 16) {

src/lib/websocketClient.svelte.ts

@@ -1,13 +1,13 @@
 import type { Player, Settings, WebSocketMessage } from './types';
 
 export class WebsocketClient {
-  connected = false;
+  connected = $state(false);
-  players: Player[] = [];
+  players: Player[] = $state([]);
-  gameSettings: Settings = {
+  gameSettings: Settings = $state({
     maxPlayers: 8,
     gameMode: 'classic',
     selectedPlaylistId: 1
-  };
+  });
   socket: WebSocket | null = null;
 
   connect(url: string): void {
@@ -74,6 +74,9 @@ export class WebsocketClient {
     this.players = [];
   }
 }
+
+export const wsClient = new WebsocketClient();
+
 //
 // export function createWebSocketClient() {
 //   let socket: WebSocket | null = null;

src/routes/callback/+page.server.ts

@@ -51,4 +51,4 @@ export const load: PageServerLoad = async ({ url, cookies }) => {
     cookies.set("session_id", session.id, { path: "/", secure: /^true$/i.test(env.PUBLIC_SECURE ?? "true") });
 
     redirect(307, "/")
-};
+};

src/routes/lobby/+page.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { WebsocketClient } from '$lib/websocketClient';
+  import { wsClient } from '$lib/websocketClient.svelte';
   import type { Settings, GameMode, Playlist } from '$lib/types';
   import PlayerList from '$lib/components/PlayerList.svelte';
   import GameSettings from '$lib/components/GameSettings.svelte';
   
   // Create WebSocket client
 
-  let wsClient = new WebsocketClient();
-  let connected = $state(wsClient.connected);
-
   // Current user state
   let isHost = $state(true); // Assume current user is host for this example
   let lobbyCode = $state('GAME123');
@@ -32,6 +29,7 @@
   
   function handleSettingsUpdate(settings: Settings) {
     // Send updated settings to other players via websocket
+    wsClient.gameSettings = settings;
     wsClient.sendMessage({
       type: 'settingsUpdate',
       settings: settings
@@ -56,28 +54,8 @@
     // In a real app, you'd likely redirect to another page here
   }
   
-  // Initialize mock data for demo
-  function initializeMockData() {
-    // Simulate WebSocket connection and receiving initial player data
-    // setTimeout(() => {
-    //   console.log("Init mock data");
-    //   wsClient.players = [
-    //     { id: 1, name: 'YourName', isHost: true },
-    //     { id: 2, name: 'Player2', isHost: false },
-    //     { id: 3, name: 'GamerX', isHost: false }
-    //   ];
-    //   wsClient.connected = true;
-    // }, 500);
-  }
-  
   onMount(() => {
-    // In a real app, connect to WebSocket server
+    wsClient.connect(`ws://localhost/api/lobby?id=${lobbyCode}`);
-    // wsClient.connect('ws://example.com/game-lobby');
-
-    wsClient.connect('ws://localhost:3000/ws?lobby_id=test');
-
-    // For demo purposes, we'll simulate a connection
-    // initializeMockData();
   });
   
   onDestroy(() => {
@@ -111,7 +89,7 @@
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
       <!-- Left column: Player list -->
       <div class="md:col-span-1">
-        {#if connected}
+        {#if wsClient.connected}
           <PlayerList 
             players={wsClient.players} 
             maxPlayers={wsClient.gameSettings.maxPlayers}