better API for liveblocks storage

frontend/src/lib/App.svelte

@@ -5,50 +5,64 @@
 	import Menu from '$lib/Menu.svelte';
 	import type { Room } from '@liveblocks/client';
 	import { onDestroy } from 'svelte';
-	import { currZoomTransform } from '$lib/store';
+	import { currZoomTransform, myPresence, others } from '$lib/store';
 
 	/**
 	 * The main Liveblocks code for the example.
 	 * Check in src/routes/index.svelte to see the setup code.
 	 */
 
-	export let room: Room;
+	// export let room: Room;
 
-	// Get initial values for presence and others
-	let myPresence = room.getPresence();
-	let others = room.getOthers();
+	// // Get initial values for presence and others
+	// let myPresence = room.getPresence();
+	// let others = room.getOthers();
 
-	// Subscribe to further changes
-	const unsubscribeMyPresence = room.subscribe('my-presence', (presence) => {
-		myPresence = presence;
-	});
+	// // Subscribe to further changes
+	// const unsubscribeMyPresence = room.subscribe('my-presence', (presence) => {
+	// 	myPresence = presence;
+	// });
 
-	const unsubscribeOthers = room.subscribe('others', (otherUsers) => {
-		others = otherUsers;
-	});
+	// const unsubscribeOthers = room.subscribe('others', (otherUsers) => {
+	// 	others = otherUsers;
+	// });
 
-	// Unsubscribe when unmounting
-	onDestroy(() => {
-		unsubscribeMyPresence();
-		unsubscribeOthers();
-	});
+	// // Unsubscribe when unmounting
+	// onDestroy(() => {
+	// 	unsubscribeMyPresence();
+	// 	unsubscribeOthers();
+	// });
+	$: {
+		console.log('myPresence', $myPresence.cursor);
+		// console.log('others', $others);
+	}
+	const r = 10;
+	function round(p, n) {
+		return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
+	}
+	const grid = 10;
 
 	// Update cursor presence to current pointer location
 	function handlePointerMove(event: PointerEvent) {
 		event.preventDefault();
-		room.updatePresence({
+		const x = Math.round(event.layerX / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), 100);
+		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 = {
 			cursor: {
-				x: Math.round(event.layerX),
-				y: Math.round(event.layerY)
+				x,
+				y
 			}
-		});
+		};
 	}
 
 	// When the pointer leaves the page, set cursor presence to null
 	function handlePointerLeave() {
-		room.updatePresence({
+		$myPresence = {
 			cursor: null
-		});
+		};
 	}
 
 	const COLORS = [
@@ -63,35 +77,39 @@
 	];
 </script>
 
-<div class="relative">
-	<div class="z-0">
-		<h3 class="text-xl">TESTS</h3>
-	</div>
+<!-- Show the current user's cursor location -->
+<div class="text">
+	{$myPresence?.cursor
+		? `${$myPresence.cursor.x} × ${$myPresence.cursor.y}`
+		: 'Move your cursor to broadcast its position to other people in the room.'}
+</div>
+<div
+	class="relative z-0 w-screen h-screen"
+	on:pointerleave={handlePointerLeave}
+	on:pointermove={handlePointerMove}
+>
+	<Canvas />
+
 	<main class="z-10 relative">
-		<!-- Show the current user's cursor location -->
-		<div class="text">
-			{myPresence?.cursor
-				? `${myPresence.cursor.x} × ${myPresence.cursor.y}`
-				: 'Move your cursor to broadcast its position to other people in the room.'}
-		</div>
-		{#if myPresence?.cursor}
-			<Frame x={myPresence.cursor.x} y={myPresence.cursor.y} transform={$currZoomTransform} />
+		{#if $myPresence?.cursor}
+			<Frame x={$myPresence.cursor.x} y={$myPresence.cursor.y} transform={$currZoomTransform} />
 		{/if}
 
 		<!-- When others connected, iterate through others and show their cursors -->
 		{#if others}
-			{#each [...others] as { connectionId, presence } (connectionId)}
+			{#each [...$others] as { connectionId, presence } (connectionId)}
 				{#if presence?.cursor}
+					<Frame x={presence.cursor.x} y={presence.cursor.y} transform={$currZoomTransform} />
+
 					<Cursor
 						color={COLORS[connectionId % COLORS.length]}
 						x={presence.cursor.x}
 						y={presence.cursor.y}
+						transform={$currZoomTransform}
 					/>
-					<Frame x={presence.cursor.x} y={presence.cursor.y} transform={$currZoomTransform} />
 				{/if}
 			{/each}
 		{/if}
-		<Canvas />
 	</main>
 </div>
 <div class="fixed bottom-0 left-0 right-0 z-50 my-2">

frontend/src/lib/Canvas.svelte

@@ -21,7 +21,7 @@
 	onMount(() => {
 		const scale = width / containerEl.clientWidth;
 		const zoomHandler = zoom()
-			.scaleExtent([1 / scale / 2, 2])
+			.scaleExtent([1  / scale, 2])
 			.translateExtent([
 				[0, 0],
 				[width, height]
@@ -41,7 +41,7 @@
 		canvasCtx.rect(10, 10, 160, 90);
 		canvasCtx.fill();
 		canvasCtx.strokeStyle = 'blue';
-		canvasCtx.lineWidth = 5;
+		canvasCtx.lineWidth = 10;
 		canvasCtx.strokeRect(0, 0, width, height);
 	});
 
@@ -60,7 +60,7 @@
 
 <div
 	bind:this={containerEl}
-	class="fixed w-screen h-screen top-0 left-0 overflow-hidden border-4 border-black"
+	class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden border-4 border-black z-0"
 >
 	<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0" />
 </div>

frontend/src/lib/Cursor.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { spring } from 'svelte/motion';
+	import type { ZoomTransform } from 'd3-zoom';
+
+	export let transform: ZoomTransform;
 
 	export let color = '';
 	export let x = 0;
@@ -13,16 +16,15 @@
 			damping: 0.35
 		}
 	);
-
 	// Update spring when x and y change
 	$: coords.set({ x, y });
 </script>
 
 <svg
-	class="cursor"
+	class="block cursor z-0"
 	fill="none"
 	height="36"
-	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px)`}
+	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k})`}
 	viewBox="0 0 24 36"
 	width="24"
 	xmlns="http://www.w3.org/2000/svg"
@@ -36,5 +38,6 @@
 <style lang="postcss" scoped>
 	.cursor {
 		@apply absolute top-0 left-0;
+		/* transform-origin: 0 0; */
 	}
 </style>

frontend/src/lib/Frame.svelte

@@ -20,13 +20,13 @@
 </script>
 
 <div
-	class="frame"
+	class="frame z-0"
 	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k})`}
 />
 
 <style lang="postcss" scoped>
 	.frame {
-		@apply absolute top-0 left-0 border-2 border-sky-500 bg-gradient-to-b from-sky-200 w-[512px] h-[512px];
+		@apply pointer-events-none touch-none absolute top-0 left-0 border-2 border-sky-500 bg-gradient-to-b from-sky-200 w-[512px] h-[512px];
 		transform-origin: 0 0;
 	}
 </style>

frontend/src/lib/store.ts

@@ -1,7 +1,37 @@
-import { writable } from 'svelte/store';
+import { writable, get } from 'svelte/store';
+import { onDestroy } from 'svelte';
+import type { Room } from '@liveblocks/client';
+
 import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
 
 export const loadingState = writable<string>('');
 export const isLoading = writable<boolean>(false);
 
 export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
+
+export const myPresence = writable(null);
+export const others = 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();
+	};
+}

frontend/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { isLoading, loadingState } from '$lib/store';
+	import { isLoading, loadingState, createPresenceStore } from '$lib/store';
 	import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
 	import type { Client, Room } from '@liveblocks/client';
 	import { createClient } from '@liveblocks/client';
@@ -17,7 +17,7 @@
 
 	let client: Client;
 	let room: Room;
-	let roomId = 'sveltekit-live-cursors';
+	let roomId = 'multiplayer-SD';
 
 	onMount(() => {
 		client = createClient({
@@ -30,9 +30,11 @@
 			},
 			initialStorage: {}
 		});
+		const unsubscribePresence = createPresenceStore(room);
 		return () => {
 			if (client && room) {
 				client.leave(roomId);
+				unsubscribePresence();
 			}
 		};
 	});