added test dev buttons and email button

2026-02-04 10:54:44 -05:00 · 2026-01-28 16:02:52 -05:00
parent 55a9fd59ea
commit fe9cc09df6
5 changed files with 194 additions and 66 deletions
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		children: Snippet;
+		variant?: "primary" | "google" | "apple" | "secondary" | "danger";
+		onclick?: () => void;
+		class?: string;
+		type?: "button" | "submit" | "reset";
+	}
+
+	let {
+		children,
+		variant = "primary",
+		onclick,
+		class: className = "",
+		type = "button",
+	}: Props = $props();
+
+	const variantClasses = {
+		primary:
+			"bg-blue-500 hover:bg-blue-600 text-white border-gray-500 shadow-md hover:shadow-lg",
+		google: "bg-white hover:bg-gray-50 text-gray-700 border-gray-500 shadow-md hover:shadow-lg",
+		apple: "bg-black hover:bg-gray-900 text-white border-gray-500 shadow-md hover:shadow-lg",
+		secondary:
+			"bg-white/50 hover:bg-white/70 text-gray-700 border-gray-500 shadow-sm hover:shadow-md backdrop-blur-sm",
+		danger: "bg-red-500 hover:bg-red-600 text-white border-gray-500 shadow-md hover:shadow-lg",
+	};
+</script>
+
+<button
+	{type}
+	{onclick}
+	class="inline-flex items-center justify-center px-4 py-2 rounded-lg border-2 font-bold text-sm transition-all duration-200 {variantClasses[
+		variant
+	]} {className}"
+>
+	{@render children()}
+</button>
--- a/src/lib/components/Credits.svelte
+++ b/src/lib/components/Credits.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import BlueskyLogo from "$lib/assets/Bluesky_Logo.svg";
+</script>
+
+<div class="text-center" in:fade={{ delay: 1500, duration: 1000 }}>
+	<div
+		class="flex flex-col items-center gap-2 bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
+	>
+		<p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
+			A project by George Powell & Silent Summit Co.
+		</p>
+		<!-- <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
+			For questions, comments, job opportunities, or cash donations,
+			please email <a
+				class="text-blue-400"
+				href="mailto:george+bibdle@silentsummit.co"
+				>george@silentsummit.co</a
+			>
+		</p> -->
+		<!-- <p class="text-lg font-triodion font-black text-gray-800 tabular-nums">
+
+		</p> -->
+
+		<!-- Bluesky Social Media Button -->
+	</div>
+
+	<div class="mt-8 flex items-center justify-center gap-6">
+		<a
+			href="https://bsky.app/profile/snail.city"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="inline-flex hover:opacity-80 transition-opacity"
+			aria-label="Follow on Bluesky"
+		>
+			<img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" />
+		</a>
+
+		<div class="w-0.5 h-8 bg-gray-400"></div>
+
+		<a
+			href="mailto:george+bibdle@silentsummit.co"
+			class="inline-flex hover:opacity-80 transition-opacity"
+			aria-label="Send email"
+		>
+			<svg
+				class="w-8 h-8 text-gray-700"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+				></path>
+			</svg>
+		</a>
+	</div>
+</div>
--- a/src/lib/components/DevButtons.svelte
+++ b/src/lib/components/DevButtons.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import Button from "$lib/components/Button.svelte";
+
+	function clearLocalStorage() {
+		if (!browser) return;
+		// Clear all bibdle-related localStorage items
+		const keysToRemove: string[] = [];
+		for (let i = 0; i < localStorage.length; i++) {
+			const key = localStorage.key(i);
+			if (key && key.startsWith("bibdle-")) {
+				keysToRemove.push(key);
+			}
+		}
+		keysToRemove.forEach((key) => localStorage.removeItem(key));
+		// Reload the page to reset state
+		window.location.reload();
+	}
+</script>
+
+<div class="pt-24 pb-4">
+	<div class="border-t-2 border-gray-400"></div>
+</div>
+<div class="flex flex-col gap-3">
+	<div class="flex flex-col md:flex-row gap-3 md:gap-2">
+		<Button
+			variant="secondary"
+			onclick={() => alert("About page coming soon!")}
+			class="w-full md:w-auto py-4 md:py-2"
+		>
+			About Bibdle / FAQs
+		</Button>
+		<Button
+			variant="google"
+			onclick={() => alert("Google sign-in coming soon!")}
+			class="w-full md:w-auto py-4 md:py-2"
+		>
+			<svg class="w-4 h-4 mr-2" viewBox="0 0 24 24">
+				<path
+					fill="#4285F4"
+					d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+				/>
+				<path
+					fill="#34A853"
+					d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+				/>
+				<path
+					fill="#FBBC05"
+					d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+				/>
+				<path
+					fill="#EA4335"
+					d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+				/>
+			</svg>
+			Sign in with Google
+		</Button>
+		<Button
+			variant="apple"
+			onclick={() => alert("Apple sign-in coming soon!")}
+			class="w-full md:w-auto py-4 md:py-2"
+		>
+			<svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
+				<path
+					d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
+				/>
+			</svg>
+			Sign in with Apple
+		</Button>
+	</div>
+
+	<div class="flex flex-col md:flex-row gap-3 md:gap-2">
+		<Button
+			variant="primary"
+			onclick={() => alert("Patreon coming soon!")}
+			class="w-full md:w-auto py-4 md:py-2"
+		>
+			Become a Patron
+		</Button>
+	</div>
+
+	<Button
+		variant="danger"
+		onclick={clearLocalStorage}
+		class="w-full py-4 md:py-2"
+	>
+		Clear LocalStorage
+	</Button>
+</div>
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { fade } from "svelte/transition";
-  import BlueskyLogo from "$lib/assets/Bluesky_Logo.svg";
-</script>
-
-<!-- <div
-	class="my-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
-	in:fade={{ delay: 1500, duration: 1000 }}
->
-	Thank you so much for playing! Feel free to email me directly with feedback:
-	<a
-		href="mailto:george@snail.city"
-		class="font-semibold text-blue-600 hover:text-blue-800 underline"
-		>george@snail.city</a
-	>
-</div> -->
-
-<div class="text-center" in:fade={{ delay: 1500, duration: 1000 }}>
-  <div
-    class="inline-flex w-full flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
-  >
-    <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
-      A project by George Powell & Silent Summit Co.
-    </p>
-    <!-- <p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
-			
-		</p> -->
-
-    <!-- Bluesky Social Media Button -->
-  </div>
-
-  <div class="mt-8">
-    <a
-      href="https://bsky.app/profile/snail.city"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="inline-flex items-center justify-center hover:opacity-80 transition-opacity"
-      aria-label="Follow on Bluesky"
-    >
-      <img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" />
-    </a>
-  </div>
-</div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,8 +8,9 @@
 	import SearchInput from "$lib/components/SearchInput.svelte";
 	import GuessesTable from "$lib/components/GuessesTable.svelte";
 	import WinScreen from "$lib/components/WinScreen.svelte";
-	import Feedback from "$lib/components/Feedback.svelte";
+	import Credits from "$lib/components/Credits.svelte";
 	import TitleAnimation from "$lib/components/TitleAnimation.svelte";
+	import DevButtons from "$lib/components/DevButtons.svelte";
 	import { getGrade } from "$lib/utils/game";

 	interface Guess {
@@ -419,21 +420,6 @@
 				}
 			});
 	}
-
-	function clearLocalStorage() {
-		if (!browser) return;
-		// Clear all bibdle-related localStorage items
-		const keysToRemove: string[] = [];
-		for (let i = 0; i < localStorage.length; i++) {
-			const key = localStorage.key(i);
-			if (key && key.startsWith("bibdle-")) {
-				keysToRemove.push(key);
-			}
-		}
-		keysToRemove.forEach((key) => localStorage.removeItem(key));
-		// Reload the page to reset state
-		window.location.reload();
-	}
 </script>

 <svelte:head>
@@ -496,16 +482,11 @@
 			<GuessesTable {guesses} {correctBookId} />

 			{#if isWon}
-				<Feedback />
+				<Credits />
 			{/if}
 		</div>
 		{#if isDev}
-			<button
-				onclick={clearLocalStorage}
-				class="mt-4 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-bold transition-colors"
-			>
-				Clear LocalStorage
-			</button>
+			<DevButtons />
 		{/if}
 	</div>
 </div>