minor design improvements

frontend/src/lib/About.svelte

@@ -58,7 +58,7 @@
 				<p class="text-base flex items-center">
 					Multiplayer API by
 					<a href="https://liveblocks.io" target="_blank" rel="noopener noreferrer">
-						<LiveBlocks class="ml-2" />
+						<LiveBlocks classList={'ml-2'} />
 					</a>
 				</p>
 			</li>

frontend/src/lib/App.svelte

@@ -137,6 +137,9 @@
 							myPresence.update({
 								status: Status.ready
 							});
+							setTimeout(() => {
+								$loadingState = '';
+							}, 2000);
 						}
 						websocket.close();
 						return;

frontend/src/lib/Frame.svelte

@@ -20,7 +20,7 @@
 			transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
 >
 	<div class="pointer-events-none touch-none">
-		<div class="font-bold !text-4xl text-white rounded-2xl text-center p-10 line-clamp-4 flex">
+		<div class="font-bold !text-4xl text-white rounded-2xl text-center p-10">
 			{#if isLoading}
 				<LoadingIcon classList={'animate-spin text-4xl inline mr-2 mx-auto text-white mb-4'} />
 				<p class="text-4xl">Someone is painting:</p>
@@ -28,7 +28,7 @@
 				<p class="text-4xl">Someone is typing:</p>
 			{/if}
 
-			<span class="italic font-normal">"{prompt}"</span>
+			<span class="italic font-normal line-clamp-4">"{prompt}"</span>
 		</div>
 	</div>
 </div>

frontend/src/lib/Menu.svelte

@@ -23,7 +23,10 @@
 
 	<button
 		on:click={() => dispatch('prompt')}
-		class="order-first md:order-none text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center flex items-center hover:saturate-150"
+		disabled={isLoading}
+		class="{isLoading
+			? 'cursor-wait'
+			: 'cursor-pointer'} order-first md:order-none text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center flex items-center hover:saturate-150"
 		><span class="mr-3">🖍</span>Paint
 		<span
 			class="bg-blue-800 text-gray-300 rounded-lg px-2 py-0.5 text-base ml-4 hidden sm:flex items-center translate-y-[2px]"

frontend/src/lib/PaintCanvas.svelte

@@ -74,7 +74,7 @@
 		return zoomIdentity.translate(x, y).scale(k);
 	}
 	onMount(() => {
-		const padding = 100;
+		const padding = 50;
 		const scale =
 			(width + padding * 2) /
 			(containerEl.clientHeight > containerEl.clientWidth

frontend/src/lib/PaintFrame.svelte

@@ -43,6 +43,11 @@
 		y: transform.applyY(position.y)
 	};
 
+	$: if ($loadingState === 'Complete' && !dragEnabled) {
+		cleanMask();
+		toggleDrag();
+	}
+
 	let offsetX = 0;
 	let offsetY = 0;
 
@@ -192,6 +197,7 @@
 	function toggleDrawMask() {
 		dragEnabled = false;
 		cropCanvas(position);
+
 		myPresence.update({
 			status: Status.masking
 		});
@@ -219,17 +225,15 @@
 				/>
 			{/if}
 			<canvas
-				class={dragEnabled ? '' : 'bg-white'}
+				class="{dragEnabled ? 'hidden' : 'bg-white block'} absolute top-0 left-0 z-0"
 				bind:this={$maskEl}
 				width={FRAME_SIZE}
 				height={FRAME_SIZE}
 			/>
-			<div class="pointer-events-none touch-none">
+			<div class="pointer-events-none touch-none col-span-3 z-10">
 				{#if prompt}
-					<div class="pointer-events-none touch-none">
-						<div class="font-bold text-4xl text-[#387CFF] text-center px-2 line-clamp-4">
-							{prompt}
-						</div>
+					<div class="font-bold text-4xl text-[#387CFF] text-center px-2 line-clamp-4">
+						{prompt}
 					</div>
 				{/if}
 			</div>

frontend/src/lib/constants.ts

@@ -17,8 +17,8 @@ export const EMOJIS = ['🐝', '🐌', '🐞', '🐜', '🦋', '🐛', '🐝', '
 export const MAX_CAPACITY = 20;
 
 export const CANVAS_SIZE = {
-	width: 512 * 6,
-	height: 512 * 6,
+	width: 512 * 8,
+	height: 512 * 8,
 }
 export const GRID_SIZE = 32