liveblocks

frontend/package.json

@@ -36,6 +36,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource/fira-mono": "^4.5.0"
+		"@fontsource/fira-mono": "^4.5.0",
+		"@liveblocks/client": "^0.18.2"
 	}
 }

frontend/src/lib/Canvas.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import Cursor from '$lib/Cursor.svelte';
+	import type { Room } from '@liveblocks/client';
+	import { onDestroy } from 'svelte';
+	/**
+	 * The main Liveblocks code for the example.
+	 * Check in src/routes/index.svelte to see the setup code.
+	 */
+
+	export let room: Room;
+
+	// 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;
+	});
+
+	const unsubscribeOthers = room.subscribe('others', (otherUsers) => {
+		others = otherUsers;
+	});
+
+	// Unsubscribe when unmounting
+	onDestroy(() => {
+		unsubscribeMyPresence();
+		unsubscribeOthers();
+	});
+
+	// Update cursor presence to current pointer location
+	function handlePointerMove(event: PointerEvent) {
+		event.preventDefault();
+		room.updatePresence({
+			cursor: {
+				x: Math.round(event.clientX),
+				y: Math.round(event.clientY)
+			}
+		});
+	}
+
+	// When the pointer leaves the page, set cursor presence to null
+	function handlePointerLeave() {
+		room.updatePresence({
+			cursor: null
+		});
+	}
+
+	const COLORS = [
+		'#E57373',
+		'#9575CD',
+		'#4FC3F7',
+		'#81C784',
+		'#FFF176',
+		'#FF8A65',
+		'#F06292',
+		'#7986CB'
+	];
+</script>
+
+<main on:pointerleave={handlePointerLeave} on:pointermove={handlePointerMove}>
+	<!-- 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>
+
+	<!-- When others connected, iterate through others and show their cursors -->
+	{#if others}
+		{#each [...others] as { connectionId, presence } (connectionId)}
+			{#if presence?.cursor}
+				<Cursor
+					color={COLORS[connectionId % COLORS.length]}
+					x={presence.cursor.x}
+					y={presence.cursor.y}
+				/>
+			{/if}
+		{/each}
+	{/if}
+</main>
+
+<style lang="postcss" scoped>
+	main {
+		@apply fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center touch-none bg-white;
+		/* position: absolute;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		display: flex;
+		place-content: center;
+		place-items: center;
+		touch-action: none;
+        background-color: white; */
+	}
+
+	.text {
+		max-width: 380px;
+		margin: 0 16px;
+		text-align: center;
+	}
+</style>

frontend/src/lib/Cursor.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { spring } from 'svelte/motion';
+
+	export let color = '';
+	export let x = 0;
+	export let y = 0;
+
+	// Spring animation for cursor
+	const coords = spring(
+		{ x, y },
+		{
+			stiffness: 0.07,
+			damping: 0.35
+		}
+	);
+
+	// Update spring when x and y change
+	$: coords.set({ x, y });
+</script>
+
+<svg
+	class="cursor"
+	fill="none"
+	height="36"
+	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px)`}
+	viewBox="0 0 24 36"
+	width="24"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
+		fill={color}
+	/>
+</svg>
+
+<style lang="postcss" scoped>
+	.cursor {
+		@apply absolute top-0 left-0;
+	}
+</style>

frontend/src/lib/store.ts

@@ -1,3 +1,17 @@
 import { writable } from 'svelte/store';
+import type { User } from '$lib/types';
+import { browser } from '$app/environment';
+
 export const loadingState = writable<string>('');
 export const isLoading = writable<boolean>(false);
+
+const initialUser: User = crypto.randomUUID();
+
+export const currentUser = writable<User>(
+	browser ? JSON.parse(localStorage['user'] || JSON.stringify(initialUser)) : initialUser
+);
+currentUser.subscribe((value) => {
+	if (browser) {
+		return (localStorage['user'] = JSON.stringify(value));
+	}
+});

frontend/src/lib/types.ts

@@ -0,0 +1,13 @@
+export type Presence = {
+	cursor: {
+		x: number;
+		y: number;
+	} | null;
+};
+
+export type Storage = {
+	// animals: LiveList<string>,
+	// ...
+};
+
+export type User = string;

frontend/src/lib/utils.ts

@@ -39,4 +39,4 @@ function slugify(text: string) {
 		.replace(/\-\-+/g, '-')
 		.replace(/^-+/, '')
 		.replace(/-+$/, '');
-}
+}

frontend/src/routes/+page.svelte

@@ -1,11 +1,45 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { isLoading, loadingState } 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';
+	import { currentUser } from '$lib/store';
+
+	import Canvas from '$lib/Canvas.svelte';
+	import type { Presence, Storage } from '$lib/types';
 
 	const apiUrl =
 		PUBLIC_DEV_MODE === 'DEV'
 			? 'http://localhost:7860'
 			: '/embed/huggingface-projects/color-palette-generator-sd';
+
+	let client: Client;
+	let room: Room;
+	let roomId = 'sveltekit-live-cursors';
+
+	$: {
+		console.log('whoami', $currentUser);
+	}
+
+	onMount(() => {
+		client = createClient({
+			publicApiKey: 'pk_live_6o9jIg1m7lFJp5kc7HgYgE3S'
+		});
+
+		room = client.enter<Presence, Storage /* UserMeta, RoomEvent */>(roomId, {
+			initialPresence: {
+				cursor: null
+			},
+			initialStorage: {}
+		});
+		console.log('room', room);
+		return () => {
+			if (client && room) {
+				client.leave(roomId);
+			}
+		};
+	});
 </script>
 
 <div class="max-w-screen-md mx-auto px-3 py-8 relative z-0">
@@ -26,6 +60,11 @@
 			</button>
 		</form>
 	</div>
+	<div class="relative">
+		{#if room}
+			<Canvas {room} />
+		{/if}
+	</div>
 </div>
 
 <style lang="postcss" scoped>