git.r.bdr.sh - rbdr/canvas/blob - src/lib/components/minimap.svelte

   1 <script>
   2         import { topLeft, bottomRight } from '$lib/stores/canvas';
   3         import { modulo } from '$lib/math';
   4         import { maxSize } from '$lib/config';
   5         import MinimapSector from '$lib/components/minimap_sector.svelte';
   6
   7         const gridSize = 24;
   8         const sectors = Array(gridSize).fill(Array(gridSize).fill());
   9         const size = maxSize / gridSize;
  10
  11         const isActive = function isActive(x, y, $topLeft) {
  12                 const pCanvas = modulo($topLeft.x, maxSize);
  13                 const qCanvas = modulo($topLeft.y, maxSize);
  14                 const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
  15                 const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
  16
  17                 const sectorLeft = size * x;
  18                 const sectorTop = size * y;
  19                 const sectorRight = sectorLeft + size;
  20                 const sectorBottom = sectorTop + size;
  21                 return (
  22                         sectorRight >= pCanvas &&
  23                         pBoundary >= sectorLeft &&
  24                         sectorBottom >= qCanvas &&
  25                         qBoundary >= sectorTop
  26                 );
  27         };
  28 </script>
  29
  30 <div class="minimap">
  31         <table>
  32                 {#each sectors as _, y}
  33                         <tr>
  34                                 {#each sectors[y] as _, x}
  35                                         <MinimapSector x="{x}," y="{y}," {size} isActive={isActive(x, y, $topLeft)} />
  36                                 {/each}
  37                         </tr>
  38                 {/each}
  39         </table>
  40 </div>
  41
  42 <style>
  43         .minimap {
  44                 background-color: #fff;
  45                 padding: 4px;
  46                 position: fixed;
  47                 top: 2px;
  48                 right: 2px;
  49                 font-smooth: never;
  50                 -webkit-font-smoothing: none;
  51         }
  52         table {
  53                 border-collapse: collapse;
  54         }
  55 </style>