From 3717f7fbf9ec110b51fe002cdced5d73ebd6136b Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Tue, 5 Jul 2022 19:11:31 +0200
Subject: Move things to components

---
 src/lib/components/background.svelte | 35 +++++++++++++++++++++++++++++++++++
 src/lib/components/hud.svelte        | 30 ++++++++++++++++++++++++++++++
 src/lib/components/palette.svelte    | 25 +++++++++++++++++++++++++
 src/lib/components/sensor.svelte     |  0
 4 files changed, 90 insertions(+)
 create mode 100644 src/lib/components/background.svelte
 create mode 100644 src/lib/components/hud.svelte
 create mode 100644 src/lib/components/palette.svelte
 create mode 100644 src/lib/components/sensor.svelte

(limited to 'src/lib/components')

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
new file mode 100644
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
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
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
index 0000000..e69de29
-- 
cgit