From e4e4b5202bf0039127f591941fddc1ff5ca09897 Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Tue, 24 Jan 2023 13:07:20 +0100
Subject: Update project, improve sensor/render logic

---
 src/lib/components/background.svelte |  2 +-
 src/lib/components/minimap.svelte    | 54 ++++++++++++++++++++++++++++++++++++
 src/lib/components/sensor.svelte     | 11 ++++----
 src/lib/components/widget.svelte     | 45 ++++++++++++++++++++++--------
 4 files changed, 94 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/components/minimap.svelte

(limited to 'src/lib/components')

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))
 
   }
 
-- 
cgit