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

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