about page

frontend/src/lib/App.svelte

@@ -14,6 +14,8 @@
 	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 } from '$lib/constants';
 
 	/**
 	 * The main Liveblocks code for the example.
@@ -27,8 +29,8 @@
 	const initialPresence: Presence = {
 		cursor: null,
 		frame: {
-			x: 1024,
-			y: 1024
+			x: CANVAS_SIZE.width / 2 - 512 / 2,
+			y: CANVAS_SIZE.height / 2 - 512 / 2
 		},
 		status: Status.dragging,
 		currentPrompt: ''
@@ -167,12 +169,27 @@
 			}
 		};
 	}
+	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-80 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">Stable Difussion Multiplayer</h2>
+		<p class="text-base">
+			Multiplayer API backed by Liveblocks
+			<LiveBlocks />
+		</p>
+	</div>
+</div>
 {#if showModal}
 	<PromptModal on:paint={onPaint} on:close={onClose} initPrompt={$myPresence?.currentPrompt} />
 {/if}
@@ -209,7 +226,7 @@
 	<ShareWithCommunity />
 </div>
 <div class="fixed bottom-0 left-0 right-0 z-10 my-2">
-	<Menu on:prompt={onPrompt} {isLoading} />
+	<Menu on:prompt={onPrompt} {isLoading} on:toggleAbout={() => (showAbout = !showAbout)} />
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/Buttons/AboutButton.svelte

@@ -0,0 +1,16 @@
+<button
+	on:click
+	class="button-paint"
+	title="Prompt and Paint"
+>
+	<span>About</span>
+</button>
+
+<style lang="postcss" scoped>
+	/* .button {
+		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
+	} */
+	.button-paint {
+		@apply text-xs md:text-sm font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 rounded-xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
+	}
+</style>

frontend/src/lib/Menu.svelte

@@ -2,9 +2,10 @@
 	import { onMount, createEventDispatcher } from 'svelte';
 	import PPButton from '$lib/Buttons/PPButton.svelte';
 	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
-	import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
+	import AboutButton from '$lib/Buttons/AboutButton.svelte';
+
 	const dispatch = createEventDispatcher();
-	
+
 	export let isLoading = false;
 
 	const onKeyup = (e: KeyboardEvent) => {
@@ -23,12 +24,5 @@
 <div class="grid grid-cols-1 gap-1 w-max mx-auto place-items-center">
 	<PPButton {isLoading} on:click={() => dispatch('prompt')} />
 	<RoomsSelector {isLoading} />
-	<a
-		href="https://liveblocks.io"
-		target="_blank"
-		rel="noopener noreferrer"
-		title="Multiplayer backend by LiveBlocks.io"
-	>
-		<LiveBlocks classList="max-h-8 md:max-h-fit" />
-	</a>
+	<AboutButton on:click={() => dispatch('toggleAbout')} />
 </div>

frontend/src/lib/PaintCanvas.svelte

@@ -7,12 +7,13 @@
 
 	import { useMyPresence, useObject } from '$lib/liveblocks';
 	import type { PromptImgObject } from '$lib/types';
+	import { CANVAS_SIZE } from '$lib/constants';
 
 	const myPresence = useMyPresence();
 	const promptImgStorage = useObject('promptImgStorage');
 
-	const height = 512 * 5;
-	const width = 512 * 5;
+	const height = CANVAS_SIZE.height;
+	const width = CANVAS_SIZE.width;
 
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;

frontend/src/lib/PaintFrame.svelte

@@ -4,6 +4,7 @@
 	import MaskButton from '$lib/Buttons/MaskButton.svelte';
 	import UndoButton from '$lib/Buttons/UndoButton.svelte';
 	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
+	import { CANVAS_SIZE } from '$lib/constants';
 
 	import { drag } from 'd3-drag';
 	import { select } from 'd3-selection';
@@ -25,8 +26,8 @@
 	let maskCtx: CanvasRenderingContext2D;
 
 	let position = {
-		x: 1024,
-		y: 1024
+		x: CANVAS_SIZE.width / 2 - 512 / 2,
+		y: CANVAS_SIZE.height / 2 - 512 / 2
 	};
 
 	let frameElement: HTMLDivElement;
@@ -213,7 +214,7 @@
 			{#if !isDragging}
 				<div
 					class="absolute top-full"
-					style={`transform: scale(${Math.max(2 - transform.k, 1)}); transform-origin: 0 0;`}
+					style={`transform: scale(${Math.max(2.5 - transform.k, 1)}); transform-origin: 0 0;`}
 				>
 					<div class="py-3">
 						<PPButton {isLoading} on:click={() => dispatch('prompt')} />
@@ -232,7 +233,7 @@
 				</div>
 				<div
 					class="absolute left-full"
-					style={`transform: scale(${Math.max(2 - transform.k, 1)}); transform-origin: 0 0;`}
+					style={`transform: scale(${Math.max(2.5 - transform.k, 1)}); transform-origin: 0 0;`}
 				>
 					<div class="mx-4">
 						<DragButton

frontend/src/lib/constants.ts

@@ -8,4 +8,9 @@ export const COLORS = Object.values(colors)
 export const EMOJIS = ['🐝', '🐌', '🐞', '🐜', '🦋', '🐛', '🐝', '🐞', '🦟', '🦗', '🕷', '🦂', '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑', '🐠', '🐟', '🐡', '🐬', '🦈', '🐳', '🐋', '🐊', '🐅', '🐆', '🦓', '🦍', '🦧', '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🐃', '🐂', '🐄', '🐎', '🐖',
 	'🐏', '🐑', '🐐', '🐕', '🐩', '🐈', '🐓', '🦃', '🦅', '🦆', '🦢', '🦉', '🦚', '🦜', '🦇', '🐁', '🐀', '🐿', '🐇', '🐿', '🦔', '🦇', '🐻', '🐻', '🐨', '🐼', '🐵', '🙈', '🙉', '🙊', '🐒', '🐉', '🐲', '🦕', '🦖', '🐊', '🐢', '🦎', '🐍', '🐦', '🐧', '🦅', '🦆', '🦉', '🦇']
 
-export const MAX_CAPACITY = 20;
+export const MAX_CAPACITY = 20;
+
+export const CANVAS_SIZE = {
+	width: 512 * 6,
+	height: 512 * 6,
+}

frontend/src/lib/utils.ts

@@ -1,4 +1,5 @@
 import { PUBLIC_API_BASE } from '$env/static/public';
+import { CANVAS_SIZE } from '$lib/constants';
 
 export function base64ToBlob(base64image: string): Promise<Blob> {
 	return new Promise((resolve) => {
@@ -43,7 +44,7 @@ export async function uploadImage(imagBlob: Blob, prompt: string, key: string):
 
 	return res;
 }
-const MAX = 512 * 5 - 512
+const MAX = CANVAS_SIZE.width - 512
 
 export function round(pos: number, size = 32) {
 	const value = pos % size < size / 2 ? pos - (pos % size) : pos + size - (pos % size);