fancy cursors

frontend/src/lib/App.svelte

@@ -5,6 +5,7 @@
 	import Menu from '$lib/Menu.svelte';
 	import type { Room } from '@liveblocks/client';
 	import { onDestroy } from 'svelte';
+	import { COLORS, EMOJIS } from '$lib/constants';
 	import { currZoomTransform, myPresence, others } from '$lib/store';
 
 	/**
@@ -12,7 +13,7 @@
 	 * 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();
@@ -32,15 +33,19 @@
 	// 	unsubscribeMyPresence();
 	// 	unsubscribeOthers();
 	// });
+
+	// $: {
+	// 	console.log('myPresence', $myPresence);
+	// 	console.log('others', $others);
+	// }
 	$: {
-		console.log('myPresence', $myPresence.cursor);
-		// console.log('others', $others);
+		console.log('Sefl', room.getSelf());
 	}
-	const r = 10;
+	const r = 8;
 	function round(p, n) {
 		return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
 	}
-	const grid = 10;
+	const grid = 8;
 
 	// Update cursor presence to current pointer location
 	function handlePointerMove(event: PointerEvent) {
@@ -64,17 +69,6 @@
 			cursor: null
 		};
 	}
-
-	const COLORS = [
-		'#E57373',
-		'#9575CD',
-		'#4FC3F7',
-		'#81C784',
-		'#FFF176',
-		'#FF8A65',
-		'#F06292',
-		'#7986CB'
-	];
 </script>
 
 <!-- Show the current user's cursor location -->
@@ -84,28 +78,45 @@
 		: 'Move your cursor to broadcast its position to other people in the room.'}
 </div>
 <div
-	class="relative z-0 w-screen h-screen"
+	class="relative z-0 w-screen h-screen cursor-none"
 	on:pointerleave={handlePointerLeave}
 	on:pointermove={handlePointerMove}
 >
 	<Canvas />
 
 	<main class="z-10 relative">
+
 		{#if $myPresence?.cursor}
-			<Frame x={$myPresence.cursor.x} y={$myPresence.cursor.y} transform={$currZoomTransform} />
+			<!-- <Frame
+				color={COLORS[0]}
+				x={$myPresence.cursor.x}
+				y={$myPresence.cursor.y}
+				transform={$currZoomTransform}
+			/> -->
+			<Cursor
+				emoji={EMOJIS[0]}
+				color={COLORS[0]}
+				x={$myPresence.cursor.x}
+				y={$myPresence.cursor.y}
+			/>
 		{/if}
 
 		<!-- When others connected, iterate through others and show their cursors -->
 		{#if others}
 			{#each [...$others] as { connectionId, presence } (connectionId)}
 				{#if presence?.cursor}
-					<Frame x={presence.cursor.x} y={presence.cursor.y} transform={$currZoomTransform} />
+					<!-- <Frame
+						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
+						x={presence.cursor.x}
+						y={presence.cursor.y}
+						transform={$currZoomTransform}
+					/> -->
 
 					<Cursor
-						color={COLORS[connectionId % COLORS.length]}
+						emoji={EMOJIS[1 + (connectionId % (EMOJIS.length - 1))]}
+						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
 						x={presence.cursor.x}
 						y={presence.cursor.y}
-						transform={$currZoomTransform}
 					/>
 				{/if}
 			{/each}

frontend/src/lib/Canvas.svelte

@@ -10,9 +10,6 @@
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;
 
-	$:{
-		console.log($currZoomTransform)
-	}
 	const margin = { top: 100, right: 100, bottom: 100, left: 100 };
 	const extent = [
 		[-margin.left, -margin.top],
@@ -21,7 +18,7 @@
 	onMount(() => {
 		const scale = width / containerEl.clientWidth;
 		const zoomHandler = zoom()
-			.scaleExtent([1  / scale, 2])
+			.scaleExtent([1 / scale, 2])
 			.translateExtent([
 				[0, 0],
 				[width, height]
@@ -32,7 +29,7 @@
 
 		select(canvasEl.parentElement)
 			.call(zoomHandler as any)
-			.call(zoomHandler.scaleTo as any, 1 / scale)
+			// .call(zoomHandler.scaleTo as any, 1 / scale)
 			.on('pointermove', handlePointerMove)
 			.on('pointerleave', handlePointerLeave);
 
@@ -47,7 +44,6 @@
 
 	function zoomed(e: Event) {
 		const transform = ($currZoomTransform = e.transform);
-		console.log(canvasEl.style.transform, transform);
 		canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
 	}
 	function handlePointerMove(e: PointerEvent) {

frontend/src/lib/Cursor.svelte

@@ -1,10 +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 emoji = '';
 	export let x = 0;
 	export let y = 0;
 
@@ -20,24 +18,29 @@
 	$: coords.set({ x, y });
 </script>
 
-<svg
-	class="block cursor z-0"
-	fill="none"
-	height="36"
-	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"
+<div
+	class="absolute top-0 left-0 grid grid-cols-3"
+	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px);`}
 >
-	<path
-		d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
-		fill={color}
-	/>
-</svg>
+	<svg
+		class="block z-0 col-span-2 row-span-2"
+		width="40"
+		viewBox="0 0 15 15"
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M0.91603 0.916054L7.09131 14.9234L8.89871 8.89873L14.9234 7.09133L0.91603 0.916054Z"
+			fill="#FFB800"
+		/>
+	</svg>
+	<div
+		class="absolute right-0 text-4xl col-start-2 row-start-2"
+		style={`text-shadow: 0px 5px 5px ${color}`}
+	>
+		{emoji}
+	</div>
+</div>
 
 <style lang="postcss" scoped>
-	.cursor {
-		@apply absolute top-0 left-0;
-		/* transform-origin: 0 0; */
-	}
 </style>

frontend/src/lib/Frame.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { spring } from 'svelte/motion';
+	import LoadingIcon from '$lib/LoadingIcon.svelte';
+
 	import type { ZoomTransform } from 'd3-zoom';
 
 	export let transform: ZoomTransform;
@@ -20,13 +22,21 @@
 </script>
 
 <div
-	class="frame z-0"
-	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k})`}
-/>
+	class="frame z-0 flex relative"
+	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k});
+			background-image: linear-gradient(${color}, rgba(255,255,255,0));
+			color: ${color};
+	`}
+>
+	<LoadingIcon />
+	<h2 class="text-lg">Click to paint</h2>
+
+	<div class="absolute bottom-0 font-bold">A cat on grass</div>
+</div>
 
 <style lang="postcss" scoped>
 	.frame {
-		@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];
+		@apply pointer-events-none touch-none absolute top-0 left-0 border-2 border-sky-500 w-[512px] h-[512px];
 		transform-origin: 0 0;
 	}
 </style>

frontend/src/lib/LoadingIcon.svelte

@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	width="50"
+	viewBox="0 0 24 24"
+	class="animate-spin max-w-[1rem] inline-block"
+>
+	<path
+		fill="currentColor"
+		d="M20 12a8 8 0 0 1-8 8v4a12 12 0 0 0 12-12h-4Zm-2-5.3a8 8 0 0 1 2 5.3h4c0-3-1.1-5.8-3-8l-3 2.7Z"
+	/>
+</svg>

frontend/src/lib/constants.ts

@@ -0,0 +1,28 @@
+import colors from 'tailwindcss/colors';
+
+export const COLORS = Object.values(colors)
+	.filter((e) => typeof e === 'object')
+	.map((e) => e['200'])
+	.slice(0, 18);
+
+// all animal emojis list
+export const EMOJIS = [
+	'🐶',
+	'🐱',
+	'🐭',
+	'🐹',
+	'🐰',
+	'🦊',
+	'🐻',
+	'🐼',
+	'🐨',
+	'🐯',
+	'🦁',
+	'🐮',
+	'🐲',
+	'🌚',
+	'🌝',
+	'🌞',
+	'🌛',
+	'🌜'
+];

frontend/src/lib/store.ts

@@ -1,5 +1,4 @@
 import { writable, get } from 'svelte/store';
-import { onDestroy } from 'svelte';
 import type { Room } from '@liveblocks/client';
 
 import { type ZoomTransform, zoomIdentity } from 'd3-zoom';

frontend/src/routes/+page.svelte

@@ -30,11 +30,16 @@
 			},
 			initialStorage: {}
 		});
+		const unsubscribe = room.subscribe('history', (e) => {
+			// Do something
+			console.log('history', e);
+		});
 		const unsubscribePresence = createPresenceStore(room);
 		return () => {
 			if (client && room) {
 				client.leave(roomId);
 				unsubscribePresence();
+				unsubscribe();
 			}
 		};
 	});