redirect to bibdle.dev and components

src/lib/components/Feedback.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+</script>
+
+<div
+	class="mt-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>

src/lib/components/GuessesTable.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	interface Guess {
+		book: {
+			id: string;
+			name: string;
+			testament: string;
+			section: string;
+		};
+		testamentMatch: boolean;
+		sectionMatch: boolean;
+		adjacent: boolean;
+	}
+
+	let {
+		guesses,
+		correctBookId,
+	}: { guesses: Guess[]; correctBookId: string } = $props();
+</script>
+
+<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
+	<table class="w-full">
+		<thead>
+			<tr class="bg-linear-to-r from-gray-50 to-gray-300">
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Book</th
+				>
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Testament</th
+				>
+				<th
+					class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
+					>Section</th
+				>
+			</tr>
+		</thead>
+		<tbody>
+			{#each guesses as guess (guess.book.id)}
+				<tr
+					class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
+				>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
+					>
+						{guess.book.id === correctBookId ? "✅" : "❌"}
+						{guess.book.name}
+					</td>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+					>
+						{guess.testamentMatch ? "✅" : "🟥"}
+						{guess.book.testament.charAt(0).toUpperCase() +
+							guess.book.testament.slice(1).toLowerCase()}
+					</td>
+					<td
+						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+					>
+						{guess.sectionMatch ? "✅" : "🟥"}
+						{guess.adjacent ? "‼️ " : ""}{guess.book.section}
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>

src/lib/components/SearchInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { bibleBooks, type BibleBook } from "$lib/types/bible";
+
+	let { searchQuery = $bindable(""), guessedIds, submitGuess } = $props();
+
+	let filteredBooks = $derived(
+		bibleBooks.filter((book) =>
+			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
+		),
+	);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" && filteredBooks.length > 0) {
+			submitGuess(filteredBooks[0].id);
+		}
+	}
+</script>
+
+<div class="mb-12">
+	<input
+		bind:value={searchQuery}
+		placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
+		class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
+		onkeydown={handleKeydown}
+	/>
+	{#if searchQuery && filteredBooks.length > 0}
+		<ul
+			class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
+		>
+			{#each filteredBooks as book (book.id)}
+				<li>
+					<button
+						class="w-full p-4 sm:p-5 text-left {guessedIds.has(
+							book.id,
+						)
+							? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
+							: 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
+						onclick={() => submitGuess(book.id)}
+					>
+						<span
+							class="font-semibold {guessedIds.has(book.id)
+								? 'line-through text-gray-500'
+								: ''}">{book.name}</span
+						>
+						<span class="ml-auto text-sm opacity-75"
+							>({book.testament.toUpperCase()})</span
+						>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{:else if searchQuery}
+		<p class="mt-4 text-center text-gray-500 p-8">No books found</p>
+	{/if}
+</div>

src/lib/components/VerseDisplay.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
+
+	let { data, isWon }: { data: PageData; isWon: boolean } = $props();
+	let dailyVerse = $derived(data.dailyVerse);
+</script>
+
+<div class="bg-white rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 w-full">
+	<blockquote
+		class="text-xl sm:text-2xl leading-relaxed text-gray-700 italic text-center"
+	>
+		{dailyVerse.verseText}
+	</blockquote>
+	{#if isWon}
+		<p class="text-center text-lg text-green-600 font-bold mt-4">
+			{dailyVerse.reference}
+		</p>
+	{/if}
+</div>

src/lib/components/WinScreen.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import { getBookById, toOrdinal } from "$lib/utils/game";
+
+	interface StatsData {
+		solveRank: number;
+		guessRank: number;
+		totalSolves: number;
+		averageGuesses: number;
+	}
+
+	let {
+		grade,
+		statsData,
+		correctBookId,
+		handleShare,
+		copied = $bindable(false),
+		statsSubmitted,
+	} = $props();
+
+	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
+</script>
+
+<div
+	class="mb-12 p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
+	in:fade={{ delay: 500 }}
+>
+	<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
+		🎉 Congratulations! 🎉
+	</h2>
+	<p class="text-lg sm:text-xl md:text-2xl">
+		The verse is from <span
+			class="font-black text-xl sm:text-2xl md:text-3xl">{bookName}</span
+		>
+	</p>
+	<p
+		class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
+	>
+		Your grade: {grade}
+	</p>
+
+	<button
+		onclick={handleShare}
+		data-umami-event="Share"
+		class={`mt-4 text-2xl font-bold p-2 ${
+			copied
+				? "bg-green-400/50 hover:bg-green-500/60"
+				: "bg-white/20 hover:bg-white/30"
+		} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
+	>
+		{copied ? "Copied to clipboard!" : "📤 Share"}
+	</button>
+
+	<!-- Statistics Display -->
+	{#if statsData}
+		<div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
+			<p class="font-semibold">
+				You were the {toOrdinal(statsData.solveRank)} person to solve today.
+			</p>
+			<p class="font-semibold">
+				You rank <span class="text-2xl font-black"
+					>{toOrdinal(statsData.guessRank)}</span
+				> in guesses.
+			</p>
+			<p class="opacity-90">
+				Average: <span class="font-semibold"
+					>{statsData.averageGuesses.toFixed(1)}</span
+				> guesses
+			</p>
+		</div>
+	{:else if !statsSubmitted}
+		<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
+	{/if}
+</div>