Try and make websockets work

src/lib/websocketClient.ts

@@ -1,52 +1,54 @@
 import type { Player, Settings, WebSocketMessage } from './types';
 
-export function createWebSocketClient() {
-  let socket: WebSocket | null = null;
-
-  let connected = false;
-  let players: Player[] = [];
-  let gameSettings: Settings = {
+export class WebsocketClient {
+  connected = false;
+  players: Player[] = [];
+  gameSettings: Settings = {
     maxPlayers: 8,
     gameMode: 'classic',
     selectedPlaylistId: 1
   };
+  socket: WebSocket | null = null;
 
-  function connect(url: string): void {
-    if (socket) socket.close();
+  connect(url: string): void {
+    if (this.socket) this.socket.close();
 
-    socket = new WebSocket(url);
+    this.socket = new WebSocket(url);
 
-    socket.onopen = () => {
-      connected = true;
+    this.socket.onopen = () => {
+      console.log('Connected to websocket');
+      this.connected = true;
     };
 
-    socket.onclose = () => {
-      connected = false;
+    this.socket.onclose = () => {
+      this.connected = false;
     };
 
-    socket.onerror = (error) => {
+    this.socket.onerror = (error) => {
       console.error('WebSocket error:', error);
     };
 
-    socket.onmessage = (event: MessageEvent) => {
+    this.socket.onmessage = (event: MessageEvent) => {
       try {
         const message = JSON.parse(event.data) as WebSocketMessage;
 
+        console.log(`Received message ${JSON.stringify(message)}`);
+
         switch (message.type) {
           case 'playerJoin':
-            players = [...players, message.player];
+            this.players = [...this.players, message.player];
             break;
 
           case 'playerLeave':
-            players = players.filter(p => p.id !== message.playerId);
+            this.players = this.players.filter((p) => p.id !== message.playerId);
             break;
 
           case 'playerList':
-            players = message.players;
+            this.players = message.players;
             break;
 
           case 'settingsUpdate':
-            gameSettings = message.settings;
+            this.gameSettings = message.settings;
             break;
         }
       } catch (error) {
@@ -55,29 +57,105 @@ export function createWebSocketClient() {
     };
   }
 
-  function sendMessage(message: WebSocketMessage): void {
-    if (socket && socket.readyState === WebSocket.OPEN) {
-      socket.send(JSON.stringify(message));
+  sendMessage(message: WebSocketMessage): void {
+    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this.socket.send(JSON.stringify(message));
     } else {
       console.warn('Cannot send message, WebSocket is not connected');
     }
   }
 
-  function disconnect(): void {
-    if (socket) {
-      socket.close();
-      socket = null;
+  disconnect(): void {
+    if (this.socket) {
+      this.socket.close();
+      this.socket = null;
     }
-    connected = false;
-    players = [];
+    this.connected = false;
+    this.players = [];
   }
-
-  return {
-    connected,
-    players,
-    gameSettings,
-    connect,
-    sendMessage,
-    disconnect
-  };
 }
+//
+// export function createWebSocketClient() {
+//   let socket: WebSocket | null = null;
+//
+//   let connected = false;
+//   let players: Player[] = [];
+//   let gameSettings: Settings = {
+//     maxPlayers: 8,
+//     gameMode: 'classic',
+//     selectedPlaylistId: 1
+//   };
+//
+//   function connect(url: string): void {
+//     if (socket) socket.close();
+//
+//     socket = new WebSocket(url);
+//
+//     socket.onopen = () => {
+//       console.log('Connected to websocket');
+//       connected = true;
+//     };
+//
+//     socket.onclose = () => {
+//       connected = false;
+//     };
+//
+//     socket.onerror = (error) => {
+//       console.error('WebSocket error:', error);
+//     };
+//
+//     socket.onmessage = (event: MessageEvent) => {
+//       try {
+//         const message = JSON.parse(event.data) as WebSocketMessage;
+//
+//         console.log(`Received message ${JSON.stringify(message)}`);
+//
+//         switch (message.type) {
+//           case 'playerJoin':
+//             players = [...players, message.player];
+//             break;
+//
+//           case 'playerLeave':
+//             players = players.filter((p) => p.id !== message.playerId);
+//             break;
+//
+//           case 'playerList':
+//             players = message.players;
+//             break;
+//
+//           case 'settingsUpdate':
+//             gameSettings = message.settings;
+//             break;
+//         }
+//       } catch (error) {
+//         console.error('Failed to parse WebSocket message:', error);
+//       }
+//     };
+//   }
+//
+//   function sendMessage(message: WebSocketMessage): void {
+//     if (socket && socket.readyState === WebSocket.OPEN) {
+//       socket.send(JSON.stringify(message));
+//     } else {
+//       console.warn('Cannot send message, WebSocket is not connected');
+//     }
+//   }
+//
+//   function disconnect(): void {
+//     if (socket) {
+//       socket.close();
+//       socket = null;
+//     }
+//     connected = false;
+//     players = [];
+//   }
+//
+//   return {
+//     connected: connected,
+//     players: players,
+//     gameSettings: gameSettings,
+//     connect: connect,
+//     sendMessage: sendMessage,
+//     disconnect: disconnect
+//   };
+// }

src/routes/lobby/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { createWebSocketClient } from '$lib/websocketClient';
+  import { WebsocketClient } from '$lib/websocketClient';
   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 = $state(createWebSocketClient());
+
+  let wsClient = new WebsocketClient();
+  let connected = $state(wsClient.connected);
 
   // Current user state
   let isHost = $state(true); // Assume current user is host for this example
@@ -57,23 +59,25 @@
   // 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);
+    // 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://example.com/game-lobby');
 
+    wsClient.connect('ws://localhost:3000/ws?lobby_id=test');
+
     // For demo purposes, we'll simulate a connection
-    initializeMockData();
+    // initializeMockData();
   });
   
   onDestroy(() => {
@@ -107,7 +111,7 @@
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
       <!-- Left column: Player list -->
       <div class="md:col-span-1">
-        {#if wsClient.connected}
+        {#if connected}
           <PlayerList 
             players={wsClient.players} 
             maxPlayers={wsClient.gameSettings.maxPlayers}