Playlists are not gotten through actual spotify api for User

src/app.d.ts

@@ -30,7 +30,7 @@ export interface GameMode {
 }
 
 export interface Playlist {
-  id: number;
+  id: string;
   name: string;
   imageUrl: string;
   songCount: number;

src/lib/components/GameSettings.svelte

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

src/routes/lobby/[id]/+page.server.ts

@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import type { User } from '../../../app';
-import type { Settings } from '$lib/types';
+import type { Playlist, Settings } from '$lib/types';
 import { env } from '$env/dynamic/public';
 
 export const load: PageServerLoad = async ({ params, fetch, locals: { user } }) => {
@@ -11,13 +11,12 @@ export const load: PageServerLoad = async ({ params, fetch, locals: { user } })
 
 	if (!env.PUBLIC_API_BASE) redirect(307, '/error');
 
-	const u = new URL(`lobby/${params.id}`, env.PUBLIC_API_BASE);
+	let u = new URL(`lobby/${params.id}`, env.PUBLIC_API_BASE);
 	const response = await fetch(u, {
 		headers: {
 			'Content-Type': 'application/json'
 		}
 	});
-
 	if (response.status != 200) {
 		redirect(307, '/');
 	}
@@ -28,8 +27,19 @@ export const load: PageServerLoad = async ({ params, fetch, locals: { user } })
 		players,
 		gameSettings
 	}: { id: string; host: User; players: User[]; gameSettings: Settings } = await response.json();
-	console.log('Successful request for lobby');
+
-	console.log(id);
+	let playlists: Playlist[] = [];
+	if (user.email === host.email) {
+		u = new URL(`user/playlists`, env.PUBLIC_API_BASE);
+		const res = await fetch(u);
+		if (response.status != 200) {
+			console.log('Could not fetch playlists from api');
+			redirect(307, '/error');
+		}
+
+		playlists = await res.json();
+    console.log(JSON.stringify(playlists));
+	}
 
 	return {
 		user: user,
@@ -38,6 +48,7 @@ export const load: PageServerLoad = async ({ params, fetch, locals: { user } })
 			host,
 			players,
 			gameSettings
-		}
+		},
+		playlists: playlists
 	};
 };

src/routes/lobby/[id]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import { wsClient } from '$lib/websocketClient.svelte';
-	import type { Settings, GameMode, Playlist } from '$lib/types';
+	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';
@@ -24,40 +24,7 @@
 		{ id: 'speed', name: 'Speed Round' }
 	]);
 
-	let playlists = $state<Playlist[]>([
+	let playlists = $state(data.playlists);
-		{
-			id: 1,
-			name: 'Pop Hits 2023',
-			imageUrl: 'https://example.com/images/pop2023.jpg',
-			songCount: 25
-		},
-		{
-			id: 2,
-			name: 'Rock Classics',
-			imageUrl: 'https://example.com/images/rock.jpg',
-			songCount: 30
-		},
-		{ id: 3, name: '80s Mixtape', imageUrl: 'https://example.com/images/80s.jpg', songCount: 20 },
-		{
-			id: 4,
-			name: 'Movie Soundtracks',
-			imageUrl: 'https://example.com/images/movies.jpg',
-			songCount: 15
-		},
-		{
-			id: 5,
-			name: 'Hip Hop Essentials',
-			imageUrl: 'https://example.com/images/hiphop.jpg',
-			songCount: 40
-		},
-		{
-			id: 6,
-			name: 'Indie Discoveries',
-			imageUrl: 'https://example.com/images/indie.jpg',
-			songCount: 35
-		}
-	]);
-
 	function handleSettingsUpdate(settings: Settings) {
 		// Send updated settings to other players via websocket
 		wsClient.gameSettings = settings;
@@ -84,9 +51,9 @@
 		wsClient.sendMessage({
 			type: 'leaveGame',
 			player: data.user.email
-    })
+		});
 		wsClient.disconnect();
-    goto("/");
+		goto('/');
 		// In a real app, you'd likely redirect to another page here
 	}
 
@@ -103,7 +70,7 @@
 
 	onDestroy(() => {
 		// Clean up WebSocket connection when component is destroyed
-    leaveLobby()
+		leaveLobby();
 	});
 </script>