git.r.bdr.sh - rbdr/canvas/blob - src/routes/index.svelte

   1 <script>
   2
   3   import { browser } from '$app/env';
   4   import Background from '$lib/components/background.svelte';
   5   import Palette from '$lib/components/palette.svelte';
   6   import Hud from '$lib/components/hud.svelte';
   7
   8   const kCoordinateLength = 6;
   9   const kMaxSize = Math.pow(16, kCoordinateLength);
  10
  11   $: x = 0;
  12   $: y = 0;
  13   $: shouldShowPalette = false;
  14
  15   let dragging = false;
  16
  17   const modulo = function modulo (number, base) {
  18     return ((number % base) + base) % base
  19   };
  20
  21   const moveCanvas = function moveCanvas(event) {
  22
  23     if (dragging) {
  24       let deltaX = event.x - dragging.x;
  25       let deltaY = event.y - dragging.y;
  26       x = modulo(x - deltaX, kMaxSize);
  27       y = modulo(y - deltaY, kMaxSize);
  28       dragging.x = event.x;
  29       dragging.y = event.y;
  30     }
  31   }
  32
  33   const startDragging = function startDragging(event) {
  34     dragging = {
  35       x: event.x,
  36       y: event.y
  37     };
  38   }
  39
  40   const stopDragging = function startDragging() {
  41     dragging = null;
  42   }
  43
  44   const showPalette = function showPalette(event) {
  45     event.preventDefault();
  46     dragging = null;
  47     document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
  48     document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
  49     shouldShowPalette = true;
  50   }
  51
  52   const hidePalette = function hidePalette() {
  53     event.preventDefault();
  54     shouldShowPalette = false;
  55   }
  56 </script>
  57
  58 <div
  59   class="canvas"
  60   on:click={hidePalette}
  61   on:contextmenu={showPalette}
  62   on:mousedown={startDragging}
  63   on:mouseup={stopDragging}
  64   on:mousemove={moveCanvas}>
  65 >
  66   <Background x={x} y={y}/>
  67   <Hud x={x} y={y} />
  68
  69   {#if shouldShowPalette }
  70     <Palette/>
  71   {/if}
  72 </div>
  73
  74 <style>
  75   .canvas {
  76     user-select: none;
  77     padding: 0;
  78     margin: 0;
  79     width: 100vw;
  80     height: 100vh;
  81   }
  82 </style>