Add palette basics

2 files changed, 78 insertions, 1 deletions

diff --git a/src/lib/animations/blink.js b/src/lib/animations/blink.js
new file mode 100644
index 0000000..c12e031
--- /dev/null
+++ b/src/lib/animations/blink.js
@@ -0,0 +1,24 @@
+import { sineInOut } from 'svelte/easing';
+
+export const blink = function blink(node, params) {
+	const originalWidth = parseFloat(getComputedStyle(node).width);
+	const originalHeight = parseFloat(getComputedStyle(node).height);
+
+	return {
+		delay: params.delay || 0,
+		duration: params.duration || 400,
+		easing: params.easing || sineInOut,
+		css: (t) => {
+			const halfWidth = originalWidth / 2;
+			const halfHeight = originalHeight / 2;
+			const width = Math.round(t <= 0.2 ? (originalWidth * t) / 0.2 : originalWidth);
+			const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0);
+			const height = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalHeight : 0);
+			const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth);
+
+      console.log(width, height);
+
+			return `width: ${width}px; height: ${height}px;`;
+		}
+	};
+};
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index f2544cf..22ad5e4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,10 +1,12 @@
 <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');
@@ -47,15 +49,47 @@
     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:mousedown={startDragging} on:mouseup={stopDragging} on:mousemove={moveCanvas}>
+<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;
@@ -77,4 +111,23 @@
     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>