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

   1 <script>
   2   import { coordinateLength } from '$lib/config';
   3   import { sensor } from '$lib/stores/widgets';
   4   import { maxSize } from '$lib/config';
   5
   6   const isActive = function isActive($s, x, y) {
   7     const isXActive = $s.left > x * maxSize && $s.left < (x + 1) * maxSize;
   8     const isYActive = $s.top > y * maxSize && $s.top < (y + 1) * maxSize;
   9     return isXActive || isYActive;
  10   }
  11 </script>
  12
  13 <div class="minimap">
  14   <table>
  15     <tr>
  16       <td class="{isActive($sensor, -1,-1) ? 'active' : ''}"></td>
  17       <td class="{isActive($sensor, 0,-1) ? 'active' : ''}"></td>
  18       <td class="{isActive($sensor, 1,-1) ? 'active' : ''}"></td>
  19     </tr>
  20     <tr>
  21       <td class="{isActive($sensor, -1,0) ? 'active' : ''}"></td>
  22       <td class="{isActive($sensor, 0,0) ? 'active' : ''}"></td>
  23       <td class="{isActive($sensor, 1,0) ? 'active' : ''}"></td>
  24     </tr>
  25     <tr>
  26       <td class="{isActive($sensor, -1,1) ? 'active' : ''}"></td>
  27       <td class="{isActive($sensor, 0,1) ? 'active' : ''}"></td>
  28       <td class="{isActive($sensor, 1,1) ? 'active' : ''}"></td>
  29     </tr>
  30   </table>
  31 </div>
  32
  33 <style>
  34   .minimap {
  35     background-color: #fff;
  36     padding: 4px;
  37     position: fixed;
  38     top: 2px;
  39     right: 2px;
  40     font-smooth: never;
  41     -webkit-font-smoothing : none;
  42   }
  43
  44   td {
  45     width: 10px;
  46     height: 10px;
  47     border: 1px solid black;
  48   }
  49
  50   td.active {
  51     background-color: magenta;
  52   }
  53 </style>
  54