Save WIP

[rbdr/canvas] / src / lib / components / minimap.svelte

diff --git a/src/lib/components/minimap.svelte b/src/lib/components/minimap.svelte
index cfee68577d4b24de963f6dc50a19cc0e26d59905..0f823f48af91f8b6a9fe1bd4d76dbe01d75c8467 100644 (file)
--- a/src/lib/components/minimap.svelte
+++ b/src/lib/components/minimap.svelte
@@ -1,54 +1,55 @@
 <script>
-  import { coordinateLength } from '$lib/config';
-  import { sensor } from '$lib/stores/widgets';
-  import { maxSize } from '$lib/config';
+       import { topLeft, bottomRight } from '$lib/stores/canvas';
+       import { modulo } from '$lib/math';
+       import { maxSize } from '$lib/config';
+       import MinimapSector from '$lib/components/minimap_sector.svelte';
 
-  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;
-  }
+       const gridSize = 24;
+       const sectors = Array(gridSize).fill(Array(gridSize).fill());
+       const size = maxSize / gridSize;
+
+       const isActive = function isActive(x, y, $topLeft) {
+               const pCanvas = modulo($topLeft.x, maxSize);
+               const qCanvas = modulo($topLeft.y, maxSize);
+               const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
+               const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
+
+               const sectorLeft = size * x;
+               const sectorTop = size * y;
+               const sectorRight = sectorLeft + size;
+               const sectorBottom = sectorTop + size;
+               return (
+                       sectorRight >= pCanvas &&
+                       pBoundary >= sectorLeft &&
+                       sectorBottom >= qCanvas &&
+                       qBoundary >= sectorTop
+               );
+       };
 </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>
+       <table>
+               {#each sectors as _, y}
+                       <tr>
+                               {#each sectors[y] as _, x}
+                                       <MinimapSector x="{x}," y="{y}," {size} isActive={isActive(x, y, $topLeft)} />
+                               {/each}
+                       </tr>
+               {/each}
+       </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;
-  }
+       .minimap {
+               background-color: #fff;
+               padding: 4px;
+               position: fixed;
+               top: 2px;
+               right: 2px;
+               font-smooth: never;
+               -webkit-font-smoothing: none;
+       }
+       table {
+               border-collapse: collapse;
+       }
 </style>
-