Save WIP

[rbdr/canvas] / src / routes / +page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1fd4752135ed657eec51f967f07c4f0a2eda284d..8dd0a162f2c3c914ddc9097aa9b34b67a4e8d341 100644 (file)
--- 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>