Connect sensor to database

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

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7d5a3ff48c6f98a73abeb074cb28dc007fa876c4..06c2357590d3157bf668b58e39f777df0632703a 100644 (file)
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,12 +1,12 @@
 <script>
 <script>

-
-  import { browser } from '$app/env';
+  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 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';

 
 

-  const kCoordinateLength = 6;
-  const kMaxSize = Math.pow(16, kCoordinateLength);
+  import { coordinateLength, maxSize } from '$lib/config';

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


@@ -14,17 +14,13 @@
 
   let dragging = false;
 
 
   let dragging = false;
 

-  const modulo = function modulo (number, base) {
-    return ((number % base) + base) % base
-  };
-

   const moveCanvas = function moveCanvas(event) {
 
     if (dragging) {
       let deltaX = event.x - dragging.x;
       let deltaY = event.y - dragging.y;
   const moveCanvas = function moveCanvas(event) {
 
     if (dragging) {
       let deltaX = event.x - dragging.x;
       let deltaY = event.y - dragging.y;

-      x = modulo(x - deltaX, kMaxSize);
-      y = modulo(y - deltaY, kMaxSize);
+      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;
     }


@@ -61,14 +57,17 @@
   on:contextmenu={showPalette}
   on:mousedown={startDragging}
   on:mouseup={stopDragging}
   on:contextmenu={showPalette}
   on:mousedown={startDragging}
   on:mouseup={stopDragging}

-  on:mousemove={moveCanvas}>
+  on:mousemove={moveCanvas}

 >
 >

-  <Background x={x} y={y}/>
+  <Sensor x={x} y={y} />
+  <Background x={x} y={y} />

   <Hud x={x} y={y} />
 
   {#if shouldShowPalette }
     <Palette/>
   {/if}
   <Hud x={x} y={y} />
 
   {#if shouldShowPalette }
     <Palette/>
   {/if}

+
+  <p>{JSON.stringify($widgets)}</p>

 </div>
 
 <style>
 </div>
 
 <style>