Move things to components

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
new file mode 100644 (file)
index 0000000..7664939
--- /dev/null
+++ b/src/lib/components/background.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { browser } from '$app/env';
+
+  export let x;
+  export let y;
+
+  const kDotSize = 32;
+
+  $: {
+    if (browser) {
+      document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
+      document.documentElement.style.setProperty('--dot-x', kDotSize - x % kDotSize + 'px');
+      document.documentElement.style.setProperty('--dot-y', kDotSize - y % kDotSize + 'px');
+    }
+  }
+</script>
+
+<div class="background"></div>
+
+<style>
+  .background {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    user-select: none;
+    pointer-events: 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;
+  }
+</style>

diff --git a/src/lib/components/hud.svelte b/src/lib/components/hud.svelte
new file mode 100644 (file)
index 0000000..ce32e0d
--- /dev/null
+++ b/src/lib/components/hud.svelte
@@ -0,0 +1,30 @@
+<script>
+  export let x;
+  export let y;
+
+  const kCoordinateLength = 6;
+  const kSeparatorRegex = /([0-9a-z]{2})/g;
+
+  const formatCoordinate = function formatCoordinate(coordinate) {
+    return coordinate
+      .toString(16)
+      .padStart(kCoordinateLength, 0)
+      .replace(kSeparatorRegex, '$1 ');
+  }
+</script>
+
+<div class="hud">
+  { formatCoordinate(x) } × { formatCoordinate(y) }
+</div>
+
+<style>
+  .hud {
+    background-color: #fff;
+    padding: 4px;
+    position: fixed;
+    bottom: 2px;
+    right: 2px;
+    font-smooth: never;
+    -webkit-font-smoothing : none;
+  }
+</style>

diff --git a/src/lib/components/palette.svelte b/src/lib/components/palette.svelte
new file mode 100644 (file)
index 0000000..94ba3db
--- /dev/null
+++ b/src/lib/components/palette.svelte
@@ -0,0 +1,25 @@
+<script>
+       import { blink } from '$lib/animations/blink';
+</script>
+
+<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>
+
+<style>
+  .palette {
+    position: fixed;
+    top: var(--palette-y);
+    left: var(--palette-x);
+    border: 1px solid black;
+    background-color: #fff;
+    overflow: hidden;
+  }
+</style>

diff --git a/src/lib/components/sensor.svelte b/src/lib/components/sensor.svelte
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 22ad5e4af60494c7a3623b9124af5a48ce523505..7d5a3ff48c6f98a73abeb074cb28dc007fa876c4 100644 (file)
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,32 +1,30 @@
 <script>
 
   import { browser } from '$app/env';
 <script>
 
   import { browser } from '$app/env';

-       import { blink } from '$lib/animations/blink';
+  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);

 
 

-  const dotSize = 24;

   $: x = 0;
   $: y = 0;
   $: shouldShowPalette = false;
 
   $: 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;
 
   let dragging = false;
 

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

   const moveCanvas = function moveCanvas(event) {
 
     if (dragging) {
   const moveCanvas = function moveCanvas(event) {
 
     if (dragging) {

-      x -= event.x - dragging.x;
-      y -= event.y - dragging.y;
+      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;
     }
       dragging.x = event.x;
       dragging.y = event.y;
     }


@@ -43,12 +41,6 @@
     dragging = null;
   }
 
     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;
   const showPalette = function showPalette(event) {
     event.preventDefault();
     dragging = null;


@@ -65,69 +57,26 @@
 
 <div
   class="canvas"
 
 <div
   class="canvas"

+  on:click={hidePalette}

   on:contextmenu={showPalette}
   on:mousedown={startDragging}
   on:mouseup={stopDragging}
   on:mousemove={moveCanvas}>
   on:contextmenu={showPalette}
   on:mousedown={startDragging}
   on:mouseup={stopDragging}
   on:mousemove={moveCanvas}>

-</div>
+>
+  <Background x={x} y={y}/>
+  <Hud x={x} y={y} />

 
 

-<div class="hud">
-  ({ formatCoordinate(x) }, { formatCoordinate(y) })
+  {#if shouldShowPalette }
+    <Palette/>
+  {/if}

 </div>
 
 </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;
 <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;
   }
     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>
 </style>