move about and prerender

frontend/src/lib/About.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
+	export let classList = '';
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	on:click
+	class="fixed {classList} w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll"
+>
+	<div class="max-w-md">
+		<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
+		<p>
+			Hugging Face face GPU Spaces <a
+				href="https://huggingface.co/docs/hub/spaces-gpus"
+				class="text-blue-400 hover:text-blue-600 underline"
+				>https://huggingface.co/docs/hub/spaces-gpus</a
+			>
+			Diffusers
+			<a
+				href="https://huggingface.co/docs/diffusers/index"
+				class="text-blue-400 hover:text-blue-600 underline"
+				>https://huggingface.co/docs/diffusers/index</a
+			>
+		</p>
+		<p>
+			Thanks to <a
+				href="https://twitter.com/lkwq007"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-blue-400 hover:text-blue-600 underline"
+			>
+				Lnyan</a
+			>
+			for the original outpaiting technique implemented on
+			<a
+				href="https://github.com/lkwq007/stablediffusion-infinity"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-blue-400 hover:text-blue-600 underline"
+				>Stable Diffusion Infinity
+			</a>.
+		</p>
+		<p class="mb-6">
+			Runwayml Inpaiting Stable Diffusion
+			<a
+				href="https://github.com/runwayml/stable-diffusion"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				https://github.com/runwayml/stable-diffusion</a
+			>
+		</p>
+		<p class="text-base flex items-center">
+			Multiplayer API by
+			<LiveBlocks classList="ml-2" />
+		</p>
+	</div>
+</div>

frontend/src/lib/App.svelte

@@ -14,7 +14,6 @@
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
 	import { base64ToBlob, uploadImage } from '$lib/utils';
 	import { nanoid } from 'nanoid';
-	import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
 	import { CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
 
 	/**
@@ -169,68 +168,12 @@
 			}
 		};
 	}
-	let showAbout = false;
 </script>
 
 <!-- Show the current user's cursor location -->
 <div class="text touch-none pointer-events-none">
 	{$loadingState}
 </div>
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-	class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll
-	{showAbout ? 'flex' : 'hidden'}"
-	on:click={() => (showAbout = false)}
->
-	<div class="max-w-md">
-		<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
-		<p>
-			Hugging Face face GPU Spaces <a
-				href="https://huggingface.co/docs/hub/spaces-gpus"
-				class="text-blue-400 hover:text-blue-600 underline"
-				>https://huggingface.co/docs/hub/spaces-gpus</a
-			>
-			Diffusers
-			<a
-				href="https://huggingface.co/docs/diffusers/index"
-				class="text-blue-400 hover:text-blue-600 underline"
-				>https://huggingface.co/docs/diffusers/index</a
-			>
-		</p>
-		<p>
-			Thanks to <a
-				href="https://twitter.com/lkwq007"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="text-blue-400 hover:text-blue-600 underline"
-			>
-				Lnyan</a
-			>
-			for the original outpaiting technique implemented on
-			<a
-				href="https://github.com/lkwq007/stablediffusion-infinity"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="text-blue-400 hover:text-blue-600 underline"
-				>Stable Diffusion Infinity
-			</a>.
-		</p>
-		<p class="mb-6">
-			Runwayml Inpaiting Stable Diffusion
-			<a
-				href="https://github.com/runwayml/stable-diffusion"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				https://github.com/runwayml/stable-diffusion</a
-			>
-		</p>
-		<p class="text-base flex items-center">
-			Multiplayer API by
-			<LiveBlocks classList="ml-2" />
-		</p>
-	</div>
-</div>
 {#if showModal}
 	<PromptModal on:paint={onPaint} on:close={onClose} initPrompt={$myPresence?.currentPrompt} />
 {/if}
@@ -266,7 +209,7 @@
 	<ShareWithCommunity />
 </div> -->
 <div class="fixed bottom-32 left-0 right-0 z-10 my-2">
-	<Menu on:prompt={onPrompt} {isLoading} on:toggleAbout={() => (showAbout = !showAbout)} />
+	<Menu on:prompt={onPrompt} {isLoading} />
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/Menu.svelte

@@ -3,6 +3,7 @@
 	import PPButton from '$lib/Buttons/PPButton.svelte';
 	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
 	import AboutButton from '$lib/Buttons/AboutButton.svelte';
+	import { toggleAbout } from '$lib/store';
 
 	const dispatch = createEventDispatcher();
 
@@ -22,7 +23,7 @@
 </script>
 
 <div class="flex items-center justify-between px-12">
-	<AboutButton on:click={() => dispatch('toggleAbout')} />
+	<AboutButton on:click={() => ($toggleAbout = !$toggleAbout)} />
 
 	<button
 		on:click={() => dispatch('prompt')}

frontend/src/lib/PaintFrame.svelte

@@ -235,8 +235,10 @@
 				class="absolute bottom-0 origin-bottom-left"
 				style={`transform: scale(${Math.max(2.5 - transform.k, 1)});`}
 			>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					class="pl-3 pr-5 py-1 bg-blue-700/90 text-white text-lg xl:text-2xl rounded-tr-xl font-medium tracking-wide"
+					class="pl-3 pr-5 py-1 bg-blue-700/90 text-white text-lg xl:text-2xl rounded-tr-xl font-medium tracking-wide cursor-pointer"
+					on:click={() => toggleDrag()}
 				>
 					{#if $loadingState !== ''}
 						<div class="">
@@ -249,7 +251,7 @@
 							<p>{$loadingState}...</p>
 						</div>
 					{:else}
-						🤚 Drag me
+						<span class="select-none"> {dragEnabled ? '🤚 Drag me' : '🤚 Enable Drag'}</span>
 					{/if}
 				</div>
 			</div>
@@ -301,7 +303,7 @@
 	<div
 		bind:this={frameElement}
 		class="absolute top-0 left-0 ring-8 hand
-		{dragEnabled ? 'block' : 'hidden'}"
+		{dragEnabled ? 'block cursor-move' : 'hidden cursor-pointer'}"
 		style={`width: ${FRAME_SIZE}px;height: ${FRAME_SIZE}px;transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
 	/>
 </div>

frontend/src/lib/store.ts

@@ -5,4 +5,5 @@ export const loadingState = writable<string>('');
 export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
 export const canvasEl = writable<HTMLCanvasElement>();
 export const maskEl = writable<HTMLCanvasElement>();
-export const selectedRoomID = writable<string | null>();
+export const selectedRoomID = writable<string | null>();
+export const toggleAbout = writable<boolean>(false);

frontend/src/routes/+/+layout.svelte

@@ -1,5 +0,0 @@
-<script>
-	import '../../app.css';
-</script>
-
-<slot />

frontend/src/routes/+/+page.svelte

@@ -1,13 +1,3 @@
-<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 { createClient } from '@liveblocks/client';
@@ -15,12 +5,13 @@
 	import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
 	import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
 	import App from '$lib/App.svelte';
-	import type { PageData } from './$types';
+	import About from '$lib/About.svelte';
 	import { PUBLIC_API_BASE } from '$env/static/public';
-	import { selectedRoomID } from '$lib/store';
-	export let data: PageData;
+	import { selectedRoomID, toggleAbout } from '$lib/store';
+	import type { RoomResponse } from '$lib/types';
+	import { MAX_CAPACITY } from '$lib/constants';
 
-	let loaded = false;
+	let loading = true;
 	let client: Client;
 
 	$: roomId = $selectedRoomID;
@@ -31,11 +22,31 @@
 			authEndpoint: PUBLIC_API_BASE + '/auth'
 		});
 
-		loaded = true;
+		updateRooms();
 	});
+	async function updateRooms() {
+		loading = true;
+		const roomidParam = new URLSearchParams(window.location.search).get('roomid');
+		const res = await fetch(PUBLIC_API_BASE + '/rooms');
+		const rooms: RoomResponse[] = await res.json();
+
+		if (roomidParam) {
+			const room = rooms.find((room) => room.room_id === roomidParam);
+			if (room) {
+				selectedRoomID.set(roomidParam);
+			}
+		} else {
+			const room = rooms.find((room) => room.users_count < MAX_CAPACITY) || null;
+			selectedRoomID.set(room ? room.room_id : null);
+		}
+		loading = false;
+		return { rooms };
+	}
 </script>
 
-{#if loaded}
+<About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
+
+{#if !loading}
 	<LiveblocksProvider {client}>
 		{#if roomId}
 			<RoomProvider id={roomId}>
@@ -48,4 +59,8 @@
 			</div>
 		{/if}
 	</LiveblocksProvider>
+{:else}
+	<div class="flex flex-col items-center justify-center h-full">
+		<h1 class="text-2xl font-bold">Loading...</h1>
+	</div>
 {/if}

frontend/src/routes/+/+page.ts

@@ -1,24 +1 @@
-import { PUBLIC_API_BASE } from '$env/static/public';
-import type { RoomResponse } from '$lib/types';
-import { selectedRoomID } from '$lib/store';
-import { MAX_CAPACITY } from '$lib/constants';
-import type { PageLoad } from './$types';
-export const prerender = true
-export const ssr = false
-
-export const load: PageLoad = async ({ url }) => {
-    const roomidParam = url.searchParams.get('roomid');
-    const res = await fetch(PUBLIC_API_BASE + '/rooms');
-    const rooms: RoomResponse[] = await res.json();
-
-    if (roomidParam) {
-        const room = rooms.find(room => room.room_id === roomidParam);
-        if (room) {
-            selectedRoomID.set(roomidParam);
-        }
-    } else {
-        const room = rooms.find(room => room.users_count < MAX_CAPACITY) || null;
-        selectedRoomID.set(room ? room.room_id : null);
-    }
-    return { rooms };
-}
+export const prerender = true;

frontend/src/routes/+page.svelte

@@ -1,13 +1,3 @@
-<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 { createClient } from '@liveblocks/client';
@@ -15,12 +5,13 @@
 	import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
 	import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
 	import App from '$lib/App.svelte';
-	import type { PageData } from './$types';
+	import About from '$lib/About.svelte';
 	import { PUBLIC_API_BASE } from '$env/static/public';
-	import { selectedRoomID } from '$lib/store';
-	export let data: PageData;
+	import { selectedRoomID, toggleAbout } from '$lib/store';
+	import type { RoomResponse } from '$lib/types';
+	import { MAX_CAPACITY } from '$lib/constants';
 
-	let loaded = false;
+	let loading = true;
 	let client: Client;
 
 	$: roomId = $selectedRoomID;
@@ -31,11 +22,31 @@
 			authEndpoint: PUBLIC_API_BASE + '/auth'
 		});
 
-		loaded = true;
+		updateRooms();
 	});
+	async function updateRooms() {
+		loading = true;
+		const roomidParam = new URLSearchParams(window.location.search).get('roomid');
+		const res = await fetch(PUBLIC_API_BASE + '/rooms');
+		const rooms: RoomResponse[] = await res.json();
+
+		if (roomidParam) {
+			const room = rooms.find((room) => room.room_id === roomidParam);
+			if (room) {
+				selectedRoomID.set(roomidParam);
+			}
+		} else {
+			const room = rooms.find((room) => room.users_count < MAX_CAPACITY) || null;
+			selectedRoomID.set(room ? room.room_id : null);
+		}
+		loading = false;
+		return { rooms };
+	}
 </script>
 
-{#if loaded}
+<About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
+
+{#if !loading}
 	<LiveblocksProvider {client}>
 		{#if roomId}
 			<RoomProvider id={roomId}>
@@ -48,4 +59,8 @@
 			</div>
 		{/if}
 	</LiveblocksProvider>
+{:else}
+	<div class="flex flex-col items-center justify-center h-full">
+		<h1 class="text-2xl font-bold">Loading...</h1>
+	</div>
 {/if}

frontend/src/routes/+page.ts

@@ -1,24 +1 @@
-import { PUBLIC_API_BASE } from '$env/static/public';
-import type { RoomResponse } from '$lib/types';
-import { selectedRoomID } from '$lib/store';
-import { MAX_CAPACITY } from '$lib/constants';
-import type { PageLoad } from './$types';
-export const prerender = true
-export const ssr = false
-
-export const load: PageLoad = async ({ url }) => {
-    const roomidParam = url.searchParams.get('roomid');
-    const res = await fetch(PUBLIC_API_BASE + '/rooms');
-    const rooms: RoomResponse[] = await res.json();
-
-    if (roomidParam) {
-        const room = rooms.find(room => room.room_id === roomidParam);
-        if (room) {
-            selectedRoomID.set(roomidParam);
-        }
-    } else {
-        const room = rooms.find(room => room.users_count < MAX_CAPACITY) || null;
-        selectedRoomID.set(room ? room.room_id : null);
-    }
-    return { rooms };
-}
+export const prerender = true;