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
+//   };
+// }