Add palette basics

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

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 5982b0ae37dddc9f0a4528bcb91aefdfa249fbd9..22ad5e4af60494c7a3623b9124af5a48ce523505 100644 (file)
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,2 +1,133 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+
+  import { browser } from '$app/env';
+       import { blink } from '$lib/animations/blink';
+
+  const dotSize = 24;
+  $: x = 0;
+  $: y = 0;
+  $: shouldShowPalette = false;
+
+  if (browser) {
+    document.documentElement.style.setProperty('--dot-size', dotSize + 'px');
+  }
+
+
+  $: {
+    if (browser) {
+      document.documentElement.style.setProperty('--dot-x', dotSize - x % dotSize + 'px');
+      document.documentElement.style.setProperty('--dot-y', dotSize - y % dotSize + 'px');
+    }
+  }
+
+  let dragging = false;
+
+  const moveCanvas = function moveCanvas(event) {
+
+    if (dragging) {
+      x -= event.x - dragging.x;
+      y -= event.y - dragging.y;
+      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 formatCoordinate = function formatCoordinate(coordinate) {
+    const sign = Math.sign(coordinate) === 1 ? '' : '-';
+    const value = Math.abs(coordinate).toString(16).padStart(4, 0);
+    return sign + value;
+  }
+
+  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:contextmenu={showPalette}
+  on:mousedown={startDragging}
+  on:mouseup={stopDragging}
+  on:mousemove={moveCanvas}>
+</div>
+
+<div class="hud">
+  ({ formatCoordinate(x) }, { formatCoordinate(y) })
+</div>
+
+{#if shouldShowPalette }
+  <div class="palette-container" on:click={hidePalette}>
+  </div>
+  <div class="palette" transition:blink>
+    <p>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+    </p>
+  </div>
+{/if}
+
+<style>
+  .canvas {
+    user-select: none;
+    background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
+    background-size: var(--dot-size) var(--dot-size);
+    background-position: var(--dot-x) var(--dot-y);
+    padding: 0;
+    margin: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .hud {
+    background-color: #fff;
+    padding: 4px;
+    position: fixed;
+    bottom: 2px;
+    right: 2px;
+    font-smooth: never;
+    -webkit-font-smoothing : none;
+  }
+
+  .palette {
+    position: fixed;
+    top: var(--palette-y);
+    left: var(--palette-x);
+    border: 1px solid black;
+    background-color: #fff;
+    overflow: hidden;
+  }
+
+  .palette-container {
+    width: 100vw;
+    height: 100vh;
+    background-color: #f0f;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+</style>