Connect sensor to database

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

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 5982b0ae37dddc9f0a4528bcb91aefdfa249fbd9..06c2357590d3157bf668b58e39f777df0632703a 100644 (file)
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,2 +1,81 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+  import Sensor from '$lib/components/sensor.svelte';
+  import Background from '$lib/components/background.svelte';
+  import Palette from '$lib/components/palette.svelte';
+  import Hud from '$lib/components/hud.svelte';
+  import { modulo } from '$lib/math';
+  import { widgets } from '$lib/stores/widgets';
+
+  import { coordinateLength, maxSize } from '$lib/config';
+
+  $: x = 0;
+  $: y = 0;
+  $: shouldShowPalette = false;
+
+  let dragging = false;
+
+  const moveCanvas = function moveCanvas(event) {
+
+    if (dragging) {
+      let deltaX = event.x - dragging.x;
+      let deltaY = event.y - dragging.y;
+      x = modulo(x - deltaX, maxSize);
+      y = modulo(y - deltaY, maxSize);
+      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}
+>
+  <Sensor x={x} y={y} />
+  <Background x={x} y={y} />
+  <Hud x={x} y={y} />
+
+  {#if shouldShowPalette }
+    <Palette/>
+  {/if}
+
+  <p>{JSON.stringify($widgets)}</p>
+</div>
+
+<style>
+  .canvas {
+    user-select: none;
+    padding: 0;
+    margin: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+</style>