Move things to components

[rbdr/canvas] / src / routes / index.svelte

<script>

  import { browser } from '$app/env';
  import Background from '$lib/components/background.svelte';
  import Palette from '$lib/components/palette.svelte';
  import Hud from '$lib/components/hud.svelte';

  const kCoordinateLength = 6;
  const kMaxSize = Math.pow(16, kCoordinateLength);

  $: x = 0;
  $: y = 0;
  $: shouldShowPalette = false;

  let dragging = false;

  const modulo = function modulo (number, base) {
    return ((number % base) + base) % base
  };

  const moveCanvas = function moveCanvas(event) {

    if (dragging) {
      let deltaX = event.x - dragging.x;
      let deltaY = event.y - dragging.y;
      x = modulo(x - deltaX, kMaxSize);
      y = modulo(y - deltaY, kMaxSize);
      dragging.x = event.x;
      dragging.y = event.y;
    }
  }

  const startDragging = function startDragging(event) {
    dragging = {
      x: event.x,
      y: event.y
    };
  }

  const stopDragging = function startDragging() {
    dragging = null;
  }

  const showPalette = function showPalette(event) {
    event.preventDefault();
    dragging = null;
    document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
    document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
    shouldShowPalette = true;
  }

  const hidePalette = function hidePalette() {
    event.preventDefault();
    shouldShowPalette = false;
  }
</script>

<div
  class="canvas"
  on:click={hidePalette}
  on:contextmenu={showPalette}
  on:mousedown={startDragging}
  on:mouseup={stopDragging}
  on:mousemove={moveCanvas}>
>
  <Background x={x} y={y}/>
  <Hud x={x} y={y} />

  {#if shouldShowPalette }
    <Palette/>
  {/if}
</div>

<style>
  .canvas {
    user-select: none;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
  }
</style>