routes

frontend/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />

frontend/src/routes/+page.svelte

@@ -0,0 +1,55 @@
+<script context="module" lang="ts">
+	export const prerender = true;
+</script>
+
+<!--
+	The main code for this component is in src/PixelArtTogether.svelte
+	This file contains the Liveblocks providers, based on the
+	liveblocks-react library
+	https://liveblocks.io/docs/api-reference/liveblocks-react#LiveblocksProvider
+  -->
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { createClient } from '@liveblocks/client';
+	import type { Client } from '@liveblocks/client';
+	import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
+	import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
+	import App from '$lib/App.svelte';
+	import type { PageData } from './$types';
+	import { PUBLIC_API_BASE } from '$env/static/public';
+	import { selectedRoomID } from '$lib/store';
+	export let data: PageData;
+
+	let rooms = data.rooms;
+	let loaded = false;
+	let client: Client;
+
+	$: roomId = rooms.find((room) => room.id === $selectedRoomID)?.room_id;
+
+	$:{
+		console.log("ROOM ID", $selectedRoomID);
+	}
+	onMount(() => {
+		// document.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
+		client = createClient({
+			authEndpoint: PUBLIC_API_BASE + '/auth'
+		});
+
+		loaded = true;
+	});
+</script>
+
+{#if loaded}
+	<LiveblocksProvider {client}>
+		{#if roomId}
+			<RoomProvider id={roomId}>
+				<App />
+			</RoomProvider>
+		{:else}
+			<div class="flex flex-col items-center justify-center h-full">
+				<h1 class="text-2xl font-bold">No room selected</h1>
+				<p class="text-gray-500">Please select a room in the URL</p>
+			</div>
+		{/if}
+	</LiveblocksProvider>
+{/if}

frontend/src/routes/+page.ts

@@ -0,0 +1,24 @@
+import { PUBLIC_API_BASE } from '$env/static/public';
+import type { RoomResponse } from '$lib/types';
+import { selectedRoomID } from '$lib/store';
+import { MAX_CAPACITY } from '$lib/constants';
+import type { PageLoad } from './$types';
+export const prerender = true
+export const ssr = false
+
+export const load: PageLoad = async ({ url }) => {
+    const roomidParam = url.searchParams.get('roomid');
+    const res = await fetch(PUBLIC_API_BASE + '/rooms');
+    const rooms: RoomResponse[] = await res.json();
+
+    if (roomidParam) {
+        const room = rooms.find(room => room.room_id === roomidParam);
+        if (room) {
+            selectedRoomID.set(room.id);
+        }
+    } else {
+        const room = rooms.find(room => room.users_count < MAX_CAPACITY) || null;
+        selectedRoomID.set(room ? room.id : null);
+    }
+    return { rooms };
+}