X-Git-Url: https://git.r.bdr.sh/rbdr/canvas/blobdiff_plain/e4e4b5202bf0039127f591941fddc1ff5ca09897..HEAD:/src/routes/%20page.svelte/rbdr/canvas/blobdiff_plain/e4e4b5202bf0039127f591941fddc1ff5ca09897..HEAD:/src/routes/+page.svelte?ds=sidebyside

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1fd4752..8dd0a16 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,88 +1,87 @@
 <script>
-  import Sensor from '$lib/components/sensor.svelte';
-  import Background from '$lib/components/background.svelte';
-  import Palette from '$lib/components/palette.svelte';
-  import Hud from '$lib/components/hud.svelte';
-  import Minimap from '$lib/components/minimap.svelte';
-  import Widget from '$lib/components/widget.svelte';
-  import { modulo } from '$lib/math';
-  import { widgets } from '$lib/stores/widgets';
-  import { canvas } from '$lib/stores/canvas';
+	import Sensor from '$lib/components/sensor.svelte';
+	import Background from '$lib/components/background.svelte';
+	import Palette from '$lib/components/palette.svelte';
+	import Hud from '$lib/components/hud.svelte';
+	import Minimap from '$lib/components/minimap.svelte';
+	import Widget from '$lib/components/widget.svelte';
+	import { modulo } from '$lib/math';
+	import { widgets } from '$lib/stores/widgets';
+	import { canvas } from '$lib/stores/canvas';
 
-  import { coordinateLength, maxSize } from '$lib/config';
+	import { maxSize } from '$lib/config';
 
-  $: shouldShowPalette = false;
+	$: shouldShowPalette = false;
 
-  let dragging = false;
+	let dragging = false;
 
-  const moveCanvas = function moveCanvas(event) {
+	const moveCanvas = function moveCanvas(event) {
+		if (dragging) {
+			let deltaX = event.x - dragging.x;
+			let deltaY = event.y - dragging.y;
+			let x = modulo($canvas.x - deltaX, maxSize);
+			let y = modulo($canvas.y - deltaY, maxSize);
+			dragging.x = event.x;
+			dragging.y = event.y;
+			canvas.set({ x, y });
+		}
+	};
 
-    if (dragging) {
-      let deltaX = event.x - dragging.x;
-      let deltaY = event.y - dragging.y;
-      let x = modulo($canvas.x - deltaX, maxSize);
-      let y = modulo($canvas.y - deltaY, maxSize);
-      dragging.x = event.x;
-      dragging.y = event.y;
-      canvas.set({ x, y })
-    }
-  }
+	const startDragging = function startDragging(event) {
+		dragging = {
+			x: event.x,
+			y: event.y
+		};
+	};
 
-  const startDragging = function startDragging(event) {
-    dragging = {
-      x: event.x,
-      y: event.y
-    };
-  }
+	const stopDragging = function startDragging() {
+		dragging = null;
+	};
 
-  const stopDragging = function startDragging() {
-    dragging = null;
-  }
+	const showPalette = function showPalette(event) {
+		event.preventDefault();
+		dragging = null;
+		document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
+		document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
+		shouldShowPalette = true;
+	};
 
-  const showPalette = function showPalette(event) {
-    event.preventDefault();
-    dragging = null;
-    document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
-    document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
-    shouldShowPalette = true;
-  }
-
-  const hidePalette = function hidePalette() {
-    event.preventDefault();
-    shouldShowPalette = false;
-  }
+	const hidePalette = function hidePalette() {
+		event.preventDefault();
+		shouldShowPalette = false;
+	};
 </script>
 
 <div
-  class="canvas"
-  on:click={hidePalette}
-  on:contextmenu={showPalette}
-  on:mousedown={startDragging}
-  on:mouseup={stopDragging}
-  on:mousemove={moveCanvas}
+	class="canvas"
+	on:click={hidePalette}
+	on:contextmenu={showPalette}
+	on:mousedown={startDragging}
+	on:mouseup={stopDragging}
+	on:mousemove={moveCanvas}
 >
-  <Sensor />
-  <Background />
-  <Hud />
-  <Minimap />
+	<Sensor />
+	<Background />
+	<Hud />
+	<Minimap />
 
-  {#if shouldShowPalette }
-    <Palette/>
-  {/if}
+	{#if shouldShowPalette}
+		<Palette />
+	{/if}
 
-  {#if $widgets}
-    {#each $widgets as widget}
-      <Widget widget={widget}/>
-    {/each}
-  {/if}
+	{#if $widgets}
+		{#each $widgets as widget}
+			<Widget {widget} />
+		{/each}
+	{/if}
 </div>
 
 <style>
-  .canvas {
-    user-select: none;
-    padding: 0;
-    margin: 0;
-    width: 100vw;
-    height: 100vh;
-  }
+	.canvas {
+		user-select: none;
+		padding: 0;
+		margin: 0;
+		width: 100vw;
+		height: 100vh;
+	}
 </style>