Connect sensor to database

[rbdr/canvas] / src / routes / index.svelte

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index f2544cf60c1a345f5d2b87d8ecfdbee014e99bd3..06c2357590d3157bf668b58e39f777df0632703a 100644 (file)
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,30 +1,26 @@
 <script>
 <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 { modulo } from '$lib/math';
+  import { widgets } from '$lib/stores/widgets';

 
 

-  import { browser } from '$app/env';
+  import { coordinateLength, maxSize } from '$lib/config';

 
 

-  const dotSize = 24;

   $: x = 0;
   $: y = 0;
   $: x = 0;
   $: y = 0;

-
-  if (browser) {
-    document.documentElement.style.setProperty('--dot-size', dotSize + 'px');
-  }
-
-
-  $: {
-    if (browser) {
-      document.documentElement.style.setProperty('--dot-x', dotSize - x % dotSize + 'px');
-      document.documentElement.style.setProperty('--dot-y', dotSize - y % dotSize + 'px');
-    }
-  }
+  $: shouldShowPalette = false;

 
   let dragging = false;
 
   const moveCanvas = function moveCanvas(event) {
 
     if (dragging) {
 
   let dragging = false;
 
   const moveCanvas = function moveCanvas(event) {
 
     if (dragging) {

-      x -= event.x - dragging.x;
-      y -= event.y - dragging.y;
+      let deltaX = event.x - dragging.x;
+      let deltaY = event.y - dragging.y;
+      x = modulo(x - deltaX, maxSize);
+      y = modulo(y - deltaY, maxSize);

       dragging.x = event.x;
       dragging.y = event.y;
     }
       dragging.x = event.x;
       dragging.y = event.y;
     }


@@ -41,40 +37,45 @@
     dragging = null;
   }
 
     dragging = null;
   }
 

-  const formatCoordinate = function formatCoordinate(coordinate) {
-    const sign = Math.sign(coordinate) === 1 ? '' : '-';
-    const value = Math.abs(coordinate).toString(16).padStart(4, 0);
-    return sign + value;
+  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;
+  }

 </script>
 
 </script>
 

-<div class="canvas" on:mousedown={startDragging} on:mouseup={stopDragging} on:mousemove={moveCanvas}>
-</div>
-
-<div class="hud">
-  ({ formatCoordinate(x) }, { formatCoordinate(y) })
+<div
+  class="canvas"
+  on:click={hidePalette}
+  on:contextmenu={showPalette}
+  on:mousedown={startDragging}
+  on:mouseup={stopDragging}
+  on:mousemove={moveCanvas}
+>
+  <Sensor x={x} y={y} />
+  <Background x={x} y={y} />
+  <Hud x={x} y={y} />
+
+  {#if shouldShowPalette }
+    <Palette/>
+  {/if}
+
+  <p>{JSON.stringify($widgets)}</p>

 </div>
 
 <style>
   .canvas {
     user-select: none;
 </div>
 
 <style>
   .canvas {
     user-select: none;

-    background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
-    background-size: var(--dot-size) var(--dot-size);
-    background-position: var(--dot-x) var(--dot-y);

     padding: 0;
     margin: 0;
     width: 100vw;
     height: 100vh;
   }
     padding: 0;
     margin: 0;
     width: 100vw;
     height: 100vh;
   }

-
-  .hud {
-    background-color: #fff;
-    padding: 4px;
-    position: fixed;
-    bottom: 2px;
-    right: 2px;
-    font-smooth: never;
-    -webkit-font-smoothing : none;
-  }

 </style>
 </style>