Update project, improve sensor/render logic

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

<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>