bibdle/src/lib/components/WinScreen.svelte

<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>