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.toString(16).padStart(coordinateLength, 0).replace(kSeparatorRegex, '$1 ');
   9         };
  10 </script>
  11
  12 <div class="hud">
  13         {formatCoordinate($canvas.x)} × {formatCoordinate($canvas.y)}
  14 </div>
  15
  16 <style>
  17         .hud {
  18                 background-color: #fff;
  19                 padding: 4px;
  20                 position: fixed;
  21                 bottom: 2px;
  22                 right: 2px;
  23                 font-smooth: never;
  24                 -webkit-font-smoothing: none;
  25         }
  26 </style>