X-Git-Url: https://git.r.bdr.sh/rbdr/canvas/blobdiff_plain/e4e4b5202bf0039127f591941fddc1ff5ca09897..refs/heads/main:/src/lib/components/minimap.svelte?ds=sidebyside

diff --git a/src/lib/components/minimap.svelte b/src/lib/components/minimap.svelte
index cfee685..0f823f4 100644
--- 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>
-