cleaning up

frontend/src/app.d.ts

@@ -15,5 +15,7 @@ declare global {
 	}
 	interface Event {
 		transform: ZoomTransform;
+		x: number;
+		y: number;
 	}
 }

frontend/src/lib/App.svelte

@@ -60,9 +60,11 @@
 	let canvasEl: HTMLCanvasElement;
 
 	function onPaintMode(e: CustomEvent) {
-		const mode = e.detail.mode;
+		console.log('onPaintMode', e.detail);
+		// const mode = e.detail.mode;
 	}
 	async function onClose(e: CustomEvent) {
+		console.log('onClose', e.detail);
 		$isPrompting = false;
 	}
 	async function onPrompt(e: CustomEvent) {
@@ -132,7 +134,7 @@
 						$isLoading = false;
 						return;
 					case 'estimation':
-						const { msg, rank, queue_size } = data;
+						const { rank, queue_size } = data;
 						$loadingState = `On queue ${rank}/${queue_size}`;
 						break;
 					case 'process_generating':
@@ -176,8 +178,6 @@
 			}
 		};
 	}
-	let modal = false;
-	let currentPrompt = '';
 </script>
 
 <!-- Show the current user's cursor location -->
@@ -189,13 +189,13 @@
 	<PromptModal on:prompt={onPrompt} on:close={onClose} />
 {/if}
 <div class="fixed top-0 left-0 z-0 w-screen h-screen">
-	<Canvas bind:value={canvasEl}  />
+	<Canvas bind:value={canvasEl} />
 
 	<main class="z-10 relative">
 		<PaintFrame transform={$currZoomTransform} />
 
 		{#if promptImgList && $showFrames}
-			{#each promptImgList as promptImg, i}
+			{#each promptImgList as promptImg}
 				<Frame
 					color={COLORS[0]}
 					transform={$currZoomTransform}

frontend/src/lib/Canvas.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { zoom, type ZoomTransform, zoomIdentity } from 'd3-zoom';
+	import { zoom } from 'd3-zoom';
 	import { select } from 'd3-selection';
 	import { onMount } from 'svelte';
 	import { PUBLIC_UPLOADS } from '$env/static/public';
@@ -17,7 +17,6 @@
 
 	let canvasEl: HTMLCanvasElement;
 	export { canvasEl as value };
-	let value = canvasEl;
 
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;
@@ -69,19 +68,20 @@
 		canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
 	});
 
+	type ImageRendered = {
+		img: HTMLImageElement;
+		position: { x: number; y: number };
+		id: string;
+	};
 	function renderImages(promptImgList: PromptImgObject[]) {
 		Promise.all(
 			promptImgList.map(
 				({ imgURL, position, id }) =>
-					new Promise((resolve) => {
+					new Promise<ImageRendered>((resolve) => {
 						const img = new Image();
 						img.crossOrigin = 'anonymous';
 						img.onload = () => {
-							const res = { img, position, id } as {
-								img: HTMLImageElement;
-								position: { x: number; y: number };
-								id: string;
-							};
+							const res: ImageRendered = { img, position, id };
 							canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
 							resolve(res);
 						};
@@ -106,8 +106,8 @@
 	// Update cursor presence to current pointer location
 	function handlePointerMove(event: PointerEvent) {
 		event.preventDefault();
-		const x = round($currZoomTransform.invertX(event.layerX));
-		const y = round($currZoomTransform.invertY(event.layerY));
+		const x = round($currZoomTransform.invertX(event.clientX));
+		const y = round($currZoomTransform.invertY(event.clientY));
 
 		myPresence.update({
 			cursor: {
@@ -125,7 +125,10 @@
 	}
 </script>
 
-<div bind:this={containerEl} class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-gray-800">
+<div
+	bind:this={containerEl}
+	class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-gray-800"
+>
 	<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0 bg-white" />
 	<slot />
 </div>

frontend/src/lib/Cursor.svelte

@@ -3,7 +3,7 @@
 
 	export let transform: ZoomTransform;
 	export let color = '';
-	export let emoji;
+	export let emoji: string;
 	export let position = { x: 0, y: 0 };
 
 	$: coord = {

frontend/src/lib/PaintFrame.svelte

@@ -23,13 +23,11 @@
 	};
 
 	onMount(() => {
-		function dragstarted(event, d) {
-			// d3.select(this).raise().attr('stroke', 'black');
+		function dragstarted(event: Event) {
+			console.log(event);
 		}
 
-		function dragged(event: CustomEvent) {
-			console.log(event.sourceEvent.layerX);
-			const grid = 20;
+		function dragged(event: Event) {
 			const x = round(transform.invertX(event.x) - 512 / 2);
 			const y = round(transform.invertY(event.y) - 512 / 2);
 			position = {
@@ -38,13 +36,12 @@
 			};
 		}
 
-		function dragended(event, d) {
-			// d3.select(this).attr('stroke', null);
+		function dragended(event: Event) {
+			console.log(event);
 		}
 
-		select(frameElement).call(
-			drag().on('start', dragstarted).on('drag', dragged).on('end', dragended)
-		);
+		const dragHandler = drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
+		select(frameElement).call(dragHandler as any);
 	});
 </script>
 
@@ -60,7 +57,7 @@
 	<LoadingIcon />
 	<h2 class="text-lg">Click to paint</h2>
 
-	<div class="absolute bottom-0 font-bold">{prompt}}</div>
+	<div class="absolute bottom-0 font-bold">{prompt}</div>
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/PromptModal.svelte

@@ -48,9 +48,6 @@
 </form>
 
 <style lang="postcss" scoped>
-	.link {
-		@apply text-xs underline font-bold hover:no-underline hover:text-gray-500 visited:text-gray-500;
-	}
 	.input {
 		@apply w-full max-w-sm text-sm disabled:opacity-50 italic placeholder:text-white text-white placeholder:text-opacity-50 bg-slate-900 border-2 border-white rounded-2xl px-2 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1;
 	}

frontend/src/lib/liveblocks/RoomProvider.svelte

@@ -3,6 +3,7 @@
   https://liveblocks.io/docs/api-reference/liveblocks-react#RoomProvider
 -->
 <script lang="ts">
+  // @ts-nocheck
   import { clientSymbol, roomSymbol } from "./symbols";
   import type { Client, Room } from "@liveblocks/client";
   import { getContext, onDestroy, setContext } from "svelte";

frontend/src/lib/liveblocks/useBatch.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { useRoom } from "./useRoom";
 
 /**

frontend/src/lib/liveblocks/useHistory.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * Works similarly to `liveblocks-react` useHistory
  * https://liveblocks.io/docs/api-reference/liveblocks-react#useHistory

frontend/src/lib/liveblocks/useList.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { LiveList } from "@liveblocks/client";
 import { useStorage } from "./useStorage";
 import { onDestroy } from "svelte";

frontend/src/lib/liveblocks/useMyPresence.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { Presence } from "@liveblocks/client";
 import { onDestroy } from "svelte";
 import { writable } from "svelte/store";

frontend/src/lib/liveblocks/useObject.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { LiveObject } from "@liveblocks/client";
 import { useStorage } from "./useStorage";
 import { onDestroy } from "svelte";

frontend/src/lib/liveblocks/useOthers.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { Others } from "@liveblocks/client";
 import { onDestroy } from "svelte";
 import type { Writable } from "svelte/store";

frontend/src/lib/liveblocks/useRoom.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { getContext } from "svelte";
 import type { Room } from "@liveblocks/client";
 import { roomSymbol } from "./symbols";

frontend/src/lib/liveblocks/useStorage.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { LiveObject } from "@liveblocks/client";
 import type { Writable } from "svelte/store";
 import { writable } from "svelte/store";

frontend/src/lib/utils.ts

@@ -1,9 +1,5 @@
 import { dev } from '$app/environment';
 
-export function randomSeed() {
-	return BigInt(13248873089935215612 & (((1 << 63) - 1) * Math.random()));
-}
-
 export function base64ToBlob(base64image: string): Promise<Blob> {
 	return new Promise((resolve) => {
 		const img = new Image();
@@ -16,15 +12,15 @@ export function base64ToBlob(base64image: string): Promise<Blob> {
 			const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
 			ctx.drawImage(img, 0, 0, w, h);
 
-			const imgBlob: Blob = await new Promise((_resolve) =>
-				canvas.toBlob(_resolve, 'image/jpeg', 0.95)
+			const imgBlob: Blob = await new Promise((r) =>
+				canvas.toBlob(r as BlobCallback, 'image/jpeg', 0.95)
 			);
 			resolve(imgBlob);
 		};
 		img.src = base64image;
 	});
 }
-export async function uploadImage(imagBlob: Blob, prompt: string): string {
+export async function uploadImage(imagBlob: Blob, prompt: string): Promise<string> {
 	// simple regex slugify string	for file name
 	const promptSlug = slugify(prompt);
 	const UPLOAD_URL = dev ? 'moon/uploads' : 'https://huggingface.co/uploads';