Remove types, and only use single source of truth

src/app.d.ts

@@ -17,12 +17,6 @@ export interface User {
   email: string;
   username: string;
 }
-//
-// export interface Player {
-//   id: number;
-//   name: string;
-//   isHost: boolean;
-// }
 
 export interface GameMode {
   id: string;
@@ -36,10 +30,10 @@ export interface Playlist {
   songCount: number;
 }
 
-export interface GameSettings {
+export interface Settings {
   maxPlayers: number;
   gameMode: string;
-  selectedPlaylist: number;
+  selectedPlaylistId: string;
 }
 
 export type WebSocketMessage = {

src/lib/components/GameSettings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { GameMode, Playlist, Settings } from '$lib/types';
+	import type { GameMode, Playlist, Settings } from '../../app';
 	import PlaylistSelector from './PlaylistSelector.svelte';
 
 	let {
@@ -34,7 +34,7 @@
 		onUpdate(localSettings);
 	}
 
-	function updatePlaylist(playlistId: number) {
+	function updatePlaylist(playlistId: string) {
 		localSettings.selectedPlaylistId = playlistId;
 		onUpdate(localSettings);
 	}

src/lib/components/PlaylistSelector.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { Playlist } from '$lib/types';
+  import type { Playlist } from '../../app';
   
   const props = $props<{
     playlists: Playlist[];
-    selectedPlaylistId: number;
+    selectedPlaylistId: string;
-    onSelect: (id: number) => void;
+    onSelect: (id: string) => void;
   }>();
   
   let searchQuery = $state('');

src/lib/types.ts

@@ -1,28 +0,0 @@
-export interface Player {
-  id: string;
-  name: string;
-  isHost: boolean;
-}
-
-export interface GameMode {
-  id: string;
-  name: string;
-}
-
-export interface Playlist {
-  id: number;
-  name: string;
-  imageUrl: string;
-  songCount: number;
-}
-
-export interface Settings {
-  maxPlayers: number;
-  gameMode: string;
-  selectedPlaylistId: number;
-}
-
-export interface WebSocketMessage {
-  type: string;
-  [key: string]: any;
-}

src/lib/websocketClient.svelte.ts

@@ -1,5 +1,4 @@
-import type { User } from '../app';
+import type { Settings, User, WebSocketMessage } from '../app';
-import type { Player, Settings, WebSocketMessage } from './types';
 
 export class WebsocketClient {
   connected = $state(false);
@@ -7,7 +6,7 @@ export class WebsocketClient {
   gameSettings: Settings = $state({
     maxPlayers: 8,
     gameMode: 'classic',
-    selectedPlaylistId: 1
+    selectedPlaylistId: ''
   });
   socket: WebSocket | null = null;
 
@@ -77,89 +76,3 @@ export class WebsocketClient {
 }
 
 export const wsClient = new WebsocketClient();
-
-//
-// 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/[id]/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import { wsClient } from '$lib/websocketClient.svelte';
-	import type { Settings, GameMode } from '$lib/types';
 	import PlayerList from '$lib/components/PlayerList.svelte';
 	import GameSettings from '$lib/components/GameSettings.svelte';
 	import type { PageProps } from './$types';
 	import { env } from '$env/dynamic/public';
 	import { goto } from '$app/navigation';
+	import type { GameMode, Settings } from '../../../app';
 
 	// Create WebSocket client