From 315b7576b48999cf077e8a171633abd22c54ba25 Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Sat, 20 Apr 2024 21:54:02 -0400
Subject: [PATCH] MORE FANCY (MOUSE BITES)

---
 src/lib/components/Footer.svelte    |  2 +-
 src/lib/components/ImgButton.svelte | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 9c9543a..5354fe7 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -12,7 +12,7 @@
 				<div class="my-auto w-5 h-5 font-bold">
 					<Eye></Eye>
 				</div>
-				<p>This page has been viewed <span class="font-bold">100</span> times.</p>
+				<p>This page has been viewed <span class="font-bold">x</span> times.</p>
 			</div>
 		</div>
 		<div class="flex flex-col my-auto ml-auto text-sm text-neutral-500">
diff --git a/src/lib/components/ImgButton.svelte b/src/lib/components/ImgButton.svelte
index 27293f3..df90580 100644
--- a/src/lib/components/ImgButton.svelte
+++ b/src/lib/components/ImgButton.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
 
 	/** @type {string} src */
 	export let src;
@@ -10,6 +11,8 @@
 	/** @type {HTMLImageElement} e */
 	let e;
 
+	let loaded = false;
+
 	// https://github.com/nbitzz/newnewwebsite/blob/a751e690a9993923aabd1984d9645c502f148c69/src/components/buttons/Buttons.astro#L74-L95
 	onMount(() => {
 		/** @param {MouseEvent} ev */
@@ -21,7 +24,7 @@
 				` rotate3d(${yP.toFixed(2)}, ${xP.toFixed(2)},0,20deg)` +
 				` translate(${3 * xP}px,${-5 * yP}px)`;
 
-			e.style.boxShadow = 'gray 0px 0px 10px';
+			e.style.boxShadow = `${(-3 * xP).toFixed(2)}px ${(5 * yP).toFixed(2)}px 3px #c4bef3`;
 		};
 
 		e.addEventListener('mouseover', startEffect);
@@ -30,11 +33,16 @@
 			e.style.transform = '';
 			e.style.boxShadow = '';
 		});
+
+		const preload = new Image();
+		preload.src = src;
+		preload.onload = () => (loaded = true);
 	});
 </script>
 
 <a class="hover:shadow-2xl" {href} target="_blank">
-	<img class="imgbutton" {src} alt="Button" bind:this={e} />
+	<img in:fade class="imgbutton {!loaded && 'hidden'}" {src} alt="Button" bind:this={e} />
+	<div class="animate-pulse imgbutton bg-neutral-600/50 rounded-sm {loaded && 'hidden'}"></div>
 </a>
 
 <style lang="postcss">
@@ -42,5 +50,7 @@
 		transition-property: transform;
 		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 		transition-duration: 70ms;
+		height: 31px;
+		width: 88px;
 	}
 </style>