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

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