Create the sensor, move values to config

5 files changed, 54 insertions, 13 deletions

diff --git a/src/lib/components/hud.svelte b/src/lib/components/hud.svelte
index ce32e0d..f79658a 100644
--- a/src/lib/components/hud.svelte
+++ b/src/lib/components/hud.svelte
@@ -1,14 +1,15 @@
 <script>
+  import { coordinateLength } from '$lib/config';
+
   export let x;
   export let y;
 
-  const kCoordinateLength = 6;
   const kSeparatorRegex = /([0-9a-z]{2})/g;
 
   const formatCoordinate = function formatCoordinate(coordinate) {
     return coordinate
       .toString(16)
-      .padStart(kCoordinateLength, 0)
+      .padStart(coordinateLength, 0)
       .replace(kSeparatorRegex, '$1 ');
   }
 </script>
diff --git a/src/lib/components/sensor.svelte b/src/lib/components/sensor.svelte
index e69de29..da968a3 100644
--- a/src/lib/components/sensor.svelte
+++ b/src/lib/components/sensor.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { browser } from '$app/env';
+  import { maxSize } from '$lib/config';
+
+  export let x;
+  export let y;
+
+  const kSensorSize = 2;
+
+  let left;
+  let right;
+  let top;
+  let bottom;
+
+  let timer;
+  const fetchItems = function fetchItems( left, top, right, bottom ) {
+    clearTimeout(timer);
+		timer = setTimeout(() => {
+      console.log('fetching', left, top, right, bottom);
+		}, 50);
+  }
+
+  $: {
+    if (browser) {
+      left = x - window.screen.width * kSensorSize;
+      top = y - window.screen.height * kSensorSize;
+      right = x + window.screen.width * kSensorSize;
+      bottom = y + window.screen.height * kSensorSize;
+
+      fetchItems(left, top, right, bottom);
+    }
+  }
+
+</script>
diff --git a/src/lib/config.js b/src/lib/config.js
new file mode 100644
index 0000000..3d243ed
--- /dev/null
+++ b/src/lib/config.js
@@ -0,0 +1,2 @@
+export const coordinateLength = 6;
+export const maxSize = Math.pow(16, coordinateLength);
diff --git a/src/lib/math.js b/src/lib/math.js
new file mode 100644
index 0000000..c745cdc
--- /dev/null
+++ b/src/lib/math.js
@@ -0,0 +1,8 @@
+/**
+ * Modulo that acts well with negative numbers.
+ * @param {number} dividend the number to divide
+ * @param {number} divisor the divisor to calculate the remainder
+ */
+export const modulo = function modulo (dividend, divisor) {
+  return ((dividend % divisor) + divisor) % divisor
+};
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7d5a3ff..2943d23 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,12 +1,11 @@
 <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 { modulo } from '$lib/math';
 
-  const kCoordinateLength = 6;
-  const kMaxSize = Math.pow(16, kCoordinateLength);
+  import { coordinateLength, maxSize } from '$lib/config';
 
   $: x = 0;
   $: y = 0;
@@ -14,17 +13,13 @@
 
   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;
-      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;
     }
@@ -63,7 +58,8 @@
   on:mouseup={stopDragging}
   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 }