style: fmt

LeoDog896 · Jul 14, 2023 · 71a6878 · 71a6878
1 parent bec7782
commit 71a6878
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 74 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,11 +1,12 @@
-html, body {
-    width: 100vw;
-    height: 100vh;
-    padding: 0;
-    margin: 0;
+html,
+body {
+	width: 100vw;
+	height: 100vh;
+	padding: 0;
+	margin: 0;
 }
 
 canvas {
-    width: 100%;
-    height: 100%;
-}
+	width: 100%;
+	height: 100%;
+}
diff --git a/src/app.html b/src/app.html
@@ -5,7 +5,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
 		<title>Grid</title>
-		<meta name="description" content="infinite clickable & draggable grid">
+		<meta name="description" content="infinite clickable & draggable grid" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import '../app.css'
+	import '../app.css';
 </script>
 
-<slot />
+<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,83 +1,80 @@
 <script lang="ts">
-    import { Canvas, Layer, type Render } from 'svelte-canvas';
+	import { Canvas, Layer, type Render } from 'svelte-canvas';
 
-    let x = 0;
-    let y = 0;
+	let x = 0;
+	let y = 0;
 
-    let mouseDown = false;
-    let dragging = false;
+	let mouseDown = false;
+	let dragging = false;
 
-    let boxSize = 50;
+	let boxSize = 50;
 
-    let width: number;
-    let height: number;
+	let width: number;
+	let height: number;
 
-    type Vector = [x: number, y: number];
+	type Vector = [x: number, y: number];
 
-    const map: Record<string, boolean> = {};
+	const map: Record<string, boolean> = {};
 
-    function screenToMap(xCursor: number, yCursor: number): Vector {
-        return [
-            Math.floor((xCursor - x) / boxSize),
-            Math.floor((yCursor - y) / boxSize)
-        ]
-    }
+	function screenToMap(xCursor: number, yCursor: number): Vector {
+		return [Math.floor((xCursor - x) / boxSize), Math.floor((yCursor - y) / boxSize)];
+	}
 
-    let render: Render;
-    $: render = ({ context, width, height }) => {
-        for (let i = -5; i < width / boxSize + 5; i++) {
-            for (let j = -5; j < height / boxSize + 5; j++) {
-                let xCoord = i - (x > 0 ? Math.floor(x / boxSize) : Math.ceil(x / boxSize));
-                let yCoord = j - (y > 0 ? Math.floor(y / boxSize) : Math.ceil(y / boxSize));
-                const xPos = i * boxSize + (x % boxSize);
-                const yPos = j * boxSize + (y % boxSize);
+	let render: Render;
+	$: render = ({ context, width, height }) => {
+		for (let i = -5; i < width / boxSize + 5; i++) {
+			for (let j = -5; j < height / boxSize + 5; j++) {
+				let xCoord = i - (x > 0 ? Math.floor(x / boxSize) : Math.ceil(x / boxSize));
+				let yCoord = j - (y > 0 ? Math.floor(y / boxSize) : Math.ceil(y / boxSize));
+				const xPos = i * boxSize + (x % boxSize);
+				const yPos = j * boxSize + (y % boxSize);
 
-                if (map[JSON.stringify([xCoord, yCoord])]) {
-                    context.fillStyle = 'black';
-                    context.fillRect(xPos, yPos, boxSize, boxSize);
-                } else {
-                    context.fillStyle = 'white';
-                    context.strokeRect(xPos, yPos, boxSize, boxSize);
-                }
+				if (map[JSON.stringify([xCoord, yCoord])]) {
+					context.fillStyle = 'black';
+					context.fillRect(xPos, yPos, boxSize, boxSize);
+				} else {
+					context.fillStyle = 'white';
+					context.strokeRect(xPos, yPos, boxSize, boxSize);
+				}
 
-                // draw the coords
-                context.fillStyle = map[JSON.stringify([xCoord, yCoord])] ? 'white' : 'black';
-                context.fillText(`${xCoord}, ${yCoord}`, xPos + 5, yPos + 15);
-            }
-        }
-    };
+				// draw the coords
+				context.fillStyle = map[JSON.stringify([xCoord, yCoord])] ? 'white' : 'black';
+				context.fillText(`${xCoord}, ${yCoord}`, xPos + 5, yPos + 15);
+			}
+		}
+	};
 </script>
 
 <svelte:window
-    bind:innerWidth={width}
-    bind:innerHeight={height}
-    on:mousedown={() => {
-        mouseDown = true;
-    }}
-    on:mousemove={({ movementX, movementY }) => {
-        if (mouseDown) {
-            dragging = true;
-            x += movementX;
-            y += movementY;
-        }
-    }}
-    on:mouseup={({ offsetX, offsetY }) => {
-        mouseDown = false;
-        if (!dragging) {
-            const [xCoord, yCoord] = screenToMap(offsetX, offsetY);
-            map[JSON.stringify([xCoord, yCoord])] = !map[JSON.stringify([xCoord, yCoord])];
-        }
-        dragging = false;
-    }}
+	bind:innerWidth={width}
+	bind:innerHeight={height}
+	on:mousedown={() => {
+		mouseDown = true;
+	}}
+	on:mousemove={({ movementX, movementY }) => {
+		if (mouseDown) {
+			dragging = true;
+			x += movementX;
+			y += movementY;
+		}
+	}}
+	on:mouseup={({ offsetX, offsetY }) => {
+		mouseDown = false;
+		if (!dragging) {
+			const [xCoord, yCoord] = screenToMap(offsetX, offsetY);
+			map[JSON.stringify([xCoord, yCoord])] = !map[JSON.stringify([xCoord, yCoord])];
+		}
+		dragging = false;
+	}}
 />
 
 <Canvas {width} {height}>
-    <Layer {render} />
+	<Layer {render} />
 </Canvas>
 
 <style>
-    :global(canvas) {
-        width: 100%;
-        height: 100%;
-    }
-</style>
+	:global(canvas) {
+		width: 100%;
+		height: 100%;
+	}
+</style>