Refactor game logic into utility modules and add cross-device sync

Extracted game state management, share logic, and stats API calls into dedicated modules (game-persistence.svelte.ts, share.ts, stats-client.ts), and moved daily verse loading to client-side to fix timezone issues. Added a guesses column to daily_completions for cross-device state restoration for logged-in users, a new GET /api/stats endpoint, and a staging deploy script.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/routes/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { bibleBooks, type BibleBook } from "$lib/types/bible";
-
 	import type { PageProps } from "./$types";
 	import { browser } from "$app/environment";
+	import { enhance } from "$app/forms";
 
 	import VerseDisplay from "$lib/components/VerseDisplay.svelte";
 	import SearchInput from "$lib/components/SearchInput.svelte";
@@ -12,47 +11,45 @@
 	import TitleAnimation from "$lib/components/TitleAnimation.svelte";
 	import DevButtons from "$lib/components/DevButtons.svelte";
 	import AuthModal from "$lib/components/AuthModal.svelte";
-	import { getGrade } from "$lib/utils/game";
-	import { enhance } from "$app/forms";
 
-	interface Guess {
-		book: BibleBook;
-		testamentMatch: boolean;
-		sectionMatch: boolean;
-		adjacent: boolean;
-		firstLetterMatch: boolean;
-	}
+	import { evaluateGuess, getGrade } from "$lib/utils/game";
+	import {
+		generateShareText,
+		shareResult,
+		copyToClipboard as clipboardCopy,
+	} from "$lib/utils/share";
+	import {
+		submitCompletion,
+		fetchExistingStats,
+		type StatsData,
+	} from "$lib/utils/stats-client";
+	import { createGamePersistence } from "$lib/stores/game-persistence.svelte";
 
 	let { data }: PageProps = $props();
 
-	let dailyVerse = $state(data.dailyVerse);
-	let correctBookId = $state(data.correctBookId);
-	let correctBook = $state(data.correctBook);
+	let dailyVerse = $derived(data.dailyVerse);
+	let correctBookId = $derived(data.correctBookId);
+	let correctBook = $derived(data.correctBook);
 	let user = $derived(data.user);
 	let session = $derived(data.session);
 
-	let guesses = $state<Guess[]>([]);
-
 	let searchQuery = $state("");
-
 	let copied = $state(false);
 	let isDev = $state(false);
-	let chapterGuessCompleted = $state(false);
-	let chapterCorrect = $state(false);
-
-	let anonymousId = $state("");
-	let statsSubmitted = $state(false);
 	let authModalOpen = $state(false);
-	let statsData = $state<{
-		solveRank: number;
-		guessRank: number;
-		totalSolves: number;
-		averageGuesses: number;
-		tiedCount: number;
-		percentile: number;
-	} | null>(null);
+	let showWinScreen = $state(false);
+	let statsData = $state<StatsData | null>(null);
 
-	let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
+	const persistence = createGamePersistence(
+		() => dailyVerse.date,
+		() => dailyVerse.reference,
+		() => correctBookId,
+		() => user?.id,
+	);
+
+	let guessedIds = $derived(
+		new Set(persistence.guesses.map((g) => g.book.id)),
+	);
 
 	const currentDate = $derived(
 		new Date().toLocaleDateString("en-US", {
@@ -63,76 +60,33 @@
 		}),
 	);
 
-	let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
-	let showWinScreen = $state(false);
+	let isWon = $derived(
+		persistence.guesses.some((g) => g.book.id === correctBookId),
+	);
 	let grade = $derived(
 		isWon
-			? guesses.length === 1 && chapterCorrect
+			? persistence.guesses.length === 1 && persistence.chapterCorrect
 				? "S++"
-				: getGrade(
-						guesses.length,
-						getBookById(correctBookId)?.popularity ?? 0,
-					)
+				: getGrade(persistence.guesses.length)
 			: "",
 	);
 	let blurChapter = $derived(
-		isWon && guesses.length === 1 && !chapterGuessCompleted,
+		isWon &&
+			persistence.guesses.length === 1 &&
+			!persistence.chapterGuessCompleted,
 	);
 
-	function getBookById(id: string): BibleBook | undefined {
-		return bibleBooks.find((b) => b.id === id);
-	}
+	async function submitGuess(bookId: string) {
+		if (persistence.guesses.some((g) => g.book.id === bookId)) return;
 
-	function isAdjacent(id1: string, id2: string): boolean {
-		const b1 = getBookById(id1);
-		const b2 = getBookById(id2);
-		return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
-	}
+		const guess = evaluateGuess(bookId, correctBookId);
+		if (!guess) return;
 
-	function getFirstLetter(bookName: string): string {
-		const match = bookName.match(/[a-zA-Z]/);
-		return match ? match[0] : bookName[0];
-	}
-
-	function submitGuess(bookId: string) {
-		if (guesses.some((g) => g.book.id === bookId)) return;
-
-		const book = getBookById(bookId);
-		if (!book) return;
-
-		const correctBook = getBookById(correctBookId);
-		if (!correctBook) return;
-
-		const testamentMatch = book.testament === correctBook.testament;
-		const sectionMatch = book.section === correctBook.section;
-		const adjacent = isAdjacent(bookId, correctBookId);
-
-		// Special case: if correct book is in the Epistles + starts with "1",
-		// any guess starting with "1" counts as first letter match
-		const correctIsEpistlesWithNumber =
-			(correctBook.section === "Pauline Epistles" ||
-				correctBook.section === "General Epistles") &&
-			correctBook.name[0] === "1";
-		const guessIsEpistlesWithNumber =
-			(book.section === "Pauline Epistles" ||
-				book.section === "General Epistles") &&
-			book.name[0] === "1";
-
-		const firstLetterMatch =
-			correctIsEpistlesWithNumber && guessIsEpistlesWithNumber
-				? true
-				: getFirstLetter(book.name).toUpperCase() ===
-					getFirstLetter(correctBook.name).toUpperCase();
-
-		console.log(
-			`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
-		);
-
-		if (guesses.length === 0) {
+		if (persistence.guesses.length === 0) {
 			const key = `bibdle-first-guess-${dailyVerse.date}`;
 			if (
-				localStorage.getItem(key) !== "true" &&
 				browser &&
+				localStorage.getItem(key) !== "true" &&
 				(window as any).umami
 			) {
 				(window as any).umami.track("First guess");
@@ -140,44 +94,24 @@
 			}
 		}
 
-		guesses = [
-			{
-				book,
-				testamentMatch,
-				sectionMatch,
-				adjacent,
-				firstLetterMatch,
-			},
-			...guesses,
-		];
-
+		persistence.guesses = [guess, ...persistence.guesses];
 		searchQuery = "";
-	}
 
-	function generateUUID(): string {
-		// Try native randomUUID if available
-		if (typeof window.crypto.randomUUID === "function") {
-			return window.crypto.randomUUID();
+		if (
+			guess.book.id === correctBookId &&
+			browser &&
+			persistence.anonymousId
+		) {
+			statsData = await submitCompletion({
+				anonymousId: persistence.anonymousId,
+				date: dailyVerse.date,
+				guessCount: persistence.guesses.length,
+				guesses: persistence.guesses.map((g) => g.book.id),
+			});
+			if (statsData) {
+				persistence.markStatsSubmitted();
+			}
 		}
-
-		// 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;
 	}
 
 	// If server date doesn't match client's local date, fetch timezone-correct verse
@@ -185,33 +119,17 @@
 		if (!browser) return;
 
 		const localDate = new Date().toLocaleDateString("en-CA");
-		console.log("Date check:", {
-			localDate,
-			verseDate: dailyVerse.date,
-			match: dailyVerse.date === localDate,
-		});
-
 		if (dailyVerse.date === localDate) return;
 
 		const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-		console.log("Fetching timezone-correct verse:", {
-			localDate,
-			timezone,
-		});
 
 		fetch("/api/daily-verse", {
 			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify({
-				date: localDate,
-				timezone,
-			}),
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ date: localDate, timezone }),
 		})
 			.then((res) => res.json())
 			.then((result) => {
-				console.log("Received verse data:", result);
 				dailyVerse = result.dailyVerse;
 				correctBookId = result.correctBookId;
 				correctBook = result.correctBook;
@@ -243,36 +161,6 @@
 			);
 	});
 
-	// Initialize anonymous ID
-	$effect(() => {
-		if (!browser) return;
-
-		// CRITICAL: If user is logged in, ALWAYS use their user ID
-		// Never use the localStorage anonymous ID for authenticated users
-		if (user) {
-			anonymousId = user.id;
-		} else {
-			anonymousId = getOrCreateAnonymousId();
-		}
-
-		if ((window as any).umami) {
-			(window as any).umami.identify(anonymousId);
-		}
-		const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
-		statsSubmitted = localStorage.getItem(statsKey) === "true";
-		const chapterGuessKey = `bibdle-chapter-guess-${dailyVerse.reference}`;
-		chapterGuessCompleted = localStorage.getItem(chapterGuessKey) !== null;
-		if (chapterGuessCompleted) {
-			const saved = localStorage.getItem(chapterGuessKey);
-			if (saved) {
-				const data = JSON.parse(saved);
-				const match = dailyVerse.reference.match(/\s(\d+):/);
-				const correctChapter = match ? parseInt(match[1], 10) : 1;
-				chapterCorrect = data.selectedChapter === correctChapter;
-			}
-		}
-	});
-
 	$effect(() => {
 		if (!browser) return;
 		isDev =
@@ -280,145 +168,47 @@
 			window.location.host === "test.bibdle.com";
 	});
 
-	// Load saved guesses
+	// Fetch stats on page load if user already won in a previous session (same device)
 	$effect(() => {
-		if (!browser) return;
-
-		const key = `bibdle-guesses-${dailyVerse.date}`;
-		const saved = localStorage.getItem(key);
-		if (saved) {
-			let savedIds: string[] = JSON.parse(saved);
-			savedIds = Array.from(new Set(savedIds));
-			guesses = savedIds.map((bookId: string) => {
-				const book = getBookById(bookId)!;
-				const correctBook = getBookById(correctBookId)!;
-				const testamentMatch = book.testament === correctBook.testament;
-				const sectionMatch = book.section === correctBook.section;
-				const adjacent = isAdjacent(bookId, correctBookId);
-
-				// Apply same first letter logic as in submitGuess
-				const correctIsEpistlesWithNumber =
-					(correctBook.section === "Pauline Epistles" ||
-						correctBook.section === "General Epistles") &&
-					correctBook.name[0] === "1";
-				const guessIsEpistlesWithNumber =
-					(book.section === "Pauline Epistles" ||
-						book.section === "General Epistles") &&
-					book.name[0] === "1";
-
-				const firstLetterMatch =
-					correctIsEpistlesWithNumber && guessIsEpistlesWithNumber
-						? true
-						: getFirstLetter(book.name).toUpperCase() ===
-							getFirstLetter(correctBook.name).toUpperCase();
-
-				return {
-					book,
-					testamentMatch,
-					sectionMatch,
-					adjacent,
-					firstLetterMatch,
-				};
-			});
-		}
-	});
-
-	$effect(() => {
-		if (!browser) return;
-		localStorage.setItem(
-			`bibdle-guesses-${dailyVerse.date}`,
-			JSON.stringify(guesses.map((g) => g.book.id)),
-		);
-	});
-
-	// Auto-submit stats when user wins
-	$effect(() => {
-		console.log("Stats effect triggered:", {
-			browser,
-			isWon,
-			anonymousId,
-			statsSubmitted,
-			statsData,
+		if (
+			!browser ||
+			!isWon ||
+			!persistence.anonymousId ||
+			statsData ||
+			!persistence.statsSubmitted
+		)
+			return;
+		fetchExistingStats({
+			anonymousId: persistence.anonymousId,
+			date: dailyVerse.date,
+		}).then((data) => {
+			statsData = data;
 		});
+	});
 
-		if (!browser || !isWon || !anonymousId || statsData) {
-			console.log("Basic conditions not met");
+	// For logged-in users on a new device: restore today's game state from the server
+	let crossDeviceCheckDate = $state<string | null>(null);
+	$effect(() => {
+		if (
+			!browser ||
+			!user ||
+			!dailyVerse?.date ||
+			isWon ||
+			crossDeviceCheckDate === dailyVerse.date ||
+			!persistence.anonymousId
+		)
 			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: anonymousId, // Already set correctly in $effect above
-					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);
+		crossDeviceCheckDate = dailyVerse.date;
+		fetchExistingStats({
+			anonymousId: persistence.anonymousId,
+			date: dailyVerse.date,
+		}).then((data) => {
+			if (data?.guesses?.length) {
+				persistence.hydrateFromServer(data.guesses);
+				statsData = data;
+				persistence.markStatsSubmitted();
 			}
-		}
-
-		submitStats();
+		});
 	});
 
 	// Delay showing win screen until GuessesTable animation completes
@@ -428,114 +218,39 @@
 			return;
 		}
 
-		// Check if user already won today (page reload case)
-		const winTrackedKey = `bibdle-win-tracked-${dailyVerse.date}`;
-		const alreadyWonToday =
-			browser && localStorage.getItem(winTrackedKey) === "true";
-
-		if (alreadyWonToday) {
-			// User already won and is refreshing - show immediately
+		if (persistence.isWinAlreadyTracked()) {
 			showWinScreen = true;
 		} else {
-			// User just won this session - delay for animation
-			// Animation timing: last column starts at 1500ms, animation takes 600ms
 			const animationDelay = 1800;
 			const timeoutId = setTimeout(() => {
 				showWinScreen = true;
 			}, animationDelay);
-
 			return () => clearTimeout(timeoutId);
 		}
 	});
 
+	// Track win analytics
 	$effect(() => {
 		if (!browser || !isWon) return;
-		const key = `bibdle-win-tracked-${dailyVerse.date}`;
-		if (localStorage.getItem(key) === "true") return;
-		if ((window as any).umami) {
+		const isNew = persistence.markWinTracked();
+		if (isNew && (window as any).umami) {
 			(window as any).umami.track("Guessed correctly", {
-				totalGuesses: guesses.length,
+				totalGuesses: persistence.guesses.length,
 			});
 		}
-		localStorage.setItem(key, "true");
 	});
 
-	function generateShareText(): string {
-		const emojis = guesses
-			.slice()
-			.reverse()
-			.map((guess) => {
-				if (guess.book.id === correctBookId) return "✅";
-				if (guess.adjacent) return "‼️";
-				if (guess.sectionMatch) return "🟩";
-				if (guess.testamentMatch) return "🟧";
-				return "🟥";
-			})
-			.join("");
-
-		const dateFormatter = new Intl.DateTimeFormat("en-US", {
-			month: "short",
-			day: "numeric",
-			year: "numeric",
+	function getShareText(): string {
+		return generateShareText({
+			guesses: persistence.guesses,
+			correctBookId,
+			dailyVerseDate: dailyVerse.date,
+			grade,
+			chapterCorrect: persistence.chapterCorrect,
+			isLoggedIn: !!user,
+			userStreak: user ? (user as any).streak : undefined,
+			origin: window.location.origin,
 		});
-		const formattedDate = dateFormatter.format(
-			new Date(`${dailyVerse.date}T00:00:00`),
-		);
-		const siteUrl = window.location.origin;
-
-		// Use scroll emoji for logged-in users, book emoji for anonymous
-		const bookEmoji = user ? "📜" : "📖";
-
-		const lines = [
-			`${bookEmoji} Bibdle | ${formattedDate} ${bookEmoji}`,
-			`${grade} (${guesses.length} ${guesses.length === 1 ? "guess" : "guesses"})`,
-		];
-
-		// Add streak for logged-in users (requires streak field in user data)
-		if (user && (user as any).streak !== undefined) {
-			lines.push(`🔥 ${(user as any).streak} day streak`);
-		}
-
-		lines.push(
-			`${emojis}${guesses.length === 1 && chapterCorrect ? " ⭐" : ""}`,
-			siteUrl,
-		);
-
-		return lines.join("\n");
-	}
-
-	async function share() {
-		if (!browser) return;
-
-		const shareText = generateShareText();
-
-		try {
-			if ("share" in navigator) {
-				await (navigator as any).share({ text: shareText });
-			} else {
-				await (navigator as any).clipboard.writeText(shareText);
-			}
-		} catch (err) {
-			console.error("Share failed:", err);
-			throw err;
-		}
-	}
-
-	async function copyToClipboard() {
-		if (!browser) return;
-
-		const shareText = generateShareText();
-
-		try {
-			await (navigator as any).clipboard.writeText(shareText);
-			copied = true;
-			setTimeout(() => {
-				copied = false;
-			}, 5000);
-		} catch (err) {
-			console.error("Copy to clipboard failed:", err);
-			throw err;
-		}
 	}
 
 	function handleShare() {
@@ -544,7 +259,7 @@
 		if (useClipboard) {
 			copied = true;
 		}
-		share()
+		shareResult(getShareText())
 			.then(() => {
 				if (useClipboard) {
 					setTimeout(() => {
@@ -558,14 +273,23 @@
 				}
 			});
 	}
+
+	async function handleCopyToClipboard() {
+		if (!browser) return;
+		try {
+			await clipboardCopy(getShareText());
+			copied = true;
+			setTimeout(() => {
+				copied = false;
+			}, 5000);
+		} catch (err) {
+			console.error("Copy to clipboard failed:", err);
+		}
+	}
 </script>
 
 <svelte:head>
 	<title>A daily bible game{isDev ? " (dev)" : ""}</title>
-	<!-- <meta
-    name="description"
-    content="Guess which book of the Bible a verse comes from."
-  /> -->
 </svelte:head>
 
 <div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
@@ -598,32 +322,18 @@
 						{statsData}
 						{correctBookId}
 						{handleShare}
-						{copyToClipboard}
+						copyToClipboard={handleCopyToClipboard}
 						bind:copied
-						{statsSubmitted}
-						guessCount={guesses.length}
+						statsSubmitted={persistence.statsSubmitted}
+						guessCount={persistence.guesses.length}
 						reference={dailyVerse.reference}
-						onChapterGuessCompleted={() => {
-							chapterGuessCompleted = true;
-							const key = `bibdle-chapter-guess-${dailyVerse.reference}`;
-							const saved = localStorage.getItem(key);
-							if (saved) {
-								const data = JSON.parse(saved);
-								const match =
-									dailyVerse.reference.match(/\s(\d+):/);
-								const correctChapter = match
-									? parseInt(match[1], 10)
-									: 1;
-								chapterCorrect =
-									data.selectedChapter === correctChapter;
-							}
-						}}
+						onChapterGuessCompleted={persistence.onChapterGuessCompleted}
 					/>
 				</div>
 			{/if}
 
 			<div class="animate-fade-in-up animate-delay-600">
-				<GuessesTable {guesses} {correctBookId} />
+				<GuessesTable guesses={persistence.guesses} {correctBookId} />
 			</div>
 
 			{#if isWon}
@@ -638,7 +348,7 @@
 					<a
 						href="/stats?{user
 							? `userId=${user.id}`
-							: `anonymousId=${anonymousId}`}&tz={encodeURIComponent(
+							: `anonymousId=${persistence.anonymousId}`}&tz={encodeURIComponent(
 							Intl.DateTimeFormat().resolvedOptions().timeZone,
 						)}"
 						class="inline-flex items-center justify-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
@@ -684,7 +394,9 @@
 							? `Expires ${session.expiresAt.toLocaleDateString()}`
 							: "No session"}
 					</div>
-					<div>Anonymous ID: {anonymousId || "Not set"}</div>
+					<div>
+						Anonymous ID: {persistence.anonymousId || "Not set"}
+					</div>
 					<div>
 						Client Local Time: {new Date().toLocaleString("en-US", {
 							timeZone:
@@ -706,4 +418,4 @@
 	</div>
 </div>
 
-<AuthModal bind:isOpen={authModalOpen} {anonymousId} />
+<AuthModal bind:isOpen={authModalOpen} anonymousId={persistence.anonymousId} />