frontend/src/routes/+page.svelte

<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';

	export let data: PageData;

	let roomId: string;
	let loaded = false;
	let client: Client;

	$: {
		console.log('data changed', data);
	}
	onMount(() => {
		document.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });

		// Add random id to room param if not set, and return the id string
		// e.g. /?room=758df70b5e94c13289df6
		roomId = 'sd-multiplayer-room-0';

		// Connect to the authentication API for Liveblocks
		client = createClient({
			// publicApiKey: 'pk_test_JlUZGH3kQmhmZQiqU2l8eIi5'
			authEndpoint: PUBLIC_API_BASE + '/auth'
		});

		loaded = true;
	});
</script>

{#if loaded}
	<!-- Provides Liveblocks hooks to children -->
	<LiveblocksProvider {client}>
		<!-- Create a room from id e.g. `sveltekit-pixel-art-758df70b5e94c13289df6` -->
		<RoomProvider id={roomId}>
			<!-- Main app component -->
			<App />
		</RoomProvider>
	</LiveblocksProvider>
{/if}