Update project, improve sensor/render logic

7 files changed, 100 insertions, 29 deletions

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 03c5377..1aa82fa 100644
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { browser } from '$app/env';
+  import { browser } from '$app/environment';
   import { canvas } from '$lib/stores/canvas';
 
   const kDotSize = 32;
diff --git a/src/lib/components/minimap.svelte b/src/lib/components/minimap.svelte
new file mode 100644
index 0000000..cfee685
--- /dev/null
+++ b/src/lib/components/minimap.svelte
@@ -0,0 +1,54 @@
+<script>
+  import { coordinateLength } from '$lib/config';
+  import { sensor } from '$lib/stores/widgets';
+  import { maxSize } from '$lib/config';
+
+  const isActive = function isActive($s, x, y) {
+    const isXActive = $s.left > x * maxSize && $s.left < (x + 1) * maxSize;
+    const isYActive = $s.top > y * maxSize && $s.top < (y + 1) * maxSize;
+    return isXActive || isYActive;
+  }
+</script>
+
+<div class="minimap">
+  <table>
+    <tr>
+      <td class="{isActive($sensor, -1,-1) ? 'active' : ''}"></td>
+      <td class="{isActive($sensor, 0,-1) ? 'active' : ''}"></td>
+      <td class="{isActive($sensor, 1,-1) ? 'active' : ''}"></td>
+    </tr>
+    <tr>
+      <td class="{isActive($sensor, -1,0) ? 'active' : ''}"></td>
+      <td class="{isActive($sensor, 0,0) ? 'active' : ''}"></td>
+      <td class="{isActive($sensor, 1,0) ? 'active' : ''}"></td>
+    </tr>
+    <tr>
+      <td class="{isActive($sensor, -1,1) ? 'active' : ''}"></td>
+      <td class="{isActive($sensor, 0,1) ? 'active' : ''}"></td>
+      <td class="{isActive($sensor, 1,1) ? 'active' : ''}"></td>
+    </tr>
+  </table>
+</div>
+
+<style>
+  .minimap {
+    background-color: #fff;
+    padding: 4px;
+    position: fixed;
+    top: 2px;
+    right: 2px;
+    font-smooth: never;
+    -webkit-font-smoothing : none;
+  }
+
+  td {
+    width: 10px;
+    height: 10px;
+    border: 1px solid black;
+  }
+
+  td.active {
+    background-color: magenta;
+  }
+</style>
+
diff --git a/src/lib/components/sensor.svelte b/src/lib/components/sensor.svelte
index 3b7dfc2..b6d38d8 100644
--- a/src/lib/components/sensor.svelte
+++ b/src/lib/components/sensor.svelte
@@ -1,6 +1,7 @@
 <script>
-  import { browser } from '$app/env';
+  import { browser } from '$app/environment';
   import { maxSize } from '$lib/config';
+  import { modulo } from '$lib/math';
   import { canvas } from '$lib/stores/canvas';
   import { sensor } from '$lib/stores/widgets';
 
@@ -21,10 +22,10 @@
 
   $: {
     if (browser) {
-      left = $canvas.x - window.screen.width * kSensorSize;
-      top = $canvas.y - window.screen.height * kSensorSize;
-      right = $canvas.x + window.screen.width * kSensorSize;
-      bottom = $canvas.y + window.screen.height * kSensorSize;
+      left = modulo($canvas.x - window.screen.width * kSensorSize, maxSize);
+      top = modulo($canvas.y - window.screen.height * kSensorSize, maxSize);
+      right = left + 2 * window.screen.width * kSensorSize;
+      bottom = top + 2 * window.screen.height * kSensorSize;
 
       fetchItems(left, top, right, bottom);
     }
diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
index fd9401d..907a016 100644
--- a/src/lib/components/widget.svelte
+++ b/src/lib/components/widget.svelte
@@ -18,8 +18,8 @@
     const pCanvas = modulo($topLeft.x, maxSize);
     const qCanvas = modulo($topLeft.y, maxSize);
 
-    const pBoundary = modulo($bottomRight.x, maxSize);
-    const qBoundary = modulo($bottomRight.y, maxSize);
+    const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
+    const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
 
     const pWidget = widget.box.left;
     const qWidget = widget.box.top;
@@ -27,23 +27,44 @@
     xWidget = pWidget - pCanvas;
     yWidget = qWidget - qCanvas;
 
-    if (pWidget < pCanvas &&
-        pWidget < pBoundary) {
-      xWidget = modulo(xWidget, maxSize);
+    // Case 1: Boundary jump happens inside the box
+    if (pWidget < pCanvas
+        && pBoundary > maxSize
+        && pWidget < pBoundary - maxSize) {
+      xWidget = xWidget + maxSize;
+    }
+    // Case 2: Boundary jump happens to the left of the box
+    else if (pWidget > pCanvas
+        && pBoundary < maxSize
+        && pWidget > pBoundary) {
+      xWidget = xWidget - maxSize;
     }
 
-    if (qWidget < qCanvas &&
-        qWidget < qBoundary) {
-      yWidget = modulo(yWidget, maxSize);
+    // Case 1: Boundary jump happens inside the box
+    if (qWidget < qCanvas
+        && qBoundary > maxSize
+        && qWidget < qBoundary - maxSize) {
+      yWidget = yWidget + maxSize;
+    }
+    // Case 2: Boundary jump happens above the top of the box
+    else if (qWidget > qCanvas
+        && qBoundary < maxSize
+        && qWidget > qBoundary) {
+      yWidget = yWidget - maxSize;
     }
 
+
     console.log('Max', maxSize,
                 'Widget Actual', widget.box.left, widget.box.top,
-                'Top Left', $topLeft.x, $topLeft.y,
-                'Mod Top Left', modulo($topLeft.x, maxSize), modulo($topLeft.y, maxSize),
+                'Canvas WH', Math.abs($topLeft.x - $bottomRight.x), Math.abs($topLeft.y - $bottomRight.y),
+                'Canvas XY', $topLeft.x, $topLeft.y,
+                'Canvas PQ', pCanvas, qCanvas,
+                'Boundary XY', $bottomRight.x, $bottomRight.y,
+                'Boundary PQ', pBoundary, qBoundary,
+                'Widget Rendered', xWidget, yWidget,
                 'Calculated',
-                modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
-                modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))
+                modulo(pWidget - pCanvas, maxSize),
+                modulo(qWidget - qCanvas, maxSize))
 
   }
 
diff --git a/src/lib/config.js b/src/lib/config.js
index b450d84..dbbe7fc 100644
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -1,4 +1,4 @@
-export const coordinateLength = 6;
+export const coordinateLength = 4;
 export const maxSize = Math.pow(16, coordinateLength);
 
 export const supabase = {
diff --git a/src/lib/stores/canvas.js b/src/lib/stores/canvas.js
index e0cc115..2a5e89c 100644
--- a/src/lib/stores/canvas.js
+++ b/src/lib/stores/canvas.js
@@ -1,4 +1,4 @@
-import { browser } from '$app/env';
+import { browser } from '$app/environment';
 import { derived, writable } from 'svelte/store';
 
 export const canvas = writable({x: 0, y: 0});
diff --git a/src/lib/stores/widgets.js b/src/lib/stores/widgets.js
index 4da94ff..9bdb649 100644
--- a/src/lib/stores/widgets.js
+++ b/src/lib/stores/widgets.js
@@ -13,17 +13,12 @@ const getBoxes = function getBoxes ({left, top, right, bottom}) {
     `box.ov."((${left},${top}),(${right},${bottom}))"`,
     `box.ov."((${left+maxSize},${top+maxSize}),(${right+maxSize},${bottom+maxSize}))"`,
     `box.ov."((${left+maxSize},${top}),(${right+maxSize},${bottom}))"`,
-    `box.ov."((${left},${top+maxSize}),(${right},${bottom+maxSize}))"`
+    `box.ov."((${left},${top+maxSize}),(${right},${bottom+maxSize}))"`,
+    `box.ov."((${left-maxSize},${top-maxSize}),(${right-maxSize},${bottom-maxSize}))"`,
+    `box.ov."((${left-maxSize},${top}),(${right-maxSize},${bottom}))"`,
+    `box.ov."((${left},${top-maxSize}),(${right},${bottom-maxSize}))"`
   ];
 
-  if (right > maxSize  || bottom > maxSize) {
-    return [...results,
-      `box.ov."((${left-maxSize},${top-maxSize}),(${right-maxSize},${bottom-maxSize}))"`,
-      `box.ov."((${left-maxSize},${top}),(${right-maxSize},${bottom}))"`,
-      `box.ov."((${left},${top-maxSize}),(${right},${bottom-maxSize}))"`
-    ];
-  }
-
   return results
 };