From 71beb256d25466f757f6a2386efacf16a32ded3d Mon Sep 17 00:00:00 2001
From: Michael Chan <mijoch@gmail.com>
Date: Mon, 22 Jul 2024 23:17:31 -0700
Subject: [PATCH] remove SSR from simple utilities

---
 chan.dev/src/components/button.astro | 14 +++++-----
 chan.dev/src/pages/flip.astro        | 38 +++++++++++++++++++++++++
 chan.dev/src/pages/flip/index.astro  | 29 -------------------
 chan.dev/src/pages/flip/result.astro |  8 ------
 chan.dev/src/pages/roll.astro        | 42 ++++++++++++++++++++++++++++
 chan.dev/src/pages/roll/index.astro  | 29 -------------------
 chan.dev/src/pages/roll/result.astro |  8 ------
 7 files changed, 87 insertions(+), 81 deletions(-)
 create mode 100644 chan.dev/src/pages/flip.astro
 delete mode 100644 chan.dev/src/pages/flip/index.astro
 delete mode 100644 chan.dev/src/pages/flip/result.astro
 create mode 100644 chan.dev/src/pages/roll.astro
 delete mode 100644 chan.dev/src/pages/roll/index.astro
 delete mode 100644 chan.dev/src/pages/roll/result.astro

diff --git a/chan.dev/src/components/button.astro b/chan.dev/src/components/button.astro
index e70c698b..039b11f5 100644
--- a/chan.dev/src/components/button.astro
+++ b/chan.dev/src/components/button.astro
@@ -1,13 +1,13 @@
 ---
-const { class: className, ...restProps } = Astro.props;
+const {class: className, ...restProps} = Astro.props
 ---
 
 <button
-  class:list={[
-    className,
-    "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full",
-  ]}
-  {...Astro.props}
+	class:list={[
+		className,
+		'bg-blue-500 hover:bg-blue-700 active:bg-blue-900 text-white font-bold py-2 px-4 rounded w-full',
+	]}
+	{...Astro.props}
 >
-  <slot />
+	<slot />
 </button>
diff --git a/chan.dev/src/pages/flip.astro b/chan.dev/src/pages/flip.astro
new file mode 100644
index 00000000..7ef0d8e1
--- /dev/null
+++ b/chan.dev/src/pages/flip.astro
@@ -0,0 +1,38 @@
+---
+import Layout from '#layouts/Layout.astro'
+import Prose from '#components/prose.astro'
+import Button from '#components/button.astro'
+---
+
+<Layout>
+	<Prose as="main">
+		<main class="min-w-[26rem] text-center">
+			<Button data-refresh-button>Flip</Button>
+			<div class="text-9xl font-black font-mono" data-result>
+			</div>
+		</main>
+	</Prose>
+</Layout>
+<script>
+	let refreshButton: HTMLButtonElement = document.querySelector(
+			'[data-refresh-button]'
+		)!,
+		result: HTMLElement =
+			document.querySelector('[data-result]')!
+
+	function renderResult(el: HTMLElement) {
+		return (el.innerText = Math.round(Math.random())
+			? 'heads'
+			: 'tails')
+	}
+
+	renderResult(result)
+
+	refreshButton.addEventListener('click', () => {
+		result.innerText = '🪙'
+
+		setTimeout(() => {
+			renderResult(result)
+		}, 300)
+	})
+</script>
diff --git a/chan.dev/src/pages/flip/index.astro b/chan.dev/src/pages/flip/index.astro
deleted file mode 100644
index 41188ca4..00000000
--- a/chan.dev/src/pages/flip/index.astro
+++ /dev/null
@@ -1,29 +0,0 @@
----
-import Layout from '#layouts/Layout.astro'
-import Prose from '#components/prose.astro'
-import Button from '#components/button.astro'
-import Result from './result.astro'
----
-
-<Layout>
-	<Prose as="main">
-		<main>
-			<Button
-				hx-post={`/flip/result`}
-				hx-trigger="click"
-				hx-swap="innerHTML"
-				hx-target="#d"
-				class="relative"
-			>
-				Flip
-			</Button>
-			<div class="text-9xl font-black font-mono" id="d">
-				<Result />
-			</div>
-		</main>
-	</Prose>
-	<script
-		src="https://unpkg.com/htmx.org@1.9.10"
-		integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
-		crossorigin="anonymous"></script>
-</Layout>
diff --git a/chan.dev/src/pages/flip/result.astro b/chan.dev/src/pages/flip/result.astro
deleted file mode 100644
index 55adebe8..00000000
--- a/chan.dev/src/pages/flip/result.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-export const partial = true
-export const prerender = false
-
-const params = Astro.params
----
-
-{Math.round(Math.random()) ? 'heads' : 'tails'}
diff --git a/chan.dev/src/pages/roll.astro b/chan.dev/src/pages/roll.astro
new file mode 100644
index 00000000..89659a61
--- /dev/null
+++ b/chan.dev/src/pages/roll.astro
@@ -0,0 +1,42 @@
+---
+import Layout from '#layouts/Layout.astro'
+import Prose from '#components/prose.astro'
+import Button from '#components/button.astro'
+---
+
+<Layout>
+	<Prose as="main">
+		<main class="min-w-[26rem] text-center">
+			<Button data-refresh-button>Flip</Button>
+			<div class="text-9xl font-black font-mono" data-result>
+			</div>
+		</main>
+	</Prose>
+</Layout>
+<script>
+	let refreshButton: HTMLButtonElement = document.querySelector(
+			'[data-refresh-button]'
+		)!,
+		result: HTMLElement =
+			document.querySelector('[data-result]')!
+
+	function renderResult(el: HTMLElement) {
+		const sides =
+			Number(
+				new URL(location.href).searchParams.get('sides')
+			) || 6
+		return (el.innerText = String(
+			Math.floor(Math.random() * sides) + 1
+		))
+	}
+
+	renderResult(result)
+
+	refreshButton.addEventListener('click', () => {
+		result.innerText = '🎲'
+
+		setTimeout(() => {
+			renderResult(result)
+		}, 300)
+	})
+</script>
diff --git a/chan.dev/src/pages/roll/index.astro b/chan.dev/src/pages/roll/index.astro
deleted file mode 100644
index 7688d247..00000000
--- a/chan.dev/src/pages/roll/index.astro
+++ /dev/null
@@ -1,29 +0,0 @@
----
-import Layout from '#layouts/Layout.astro'
-import Prose from '#components/prose.astro'
-import Button from '#components/button.astro'
-import Result from './result.astro'
----
-
-<Layout>
-	<Prose as="main">
-		<main>
-			<Button
-				hx-post={`/roll/result?sides=6`}
-				hx-trigger="click"
-				hx-swap="innerHTML"
-				hx-target="#d"
-			>
-				Roll
-			</Button>
-			<div class="text-9xl font-black font-mono" id="d">
-				<Result />
-			</div>
-		</main>
-	</Prose>
-</Layout>
-
-<script
-	src="https://unpkg.com/htmx.org@1.9.10"
-	integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
-	crossorigin="anonymous"></script>
diff --git a/chan.dev/src/pages/roll/result.astro b/chan.dev/src/pages/roll/result.astro
deleted file mode 100644
index 11f698eb..00000000
--- a/chan.dev/src/pages/roll/result.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-export const partial = true
-export const prerender = false
-
-let sides = Number(Astro.url.searchParams.get('sides')) || 6
----
-
-{Math.floor(Math.random() * sides) + 1}