redirect to bibdle.dev and components

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>