fix: Cleanup mag-cursor exp

kiosion · Mar 6, 2024 · afed4e7 · afed4e7
1 parent 72594ef
commit afed4e7
Show file tree

Hide file tree

Showing 13 changed files with 321 additions and 148 deletions.
diff --git a/svelte-app/src/components/experiments/gol.svelte b/svelte-app/src/components/experiments/gol.svelte
@@ -120,25 +120,9 @@
     <Divider />
   </header>
 
-  <figure class="relative w-full overflow-clip rounded-md">
-    <div class="grid w-fit gap-0.5" style="grid-template-columns: repeat({cols}, 12px);">
-      {#each grid as row, rowIndex}
-        {#each row as cell, colIndex}
-          <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
-          <div
-            class="h-3 w-3 rounded-sm shadow-lg {cell
-              ? 'bg-violet-500/60 shadow-violet-500/30 dark:shadow-violet-500/10'
-              : 'bg-transparent shadow-transparent'}"
-            on:click={() => !running && toggleCell(rowIndex, colIndex)}
-          />
-        {/each}
-      {/each}
-    </div>
-  </figure>
-
   <Tooltip text={running ? 'Pause' : 'Resume'}>
     <button
-      class="focus-outline absolute right-4 top-4 rounded-md p-1"
+      class="focus-outline absolute right-4 top-4 rounded-md p-2"
       on:click={running ? stopGame : startGame}
     >
       {#if running}
@@ -162,4 +146,20 @@
       {/if}
     </button>
   </Tooltip>
+
+  <figure class="relative w-full overflow-clip rounded-md">
+    <div class="grid w-fit gap-0.5" style="grid-template-columns: repeat({cols}, 12px);">
+      {#each grid as row, rowIndex}
+        {#each row as cell, colIndex}
+          <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
+          <div
+            class="h-3 w-3 rounded-sm shadow-lg {cell
+              ? 'bg-violet-500/60 shadow-violet-500/30 dark:shadow-violet-500/10'
+              : 'bg-transparent shadow-transparent'}"
+            on:click={() => !running && toggleCell(rowIndex, colIndex)}
+          />
+        {/each}
+      {/each}
+    </div>
+  </figure>
 </article>
diff --git a/svelte-app/src/components/experiments/mag-cursor.svelte b/svelte-app/src/components/experiments/mag-cursor.svelte
@@ -1,22 +1,25 @@
 <script lang="ts">
-  import Divider from '$components/divider.svelte';
-  import MagButton from '$components/experiments/mag-cursor/button.svelte';
-  import MagCursor from '$components/experiments/mag-cursor/cursor.svelte';
+  import { onMount } from 'svelte';
+
+  import { BASE_GIT_URL } from '$lib/consts';
 
-  let container: HTMLElement,
-    containerRect: DOMRect,
-    targets: HTMLElement[] = [],
-    activeIdx: number | undefined = undefined;
+  import Divider from '$components/divider.svelte';
+  import Cursor from '$components/experiments/mag-cursor/cursor.svelte';
+  import CursorTarget from '$components/experiments/mag-cursor/target.svelte';
+  import Icon from '$components/icon.svelte';
+  import Link from '$components/link.svelte';
 
-  const register = (element: HTMLElement) => targets.push(element);
+  let container: HTMLElement, containerRect: DOMRect;
 
   const buttons = ['Button One', 'Button Two', 'Button Three'];
+
+  onMount(() => (containerRect = container?.getBoundingClientRect()));
 </script>
 
 <svelte:window on:resize={() => (containerRect = container?.getBoundingClientRect())} />
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events a11y-no-static-element-interactions -->
-<div
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<article
   class="relative my-6 block cursor-none rounded-lg bg-dark/5 px-7 py-6 shadow-2xl shadow-dark/5 transition-shadow focus-within:shadow-dark/10 hover:shadow-dark/10 dark:bg-light/5 dark:shadow-light/5"
   on:mouseover={() => (containerRect = container?.getBoundingClientRect())}
   bind:this={container}
@@ -26,13 +29,44 @@
     <p>A simple magnetic cursor effect. Hover over the buttons to try it out.</p>
     <Divider />
   </header>
+
+  <CursorTarget distance={38} let:active let:offset>
+    <Link
+      href="{BASE_GIT_URL}/blob/main/svelte-app/src/components/experiments/mag-cursor.svelte"
+      class="focus-outline absolute right-4 top-4 z-10 cursor-none rounded-sm p-2"
+      tooltipDelay={150}
+      tooltipText="View source"
+      newtab
+      style="transform: translate({offset?.[0]}px, {offset?.[1]}px)"
+    >
+      <Icon
+        name="ExternalLink"
+        size={21}
+        class="hover:text-accent-light/90 focus-visible:text-accent-light/90 hover:dark:text-accent-dark/90 focus-visible:dark:text-accent-dark/90 {active
+          ? 'text-accent-light/90 dark:text-accent-dark/90'
+          : 'text-dark/90 dark:text-light/90'}"
+      />
+    </Link>
+  </CursorTarget>
+
   <figure class="h-fit w-full overflow-hidden">
-    <div class="flex w-full flex-row items-center justify-center pb-6 pt-5">
-      {#each buttons as label, i}
-        <MagButton {label} {register} active={i === activeIdx} />
+    <div class="flex w-full flex-row items-center justify-center gap-2 pb-10 pt-8">
+      {#each buttons as label}
+        <CursorTarget let:active let:offset
+          ><button
+            class="focus-outline-sm cursor-none select-none rounded-lg px-3 py-2 font-code text-base transition-colors active:text-accent-light/80 dark:active:text-accent-dark/80 {active
+              ? ' text-accent-light dark:text-accent-dark'
+              : ''}"
+            tabindex="0"
+          >
+            <div style="transform: translate({offset?.[0]}px, {offset?.[1]}px)">
+              {label}
+            </div></button
+          ></CursorTarget
+        >
       {/each}
     </div>
 
-    <MagCursor {targets} {containerRect} bind:activeTarget={activeIdx} />
+    <Cursor {containerRect} />
   </figure>
-</div>
+</article>
diff --git a/svelte-app/src/components/experiments/mag-cursor/button.svelte b/svelte-app/src/components/experiments/mag-cursor/button.svelte