1 files changed, 54 insertions, 0 deletions
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>
+