use hooks

Makefile

@@ -4,8 +4,6 @@ build-dev:
 	cd frontend && npm install && npm run build-dev && rm -rf ../static && cp -r build/ ../static/
 run-front-dev:
 	cd frontend && npm install && npm run dev
-run-dev:
-	rm -rf .data/ && FLASK_ENV=development python app.py
 run-prod:
 	python app.py
 build-all: run-prod

frontend/package.json

@@ -42,6 +42,7 @@
 		"@fontsource/fira-mono": "^4.5.0",
 		"@liveblocks/client": "^0.18.2",
 		"d3-selection": "^3.0.0",
-		"d3-zoom": "^3.0.0"
+		"d3-zoom": "^3.0.0",
+		"nanoid": "^4.0.0"
 	}
 }

frontend/src/lib/App.svelte

@@ -8,29 +8,54 @@
 	import { COLORS, EMOJIS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
 	import { onMount } from 'svelte';
+	import type { PromptImgObject, PromptImgKey } from '$lib/types';
 	import {
 		isLoading,
 		loadingState,
 		currZoomTransform,
-		myPresence,
-		others,
 		isPrompting,
 		clickedPosition,
-		imagesList,
-		showFrames,
-		text2img
+		showFrames
 	} from '$lib/store';
+
+	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
+
 	import { base64ToBlob, uploadImage } from '$lib/utils';
+
+	import { nanoid } from 'nanoid';
+
 	/**
 	 * The main Liveblocks code for the example.
 	 * Check in src/routes/index.svelte to see the setup code.
 	 */
 
-	export let room: Room;
+	const myPresence = useMyPresence();
+	const others = useOthers();
 
-	let canvasEl: HTMLCanvasElement;
+	// Set a default value for presence
+	myPresence.update({
+		name: '',
+		cursor: null,
+		isPrompting: false,
+		currentPrompt: ''
+	});
+	function getKey({ position }: PromptImgObject): PromptImgKey {
+		return `${position.x}_${position.y}`;
+	}
 
-	onMount(() => {});
+	const promptImgStorage = useObject('promptImgStorage');
+
+	function getpromptImgList(promptImgList: PromptImgObject[]): PromptImgObject[] {
+		if (promptImgList) {
+			const list: PromptImgObject[] = Object.values(promptImgList);
+			return list.sort((a, b) => a.date - b.date);
+		}
+		return [];
+	}
+	let promptImgList: PromptImgObject[] = [];
+	$: promptImgList = getpromptImgList($promptImgStorage?.toObject());
+
+	let canvasEl: HTMLCanvasElement;
 
 	async function onClose(e: CustomEvent) {
 		$isPrompting = false;
@@ -182,13 +207,15 @@
 							}
 							const imgBlob = await base64ToBlob(imgBase64);
 							const imgURL = await uploadImage(imgBlob, _prompt);
-
-							$imagesList.push({
+							const promptImg = {
 								prompt: _prompt,
 								imgURL: imgURL,
 								position: $clickedPosition,
-								date: new Date().getTime()
-							});
+								date: new Date().getTime(),
+								id: nanoid()
+							};
+							const key = getKey(promptImg);
+							$promptImgStorage.set(key, promptImg);
 							console.log(imgURL);
 							$loadingState = data.success ? 'Complete' : 'Error';
 						} catch (err) {
@@ -224,18 +251,19 @@
 	<Canvas bind:value={canvasEl} />
 
 	<main class="z-10 relative">
-		{#if $imagesList && $showFrames}
-			{#each $imagesList as image, i}
+		{#if promptImgList && $showFrames}
+			{#each promptImgList as promptImg, i}
 				<Frame
 					color={COLORS[0]}
-					position={$imagesList.get(i).position}
 					transform={$currZoomTransform}
+					position={promptImg?.position}
+					prompt={promptImg?.prompt}
 				/>
 			{/each}
 		{/if}
-		{#if $clickedPosition}
+		<!-- {#if $clickedPosition}
 			<Frame color={COLORS[0]} position={$clickedPosition} transform={$currZoomTransform} />
-		{/if}
+		{/if} -->
 		{#if $myPresence?.cursor}
 			<Frame color={COLORS[0]} position={$myPresence.cursor} transform={$currZoomTransform} />
 			<Cursor
@@ -247,19 +275,20 @@
 		{/if}
 
 		<!-- When others connected, iterate through others and show their cursors -->
-		{#if others}
+		{#if $others}
 			{#each [...$others] as { connectionId, presence } (connectionId)}
 				{#if presence?.cursor}
 					<Frame
 						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
-						position={presence.cursor}
+						position={presence?.cursor}
+						prompt={presence?.currentPrompt}
 						transform={$currZoomTransform}
 					/>
 
 					<Cursor
 						emoji={EMOJIS[1 + (connectionId % (EMOJIS.length - 1))]}
 						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
-						position={presence.cursor}
+						position={presence?.cursor}
 						transform={$currZoomTransform}
 					/>
 				{/if}

frontend/src/lib/Canvas.svelte

@@ -3,13 +3,13 @@
 	import { select } from 'd3-selection';
 	import { onMount } from 'svelte';
 	import { PUBLIC_UPLOADS } from '$env/static/public';
-	import {
-		currZoomTransform,
-		myPresence,
-		isPrompting,
-		clickedPosition,
-		imagesList
-	} from '$lib/store';
+	import { currZoomTransform, isPrompting, clickedPosition } from '$lib/store';
+
+	import { useMyPresence, useObject } from '$lib/liveblocks';
+	import type { PromptImgObject } from '$lib/types';
+
+	const myPresence = useMyPresence();
+	const promptImgStorage = useObject('promptImgStorage');
 
 	const height = 512 * 5;
 	const width = 512 * 5;
@@ -21,8 +21,21 @@
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;
 
-	$: if ($imagesList) {
-		renderImages($imagesList);
+	// keep track of images already rendered
+	const imagesOnCanvas = new Set();
+
+	function getpromptImgList(promptImgList: PromptImgObject[]): PromptImgObject[] {
+		if (promptImgList) {
+			const list: PromptImgObject[] = Object.values(promptImgList).sort((a, b) => a.date - b.date);
+			return list.filter(({ id }) => !imagesOnCanvas.has(id));
+		}
+		return [];
+	}
+	let promptImgList: PromptImgObject[] = [];
+	$: promptImgList = getpromptImgList($promptImgStorage?.toObject());
+
+	$: if (promptImgList) {
+		renderImages(promptImgList);
 	}
 
 	onMount(() => {
@@ -58,23 +71,29 @@
 		canvasCtx.strokeRect(0, 0, width, height);
 	});
 
-	function renderImages(imagesList) {
-		const images = [...imagesList.toImmutable()].sort((a, b) => a.date - b.date);
+	function renderImages(promptImgList: PromptImgObject[]) {
 		Promise.all(
-			images.map(
-				({ imgURL, position }) =>
+			promptImgList.map(
+				({ imgURL, position, id }) =>
 					new Promise((resolve) => {
 						const img = new Image();
 						img.crossOrigin = 'anonymous';
 						img.onload = () => {
-							resolve({ img, position });
+							const res = { img, position, id } as {
+								img: HTMLImageElement;
+								position: { x: number; y: number };
+								id: string;
+							};
+							resolve(res);
 						};
 						const url = imgURL.split('/');
 						img.src = `${PUBLIC_UPLOADS}/${url.slice(3).join('/')}`;
 					})
 			)
 		).then((images) => {
-			images.forEach(({ img, position }) => {
+			images.forEach(({ img, position, id }) => {
+				// keep track of images already rendered
+				imagesOnCanvas.add(id);
 				canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
 			});
 		});
@@ -99,19 +118,19 @@
 		// const y = Math.round(event.layerY / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), 100);
 		// const x = round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), grid);
 		// const y = round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), grid);
-		$myPresence = {
+		myPresence.update({
 			cursor: {
 				x,
 				y
 			}
-		};
+		});
 	}
 
 	// When the pointer leaves the page, set cursor presence to null
 	function handlePointerLeave() {
-		$myPresence = {
+		myPresence.update({
 			cursor: null
-		};
+		});
 	}
 </script>
 

frontend/src/lib/Frame.svelte

@@ -6,6 +6,7 @@
 	export let transform: ZoomTransform;
 	export let color = '';
 	export let position = { x: 0, y: 0 };
+	export let prompt = '';
 
 	$: coord = {
 		x: transform.applyX(position.x),
@@ -24,7 +25,7 @@
 	<LoadingIcon />
 	<h2 class="text-lg">Click to paint</h2>
 
-	<div class="absolute bottom-0 font-bold">A cat on grass</div>
+	<div class="absolute bottom-0 font-bold">{prompt}}</div>
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/liveblocks/LiveblocksProvider.svelte

@@ -0,0 +1,19 @@
+<!--
+  Works similarly to `liveblocks-react` LiveblocksProvider
+  https://liveblocks.io/docs/api-reference/liveblocks-react#RoomProvider
+-->
+<script lang="ts">
+  import { clientSymbol } from "./symbols";
+  import type { Client } from "@liveblocks/client";
+  import { setContext } from "svelte";
+
+  export let client: Client;
+
+  if (!client) {
+    throw new Error("LiveblocksProvider requires a client");
+  }
+
+  setContext<Client>(clientSymbol, client);
+</script>
+
+<slot />

frontend/src/lib/liveblocks/RoomProvider.svelte

@@ -0,0 +1,30 @@
+<!--
+  Works similarly to `liveblocks-react` RoomProvider
+  https://liveblocks.io/docs/api-reference/liveblocks-react#RoomProvider
+-->
+<script lang="ts">
+  import { clientSymbol, roomSymbol } from "./symbols";
+  import type { Client, Room } from "@liveblocks/client";
+  import { getContext, onDestroy, setContext } from "svelte";
+
+  export let id: string;
+  export let defaultPresence = () => ({});
+
+  if (!id) {
+    throw new Error("RoomProvider requires an id");
+  }
+
+  const client = getContext<Client>(clientSymbol);
+
+  if (client) {
+    const room = client.enter(id, defaultPresence());
+
+    setContext<Room>(roomSymbol, room);
+
+    onDestroy(() => {
+      client.leave(id);
+    });
+  }
+</script>
+
+<slot />

frontend/src/lib/liveblocks/index.ts

@@ -0,0 +1,18 @@
+export * from "./symbols";
+export * from "./useUpdateMyPresence";
+export * from "./useMyPresence";
+export * from "./useOthers";
+export * from "./useObject";
+export * from "./useList";
+export * from "./useSelf";
+export * from "./useRoom";
+export * from "./useUndo";
+export * from "./useRedo";
+export * from "./useBatch";
+export * from "./useHistory";
+
+/**
+ * These components were built to (mostly) match the
+ * liveblocks-react library
+ * https://liveblocks.io/docs/api-reference/liveblocks-react
+ */

frontend/src/lib/liveblocks/symbols.ts

@@ -0,0 +1,3 @@
+// Symbols are used for context to avoid polluting the global scope
+export const clientSymbol = Symbol();
+export const roomSymbol = Symbol();

frontend/src/lib/liveblocks/useBatch.ts

@@ -0,0 +1,14 @@
+import { useRoom } from "./useRoom";
+
+/**
+ * Works similarly to `liveblocks-react` useBatch
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useBatch
+ *
+ * const batch = useBatch()
+ * batch(() => {
+ *   // ...
+ * })
+ */
+export function useBatch() {
+  return useRoom().batch;
+}

frontend/src/lib/liveblocks/useHistory.ts

@@ -0,0 +1,12 @@
+/**
+ * Works similarly to `liveblocks-react` useHistory
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useHistory
+ *
+ * const history = useHistory()
+ * history.pause()
+ */
+import { useRoom } from "./useRoom";
+
+export function useHistory() {
+  return useRoom().history;
+}

frontend/src/lib/liveblocks/useList.ts

@@ -0,0 +1,46 @@
+import { LiveList } from "@liveblocks/client";
+import { useStorage } from "./useStorage";
+import { onDestroy } from "svelte";
+import type { Writable } from "svelte/store";
+import { writable } from "svelte/store";
+import { useRoom } from "./useRoom";
+
+/**
+ * Works similarly to `liveblocks-react` useList
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useList
+ *
+ * The main difference is that it returns a Svelte store:
+ * const list = useList()
+ * $list.push([{ item: 1 }])
+ * console.log([...$list])
+ */
+export function useList<T>(
+  name: string,
+  initial?: any[]
+): Writable<LiveList<T>> {
+  const room = useRoom();
+  const rootStore = useStorage();
+  const list = writable<LiveList<T>>();
+  let unsubscribe = () => {};
+
+  const unsubscribeRoot = rootStore.subscribe((root) => {
+    if (!root) {
+      return;
+    }
+
+    if (!root.get(name)) {
+      root.set(name, new LiveList<T>(initial));
+    }
+
+    list.set(root.get(name));
+
+    unsubscribe();
+    unsubscribe = room.subscribe(root.get(name) as LiveList<T>, (newList) => {
+      list.set(newList);
+    });
+  });
+
+  onDestroy(unsubscribeRoot);
+
+  return list;
+}

frontend/src/lib/liveblocks/useMyPresence.ts

@@ -0,0 +1,42 @@
+import type { Presence } from "@liveblocks/client";
+import { onDestroy } from "svelte";
+import { writable } from "svelte/store";
+import { useRoom } from "./useRoom";
+
+/**
+ * Works similarly to `liveblocks-react` useMyPresence
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useMyPresence
+ *
+ * The main difference is that it returns a custom Svelte store:
+ * const presence = useMyPresence()
+ * presence.update({ name: 'Chris })
+ * console.log($presence.name)
+ * <div>{$presence.count}</div>
+ *
+ * USAGE NOTE:
+ * This is a custom Svelte store, `set` does nothing, only `update`.
+ * `update` does NOT take a function like regular Svelte stores,
+ * it takes an object and works like `useUpdateMyPresence` in Liveblocks
+ */
+
+export function useMyPresence(): any {
+  const room = useRoom();
+  const { subscribe, set } = writable<Presence>();
+
+  function update(newPresence) {
+    room.updatePresence(newPresence);
+  }
+
+  const unsubscribePresence = room.subscribe("my-presence", (presence) => {
+    set(presence);
+  });
+
+  onDestroy(() => {
+    unsubscribePresence();
+  });
+
+  return {
+    subscribe,
+    update,
+  };
+}

frontend/src/lib/liveblocks/useObject.ts

@@ -0,0 +1,43 @@
+import { LiveObject } from "@liveblocks/client";
+import { useStorage } from "./useStorage";
+import { onDestroy } from "svelte";
+import type { Writable } from "svelte/store";
+import { writable } from "svelte/store";
+import { useRoom } from "./useRoom";
+
+/**
+ * Works similarly to `liveblocks-react` useObject
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useObject
+ *
+ * The main difference is that it returns a Svelte store:
+ * const obj = useObject()
+ * $obj.set('name', 'Chris')
+ * console.log($obj.get('name'))
+ */
+export function useObject(name: string, initial?: any): Writable<LiveObject> {
+  const room = useRoom();
+  const rootStore = useStorage();
+  const list = writable<LiveObject>();
+  let unsubscribe = () => {};
+
+  const unsubscribeRoot = rootStore.subscribe((root) => {
+    if (!root) {
+      return;
+    }
+
+    if (!root.get(name)) {
+      root.set(name, new LiveObject(initial));
+    }
+
+    list.set(root.get(name));
+
+    unsubscribe();
+    unsubscribe = room.subscribe(root.get(name) as LiveObject, (newObject) => {
+      list.set(newObject);
+    });
+  });
+
+  onDestroy(unsubscribeRoot);
+
+  return list;
+}

frontend/src/lib/liveblocks/useOthers.ts

@@ -0,0 +1,28 @@
+import type { Others } from "@liveblocks/client";
+import { onDestroy } from "svelte";
+import type { Writable } from "svelte/store";
+import { writable } from "svelte/store";
+import { useRoom } from "./useRoom";
+
+/**
+ * Works similarly to `liveblocks-react` useOthers
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useOthers
+ *
+ * The main difference is that it returns a Svelte store:
+ * const others = useOthers()
+ * console.log($others.value)
+ * {#each [...$others] as other}
+ *    ...
+ */
+export function useOthers(): Writable<Others> {
+  const room = useRoom();
+  const others = writable<Others>();
+
+  const unsubscribe = room.subscribe("others", (newOthers) => {
+    others.set(newOthers);
+  });
+
+  onDestroy(unsubscribe);
+
+  return others;
+}

frontend/src/lib/liveblocks/useRedo.ts

@@ -0,0 +1,12 @@
+/**
+ * Works similarly to `liveblocks-react` useRedo
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useRedo
+ *
+ * const redo = useRedo()
+ * redo()
+ */
+import { useRoom } from "./useRoom";
+
+export function useRedo() {
+  return useRoom().history.redo;
+}

frontend/src/lib/liveblocks/useRoom.ts

@@ -0,0 +1,21 @@
+import { getContext } from "svelte";
+import type { Room } from "@liveblocks/client";
+import { roomSymbol } from "./symbols";
+
+/**
+ * Works similarly to `liveblocks-react` useRoom
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useRoom
+ *
+ * This does NOT return a Svelte store, just the plain room object
+ * const room = useRoom()
+ * room.history.undo()
+ */
+export function useRoom(): Room {
+  const room = getContext<Room>(roomSymbol);
+
+  if (!room) {
+    throw new Error("Use RoomProvider as parent with id prop");
+  }
+
+  return room;
+}

frontend/src/lib/liveblocks/useSelf.ts

@@ -0,0 +1,32 @@
+import { onDestroy } from "svelte";
+import type { Writable } from "svelte/store";
+import { writable } from "svelte/store";
+import { useRoom } from "./useRoom";
+
+/**
+ * Works similarly to `liveblocks-react` useSelf
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useSelf
+ *
+ * The main difference is that it returns a Svelte store:
+ * const self = useSelf()
+ * console.log($self.info.id)
+ * <div>{$self.info.name}</div>
+ */
+export function useSelf(): Writable<any> {
+  const room = useRoom();
+  const self = writable();
+
+  const unsubscribeConnection = room.subscribe("connection", () => {
+    self.set(room.getSelf());
+  });
+  const unsubscribe = room.subscribe("my-presence", () => {
+    self.set(room.getSelf());
+  });
+
+  onDestroy(() => {
+    unsubscribeConnection();
+    unsubscribe();
+  });
+
+  return self;
+}

frontend/src/lib/liveblocks/useStorage.ts

@@ -0,0 +1,21 @@
+import type { LiveObject } from "@liveblocks/client";
+import type { Writable } from "svelte/store";
+import { writable } from "svelte/store";
+import { useRoom } from "./useRoom";
+
+/**
+ * No `liveblocks-react` public API equivalent, but useStorage is used internally
+ */
+export function useStorage(): Writable<LiveObject> {
+  const room = useRoom();
+  const rootStore = writable<LiveObject>();
+
+  async function fetchStorage() {
+    const { root }: { root: LiveObject } = await room!.getStorage();
+    rootStore.set(root);
+  }
+
+  fetchStorage();
+
+  return rootStore;
+}

frontend/src/lib/liveblocks/useUndo.ts

@@ -0,0 +1,12 @@
+/**
+ * Works similarly to `liveblocks-react` useUndo
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useUndo
+ *
+ * const undo = useUndo()
+ * undo()
+ */
+import { useRoom } from "./useRoom";
+
+export function useUndo() {
+  return useRoom().history.undo;
+}

frontend/src/lib/liveblocks/useUpdateMyPresence.ts

@@ -0,0 +1,20 @@
+import { useMyPresence } from "./useMyPresence";
+
+/**
+ * Works similarly to `liveblocks-react` useUpdateMyPresence
+ * https://liveblocks.io/docs/api-reference/liveblocks-react#useUpdateMyPresence
+ *
+ * const updateMyPresence = useUpdateMyPresence()
+ * updateMyPresence({ name: 'Chris' })
+ *
+ *
+ * Can also import useMyPresence instead and use .update() instead:
+ *
+ * const myPresence = useMyPresence()
+ * myPresence.update({ name: 'Chris' })
+ */
+
+export function useUpdateMyPresence(): (val: any) => void {
+  const presence = useMyPresence();
+  return (updatedPresence) => presence.update(updatedPresence);
+}

frontend/src/lib/store.ts

@@ -3,6 +3,8 @@ import type { Room } from '@liveblocks/client';
 
 import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
 
+import type {Person } from "$lib/types"
+
 export const loadingState = writable<string>('');
 export const isLoading = writable<boolean>(false);
 export const isPrompting = writable<boolean>(false);
@@ -12,45 +14,3 @@ export const text2img = writable<boolean>(false);
 
 export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
 
-export const myPresence = writable(null);
-export const others = writable(null);
-export const imagesList = writable(null);
-
-export function createPresenceStore(room: Room) {
-	// Get initial values for presence and others
-	myPresence.set(room.getPresence());
-	others.set(room.getOthers());
-
-	const unsubscribeMyPresence = room.subscribe('my-presence', (presence) => {
-		myPresence.update((_) => presence);
-	});
-
-	const unsubscribeOthers = room.subscribe('others', (otherUsers) => {
-		others.update((_) => otherUsers);
-	});
-
-	myPresence.set = (presence) => {
-		room.updatePresence(presence);
-		return presence;
-	};
-
-	return () => {
-		unsubscribeMyPresence();
-		unsubscribeOthers();
-	};
-}
-
-export async function createStorageStore(room: Room) {
-	try {
-		const { root } = await room.getStorage();
-
-		const _imagesList = root.get('imagesList');
-
-		imagesList.set(_imagesList);
-		room.subscribe(_imagesList, () => {
-			imagesList.update((_) => _imagesList);
-		});
-	} catch (e) {
-		console.log(e);
-	}
-}

frontend/src/lib/types.ts

@@ -1,4 +1,7 @@
-export type Presence = {
+import type { JsonObject } from "@liveblocks/client";
+
+
+export interface Presence extends JsonObject {
 	cursor: {
 		x: number;
 		y: number;
@@ -10,4 +13,17 @@ export type Storage = {
 	// ...
 };
 
-export type User = string;
+export type User = string;
+
+export type PromptImgObject = {
+	prompt: string;
+	imgURL: string;
+	position: {
+		x: number;
+		y: number;
+	}
+	date: number;
+	id: string;
+};
+
+export type PromptImgKey = string;

frontend/src/routes/+page.svelte

@@ -1,47 +1,46 @@
+<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 { isLoading, loadingState, createPresenceStore, createStorageStore } from '$lib/store';
-	import type { Client, Room } from '@liveblocks/client';
-	import { createClient, LiveList } from '@liveblocks/client';
-
+	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 { Presence, Storage } from '$lib/types';
 
+	let roomId: string;
+	let loaded = false;
 	let client: Client;
-	let room: Room;
-	let roomId = 'multiplayer-SD';
 
 	onMount(() => {
+		// Add random id to room param if not set, and return the id string
+		// e.g. /?room=758df70b5e94c13289df6
+		roomId = 'multiplayer-SD';
+
+		// Connect to the authentication API for Liveblocks
 		client = createClient({
 			publicApiKey: 'pk_test_JlUZGH3kQmhmZQiqU2l8eIi5'
 		});
 
-		room = client.enter<Presence, Storage /* UserMeta, RoomEvent */>(roomId, {
-			initialPresence: {
-				cursor: null
-			},
-			initialStorage: { imagesList: new LiveList() }
-		});
-		const unsubscribe = room.subscribe('error', (error) => {
-			console.error('error', error);
-		});
-
-		const unsubscribePresence = createPresenceStore(room);
-		createStorageStore(room);
-		return () => {
-			if (client && room) {
-				client.leave(roomId);
-				unsubscribePresence();
-			}
-		};
+		loaded = true;
 	});
 </script>
 
-<div class="max-w-screen-md mx-auto p-5 relative pointer-events-none touch-none z-10">
-	<h1 class="text-lg md:text-3xl font-bold leading-normal">
-		Stable Diffussion Outpainting Multiplayer
-	</h1>
-</div>
-{#if room}
-	<App {room} />
+{#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}