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

   1 <script>
   2   import { coordinateLength } from '$lib/config';
   3   import { canvas } from '$lib/stores/canvas';
   4
   5   const kSeparatorRegex = /([0-9a-z]{2})/g;
   6
   7   const formatCoordinate = function formatCoordinate(coordinate) {
   8     return coordinate
   9       .toString(16)
  10       .padStart(coordinateLength, 0)
  11       .replace(kSeparatorRegex, '$1 ');
  12   }
  13 </script>
  14
  15 <div class="hud">
  16   { formatCoordinate($canvas.x) } × { formatCoordinate($canvas.y) }
  17 </div>
  18
  19 <style>
  20   .hud {
  21     background-color: #fff;
  22     padding: 4px;
  23     position: fixed;
  24     bottom: 2px;
  25     right: 2px;
  26     font-smooth: never;
  27     -webkit-font-smoothing : none;
  28   }
  29 </style>