v2

src/routes/+page.svelte

@@ -23,6 +23,15 @@
 
 	let copied = $state(false);
 
+	let anonymousId = $state("");
+	let statsSubmitted = $state(false);
+	let statsData = $state<{
+		solveRank: number;
+		guessRank: number;
+		totalSolves: number;
+		averageGuesses: number;
+	} | null>(null);
+
 	let filteredBooks = $derived(
 		bibleBooks.filter((book) =>
 			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
@@ -90,6 +99,41 @@
 		return "🔴 C-";
 	}
 
+	function generateUUID(): string {
+		// Try native randomUUID if available
+		if (typeof window.crypto.randomUUID === "function") {
+			return window.crypto.randomUUID();
+		}
+
+		// Fallback UUID v4 generator for older browsers
+		return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+			const r =
+				window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
+			const v = c === "x" ? r : (r & 0x3) | 0x8;
+			return v.toString(16);
+		});
+	}
+
+	function getOrCreateAnonymousId(): string {
+		if (!browser) return "";
+		const key = "bibdle-anonymous-id";
+		let id = localStorage.getItem(key);
+		if (!id) {
+			id = generateUUID();
+			localStorage.setItem(key, id);
+		}
+		return id;
+	}
+
+	// Initialize anonymous ID
+	$effect(() => {
+		if (!browser) return;
+		anonymousId = getOrCreateAnonymousId();
+		const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
+		statsSubmitted = localStorage.getItem(statsKey) === "true";
+	});
+
+	// Load saved guesses
 	$effect(() => {
 		if (!browser) return;
 
@@ -122,6 +166,96 @@
 		);
 	});
 
+	// Auto-submit stats when user wins
+	$effect(() => {
+		console.log("Stats effect triggered:", {
+			browser,
+			isWon,
+			anonymousId,
+			statsSubmitted,
+			statsData,
+		});
+
+		if (!browser || !isWon || !anonymousId) {
+			console.log("Basic conditions not met");
+			return;
+		}
+
+		if (statsSubmitted && !statsData) {
+			console.log("Fetching existing stats...");
+
+			(async () => {
+				try {
+					const response = await fetch(
+						`/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`,
+					);
+					const result = await response.json();
+					console.log("Stats response:", result);
+
+					if (result.success && result.stats) {
+						console.log("Setting stats data:", result.stats);
+						statsData = result.stats;
+						localStorage.setItem(
+							`bibdle-stats-submitted-${dailyVerse.date}`,
+							"true",
+						);
+					} else if (result.error) {
+						console.error("Server error:", result.error);
+					} else {
+						console.error("Unexpected response format:", result);
+					}
+				} catch (err) {
+					console.error("Stats fetch failed:", err);
+				}
+			})();
+
+			return;
+		}
+
+		console.log("Submitting stats...");
+
+		async function submitStats() {
+			try {
+				const payload = {
+					anonymousId,
+					date: dailyVerse.date,
+					guessCount: guesses.length,
+				};
+
+				console.log("Sending POST request with:", payload);
+
+				const response = await fetch("/api/submit-completion", {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify(payload),
+				});
+
+				const result = await response.json();
+				console.log("Stats response:", result);
+
+				if (result.success && result.stats) {
+					console.log("Setting stats data:", result.stats);
+					statsData = result.stats;
+					statsSubmitted = true;
+					localStorage.setItem(
+						`bibdle-stats-submitted-${dailyVerse.date}`,
+						"true",
+					);
+				} else if (result.error) {
+					console.error("Server error:", result.error);
+				} else {
+					console.error("Unexpected response format:", result);
+				}
+			} catch (err) {
+				console.error("Stats submission failed:", err);
+			}
+		}
+
+		submitStats();
+	});
+
 	async function share() {
 		if (!browser) return;
 
@@ -269,6 +403,7 @@
 				>
 					Your grade: {grade}
 				</p>
+
 				<button
 					onclick={handleShare}
 					data-umami-event="Share"
@@ -278,8 +413,40 @@
 							: "bg-white/20 hover:bg-white/30"
 					} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
 				>
-					{copied ? "shared!" : "📤 Share"}
+					{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 <span class="text-2xl font-black"
+								>#{statsData.solveRank}</span
+							> person to solve today!
+						</p>
+						<p class="font-semibold">
+							You ranked <span class="text-2xl font-black"
+								>#{statsData.guessRank}</span
+							> by number of guesses
+						</p>
+						<p class="opacity-90">
+							{statsData.totalSolves}
+							{statsData.totalSolves === 1
+								? "person has"
+								: "people have"} solved today
+						</p>
+						<p class="opacity-90">
+							Average guesses: {statsData.averageGuesses}
+						</p>
+					</div>
+				{:else if !statsSubmitted}
+					<div class="mt-6 text-sm opacity-80">
+						Submitting stats...
+					</div>
+				{/if}
 			</div>
 		{/if}