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>

deploy-staging.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+set -e
+
+cd "$(dirname "$0")"
+
+echo "Pulling latest changes..."
+git pull
+
+echo "Installing dependencies..."
+bun i
+
+echo "Pushing database changes..."
+bun run db:generate
+bun run db:migrate
+
+echo "Building..."
+bun --bun run build
+
+echo "Restarting service..."
+sudo systemctl restart bibdle-test
+
+echo "Done!"

scripts/dedup-completions.ts

@@ -0,0 +1,41 @@
+import { Database } from 'bun:sqlite';
+import path from 'path';
+
+const dbUrl = process.env.DATABASE_URL;
+if (!dbUrl) throw new Error('DATABASE_URL is not set');
+
+const dbPath = dbUrl.startsWith('file:') ? dbUrl.slice(5) : dbUrl;
+const db = new Database(path.resolve(dbPath));
+
+const duplicates = db.query(`
+  SELECT anonymous_id, date, COUNT(*) as count
+  FROM daily_completions
+  GROUP BY anonymous_id, date
+  HAVING count > 1
+`).all() as { anonymous_id: string; date: string; count: number }[];
+
+if (duplicates.length === 0) {
+  console.log('No duplicates found.');
+  process.exit(0);
+}
+
+console.log(`Found ${duplicates.length} duplicate group(s):`);
+
+const deleteStmt = db.query(`
+  DELETE FROM daily_completions
+  WHERE anonymous_id = $anonymous_id AND date = $date
+    AND id NOT IN (
+      SELECT id FROM daily_completions
+      WHERE anonymous_id = $anonymous_id AND date = $date
+      ORDER BY completed_at ASC
+      LIMIT 1
+    )
+`);
+
+for (const { anonymous_id, date, count } of duplicates) {
+  deleteStmt.run({ $anonymous_id: anonymous_id, $date: date });
+  console.log(`  ${anonymous_id} / ${date}: kept earliest, deleted ${count - 1} row(s) (had ${count})`);
+}
+
+console.log('Done.');
+db.close();

src/lib/components/GuessesTable.svelte

@@ -1,20 +1,8 @@
 <script lang="ts">
 	import { bibleBooks } from "$lib/types/bible";
+	import { getFirstLetter, type Guess } from "$lib/utils/game";
 	import Container from "./Container.svelte";
 
-	interface Guess {
-		book: {
-			id: string;
-			name: string;
-			testament: string;
-			section: string;
-		};
-		testamentMatch: boolean;
-		sectionMatch: boolean;
-		adjacent: boolean;
-		firstLetterMatch: boolean;
-	}
-
 	let {
 		guesses,
 		correctBookId,
@@ -28,11 +16,6 @@
 		return "bg-red-500 border-red-600";
 	}
 
-	function getFirstLetter(bookName: string): string {
-		const match = bookName.match(/[a-zA-Z]/);
-		return match ? match[0] : bookName[0];
-	}
-
 	function getBoxContent(
 		guess: Guess,
 		column: "book" | "firstLetter" | "testament" | "section",

src/lib/components/Imposter.svelte

@@ -7,11 +7,11 @@
 		imposterIndex: number;
 	}
 
-	let data: ImposterData | null = null;
-	let clicked: boolean[] = [];
-	let gameOver = false;
-	let loading = true;
-	let error: string | null = null;
+	let data: ImposterData | null = $state(null);
+	let clicked: boolean[] = $state([]);
+	let gameOver = $state(false);
+	let loading = $state(true);
+	let error: string | null = $state(null);
 
 	async function loadGame() {
 		try {
@@ -92,7 +92,7 @@
 	{:else if error}
 		<div class="error">
 			<p>Error: {error}</p>
-			<button on:click={newGame}>Retry</button>
+			<button onclick={newGame}>Retry</button>
 		</div>
 	{:else if data}
 		<!-- <div class="instructions">
@@ -106,7 +106,7 @@
 						class:clicked={clicked[i]}
 						class:correct={clicked[i] && i === data.imposterIndex}
 						class:wrong={clicked[i] && i !== data.imposterIndex}
-						on:click={() => handleClick(i)}
+						onclick={() => handleClick(i)}
 						disabled={gameOver}
 					>
 						{formatVerse(verse)}
@@ -119,7 +119,7 @@
 		</div>
 		{#if gameOver}
 			<div class="result">
-				<button on:click={newGame}>New Game</button>
+				<button onclick={newGame}>New Game</button>
 			</div>
 		{/if}
 	{/if}

src/lib/index.ts

@@ -1,8 +1,3 @@
 // place files you want to import through the `$lib` alias in this folder.
 
 export * from './utils/game';
-export { default as VerseDisplay } from './components/VerseDisplay.svelte';
-export { default as SearchInput } from './components/SearchInput.svelte';
-export { default as GuessesTable } from './components/GuessesTable.svelte';
-export { default as WinScreen } from './components/WinScreen.svelte';
-export { default as Feedback } from './components/Feedback.svelte';

src/lib/server/db/schema.ts

@@ -37,13 +37,14 @@ export const dailyCompletions = sqliteTable('daily_completions', {
 	anonymousId: text('anonymous_id').notNull(),
 	date: text('date').notNull(),
 	guessCount: integer('guess_count').notNull(),
+	guesses: text('guesses'), // nullable; only stored for logged-in users
 	completedAt: integer('completed_at', { mode: 'timestamp' }).notNull(),
-}, (table) => ({
-	anonymousIdDateIndex: index('anonymous_id_date_idx').on(table.anonymousId, table.date),
-	dateIndex: index('date_idx').on(table.date),
-	dateGuessIndex: index('date_guess_idx').on(table.date, table.guessCount),
+}, (table) => [
+	index('anonymous_id_date_idx').on(table.anonymousId, table.date),
+	index('date_idx').on(table.date),
+	index('date_guess_idx').on(table.date, table.guessCount),
 	// Ensures schema matches the database migration and prevents duplicate submissions
-	uniqueAnonymousIdDate: unique('daily_completions_anonymous_id_date_unique').on(table.anonymousId, table.date),
-}));
+	unique('daily_completions_anonymous_id_date_unique').on(table.anonymousId, table.date),
+]);
 
 export type DailyCompletion = typeof dailyCompletions.$inferSelect;

src/lib/stores/game-persistence.svelte.ts

@@ -0,0 +1,148 @@
+import { browser } from "$app/environment";
+import { evaluateGuess, generateUUID, type Guess } from "$lib/utils/game";
+
+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;
+}
+
+export function createGamePersistence(
+	getDate: () => string,
+	getReference: () => string,
+	getCorrectBookId: () => string,
+	getUserId: () => string | undefined,
+) {
+	let guesses = $state<Guess[]>([]);
+	let anonymousId = $state("");
+	let statsSubmitted = $state(false);
+	let chapterGuessCompleted = $state(false);
+	let chapterCorrect = $state(false);
+
+	// Initialize anonymous ID and load persisted flags
+	$effect(() => {
+		if (!browser) return;
+
+		const userId = getUserId();
+		// CRITICAL: If user is logged in, ALWAYS use their user ID
+		if (userId) {
+			anonymousId = userId;
+		} else {
+			anonymousId = getOrCreateAnonymousId();
+		}
+
+		if ((window as any).umami) {
+			(window as any).umami.identify(anonymousId);
+		}
+
+		const date = getDate();
+		const reference = getReference();
+
+		statsSubmitted = localStorage.getItem(`bibdle-stats-submitted-${date}`) === "true";
+
+		const chapterGuessKey = `bibdle-chapter-guess-${reference}`;
+		chapterGuessCompleted = localStorage.getItem(chapterGuessKey) !== null;
+		if (chapterGuessCompleted) {
+			const saved = localStorage.getItem(chapterGuessKey);
+			if (saved) {
+				const data = JSON.parse(saved);
+				const match = reference.match(/\s(\d+):/);
+				const correctChapter = match ? parseInt(match[1], 10) : 1;
+				chapterCorrect = data.selectedChapter === correctChapter;
+			}
+		}
+	});
+
+	// Load saved guesses from localStorage
+	$effect(() => {
+		if (!browser) return;
+
+		const date = getDate();
+		const correctBookId = getCorrectBookId();
+		const key = `bibdle-guesses-${date}`;
+		const saved = localStorage.getItem(key);
+		if (!saved) {
+			guesses = [];
+			return;
+		}
+
+		let savedIds: string[] = JSON.parse(saved);
+		savedIds = Array.from(new Set(savedIds));
+		guesses = savedIds
+			.map((bookId) => evaluateGuess(bookId, correctBookId))
+			.filter((g): g is Guess => g !== null);
+	});
+
+	// Save guesses to localStorage whenever they change
+	$effect(() => {
+		if (!browser) return;
+		const date = getDate();
+		localStorage.setItem(
+			`bibdle-guesses-${date}`,
+			JSON.stringify(guesses.map((g) => g.book.id)),
+		);
+	});
+
+	function markStatsSubmitted() {
+		if (!browser) return;
+		statsSubmitted = true;
+		localStorage.setItem(`bibdle-stats-submitted-${getDate()}`, "true");
+	}
+
+	function markWinTracked() {
+		if (!browser) return;
+		const key = `bibdle-win-tracked-${getDate()}`;
+		if (localStorage.getItem(key) === "true") return false;
+		localStorage.setItem(key, "true");
+		return true;
+	}
+
+	function isWinAlreadyTracked(): boolean {
+		if (!browser) return false;
+		return localStorage.getItem(`bibdle-win-tracked-${getDate()}`) === "true";
+	}
+
+	function hydrateFromServer(guessIds: string[]) {
+		if (!browser) return;
+		const correctBookId = getCorrectBookId();
+		const date = getDate();
+		guesses = guessIds
+			.map((bookId) => evaluateGuess(bookId, correctBookId))
+			.filter((g): g is Guess => g !== null);
+		// Persist to localStorage so subsequent loads on this device skip the server check
+		localStorage.setItem(`bibdle-guesses-${date}`, JSON.stringify(guessIds));
+	}
+
+	function onChapterGuessCompleted() {
+		if (!browser) return;
+		chapterGuessCompleted = true;
+		const reference = getReference();
+		const chapterGuessKey = `bibdle-chapter-guess-${reference}`;
+		const saved = localStorage.getItem(chapterGuessKey);
+		if (saved) {
+			const data = JSON.parse(saved);
+			const match = reference.match(/\s(\d+):/);
+			const correctChapter = match ? parseInt(match[1], 10) : 1;
+			chapterCorrect = data.selectedChapter === correctChapter;
+		}
+	}
+
+	return {
+		get guesses() { return guesses; },
+		set guesses(v: Guess[]) { guesses = v; },
+		get anonymousId() { return anonymousId; },
+		get statsSubmitted() { return statsSubmitted; },
+		get chapterGuessCompleted() { return chapterGuessCompleted; },
+		get chapterCorrect() { return chapterCorrect; },
+		markStatsSubmitted,
+		markWinTracked,
+		isWinAlreadyTracked,
+		onChapterGuessCompleted,
+		hydrateFromServer,
+	};
+}

src/lib/utils/game.ts

@@ -1,5 +1,13 @@
 import { bibleBooks, type BibleBook } from '$lib/types/bible';
 
+export interface Guess {
+	book: BibleBook;
+	testamentMatch: boolean;
+	sectionMatch: boolean;
+	adjacent: boolean;
+	firstLetterMatch: boolean;
+}
+
 export function getBookById(id: string): BibleBook | undefined {
 	return bibleBooks.find((b) => b.id === id);
 }
@@ -10,7 +18,47 @@ export function isAdjacent(id1: string, id2: string): boolean {
 	return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
 }
 
-export function getGrade(numGuesses: number, popularity: number): string {
+export function getFirstLetter(bookName: string): string {
+	const match = bookName.match(/[a-zA-Z]/);
+	return match ? match[0] : bookName[0];
+}
+
+export function evaluateGuess(guessBookId: string, correctBookId: string): Guess | null {
+	const book = getBookById(guessBookId);
+	const correctBook = getBookById(correctBookId);
+	if (!book || !correctBook) return null;
+
+	const testamentMatch = book.testament === correctBook.testament;
+	const sectionMatch = book.section === correctBook.section;
+	const adjacent = isAdjacent(guessBookId, 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();
+
+	return {
+		book,
+		testamentMatch,
+		sectionMatch,
+		adjacent,
+		firstLetterMatch,
+	};
+}
+
+export function getGrade(numGuesses: number): string {
 	if (numGuesses === 1) return "S+";
 	if (numGuesses === 2) return "A+";
 	if (numGuesses === 3) return "A";

src/lib/utils/share.ts

@@ -0,0 +1,65 @@
+import type { Guess } from './game';
+
+export function generateShareText(params: {
+	guesses: Guess[];
+	correctBookId: string;
+	dailyVerseDate: string;
+	grade: string;
+	chapterCorrect: boolean;
+	isLoggedIn: boolean;
+	userStreak?: number;
+	origin: string;
+}): string {
+	const { guesses, correctBookId, dailyVerseDate, grade, chapterCorrect, isLoggedIn, userStreak, origin } = params;
+
+	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",
+	});
+	const formattedDate = dateFormatter.format(
+		new Date(`${dailyVerseDate}T00:00:00`),
+	);
+
+	const bookEmoji = isLoggedIn ? "📜" : "📖";
+
+	const lines = [
+		`${bookEmoji} Bibdle | ${formattedDate} ${bookEmoji}`,
+		`${grade} (${guesses.length} ${guesses.length === 1 ? "guess" : "guesses"})`,
+	];
+
+	if (isLoggedIn && userStreak !== undefined) {
+		lines.push(`🔥 ${userStreak} day streak`);
+	}
+
+	lines.push(
+		`${emojis}${guesses.length === 1 && chapterCorrect ? " ⭐" : ""}`,
+		origin,
+	);
+
+	return lines.join("\n");
+}
+
+export async function shareResult(shareText: string): Promise<void> {
+	if ("share" in navigator) {
+		await (navigator as any).share({ text: shareText });
+	} else {
+		await (navigator as any).clipboard.writeText(shareText);
+	}
+}
+
+export async function copyToClipboard(shareText: string): Promise<void> {
+	await (navigator as any).clipboard.writeText(shareText);
+}

src/lib/utils/stats-client.ts

@@ -0,0 +1,68 @@
+export interface StatsData {
+	solveRank: number;
+	guessRank: number;
+	totalSolves: number;
+	averageGuesses: number;
+	tiedCount: number;
+	percentile: number;
+	guesses?: string[]; // Present when fetching an existing completion (cross-device sync)
+}
+
+export async function submitCompletion(params: {
+	anonymousId: string;
+	date: string;
+	guessCount: number;
+	guesses: string[];
+}): Promise<StatsData | null> {
+	try {
+		const response = await fetch("/api/submit-completion", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(params),
+		});
+
+		const result = await response.json();
+
+		if (result.success && result.stats) {
+			return result.stats;
+		}
+
+		if (response.status === 409) {
+			// Already submitted from another device — fetch existing stats
+			return fetchExistingStats({ anonymousId: params.anonymousId, date: params.date });
+		}
+
+		if (result.error) {
+			console.error("Stats server error:", result.error);
+		}
+		return null;
+	} catch (err) {
+		console.error("Stats submission failed:", err);
+		return null;
+	}
+}
+
+export async function fetchExistingStats(params: {
+	anonymousId: string;
+	date: string;
+}): Promise<StatsData | null> {
+	try {
+		const response = await fetch(
+			`/api/stats?anonymousId=${params.anonymousId}&date=${params.date}`,
+		);
+
+		const result = await response.json();
+
+		if (result.success && result.stats) {
+			return result.stats;
+		}
+
+		if (result.error) {
+			console.error("Stats server error:", result.error);
+		}
+		return null;
+	} catch (err) {
+		console.error("Stats fetch failed:", err);
+		return null;
+	}
+}

src/routes/+page.server.ts

@@ -3,21 +3,10 @@ import { db } from '$lib/server/db';
 import { dailyCompletions } from '$lib/server/db/schema';
 import { eq, asc } from 'drizzle-orm';
 import { fail } from '@sveltejs/kit';
-import { getBookById } from '$lib/server/bible';
-import { getVerseForDate } from '$lib/server/daily-verse';
 import crypto from 'node:crypto';
 
 export const load: PageServerLoad = async ({ locals }) => {
-	// Use UTC date for initial SSR; client will fetch timezone-correct verse if needed
-	const dateStr = new Date().toISOString().split('T')[0];
-
-	const dailyVerse = await getVerseForDate(dateStr);
-	const correctBook = getBookById(dailyVerse.bookId) ?? null;
-
 	return {
-		dailyVerse,
-		correctBookId: dailyVerse.bookId,
-		correctBook,
 		user: locals.user,
 		session: locals.session
 	};

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();
-		}
-
-		// 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);
+		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();
 			}
-
-	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 || !anonymousId || statsData) {
-			console.log("Basic conditions not met");
+		if (
+			!browser ||
+			!isWon ||
+			!persistence.anonymousId ||
+			statsData ||
+			!persistence.statsSubmitted
+		)
 			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
+		fetchExistingStats({
+			anonymousId: persistence.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),
+		}).then((data) => {
+			statsData = data;
+		});
 	});
 
-				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);
+	// 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;
+		crossDeviceCheckDate = dailyVerse.date;
+		fetchExistingStats({
+			anonymousId: persistence.anonymousId,
+			date: dailyVerse.date,
+		}).then((data) => {
+			if (data?.guesses?.length) {
+				persistence.hydrateFromServer(data.guesses);
+				statsData = data;
+				persistence.markStatsSubmitted();
 			}
-			} catch (err) {
-				console.error("Stats submission failed:", err);
-			}
-		}
-
-		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} />

src/routes/+page.ts

@@ -0,0 +1,23 @@
+import type { PageLoad } from './$types';
+
+// Disable SSR so the load function runs on the client with the correct local date
+export const ssr = false;
+
+export const load: PageLoad = async ({ fetch, data }) => {
+	const localDate = new Date().toLocaleDateString("en-CA");
+
+	const res = await fetch('/api/daily-verse', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ date: localDate }),
+	});
+
+	const result = await res.json();
+
+	return {
+		...data,
+		dailyVerse: result.dailyVerse,
+		correctBookId: result.correctBookId,
+		correctBook: result.correctBook,
+	};
+};

src/routes/api/daily-verse/+server.ts

@@ -7,8 +7,11 @@ export const POST: RequestHandler = async ({ request }) => {
 	const body = await request.json();
 	const { date } = body;
 
-	// Use the date provided by the client (already calculated in their timezone)
-	const dateStr = date || new Date().toISOString().split('T')[0];
+	if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+		return json({ error: 'A valid date (YYYY-MM-DD) is required' }, { status: 400 });
+	}
+
+	const dateStr = date;
 
 	const dailyVerse = await getVerseForDate(dateStr);
 	const correctBook = getBookById(dailyVerse.bookId) ?? null;

src/routes/api/stats/+server.ts

@@ -0,0 +1,63 @@
+import type { RequestHandler } from './$types';
+import { db } from '$lib/server/db';
+import { dailyCompletions } from '$lib/server/db/schema';
+import { and, eq, asc } from 'drizzle-orm';
+import { json } from '@sveltejs/kit';
+
+export const GET: RequestHandler = async ({ url }) => {
+	try {
+		const anonymousId = url.searchParams.get('anonymousId');
+		const date = url.searchParams.get('date');
+
+		if (!anonymousId || !date) {
+			return json({ error: 'Invalid data' }, { status: 400 });
+		}
+
+		const userCompletions = await db
+			.select()
+			.from(dailyCompletions)
+			.where(and(
+				eq(dailyCompletions.anonymousId, anonymousId),
+				eq(dailyCompletions.date, date)
+			))
+			.limit(1);
+
+		if (userCompletions.length === 0) {
+			return json({ error: 'No completion found' }, { status: 404 });
+		}
+
+		const userCompletion = userCompletions[0];
+		const guessCount = userCompletion.guessCount;
+
+		const allCompletions = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.date, date))
+			.orderBy(asc(dailyCompletions.completedAt));
+
+		const totalSolves = allCompletions.length;
+
+		const solveRank = allCompletions.findIndex(c => c.anonymousId === anonymousId) + 1;
+
+		const betterGuesses = allCompletions.filter(c => c.guessCount < guessCount).length;
+		const guessRank = betterGuesses + 1;
+
+		const tiedCount = allCompletions.filter(c => c.guessCount === guessCount && c.anonymousId !== anonymousId).length;
+
+		const totalGuesses = allCompletions.reduce((sum, c) => sum + c.guessCount, 0);
+		const averageGuesses = Math.round((totalGuesses / totalSolves) * 10) / 10;
+
+		const betterOrEqualCount = allCompletions.filter(c => c.guessCount <= guessCount).length;
+		const percentile = Math.round((betterOrEqualCount / totalSolves) * 100);
+
+		const guesses = userCompletion.guesses ? JSON.parse(userCompletion.guesses) : undefined;
+
+		return json({
+			success: true,
+			stats: { solveRank, guessRank, totalSolves, averageGuesses, tiedCount, percentile, guesses }
+		});
+	} catch (err) {
+		console.error('Error fetching stats:', err);
+		return json({ error: 'Failed to fetch stats' }, { status: 500 });
+	}
+};

src/routes/api/submit-completion/+server.ts

@@ -1,13 +1,13 @@
 import type { RequestHandler } from './$types';
 import { db } from '$lib/server/db';
 import { dailyCompletions } from '$lib/server/db/schema';
-import { and, eq, asc } from 'drizzle-orm';
+import { eq, asc } from 'drizzle-orm';
 import { json } from '@sveltejs/kit';
 import crypto from 'node:crypto';
 
 export const POST: RequestHandler = async ({ request }) => {
 	try {
-		const { anonymousId, date, guessCount } = await request.json();
+		const { anonymousId, date, guessCount, guesses } = await request.json();
 
 		// Validation
 		if (!anonymousId || !date || typeof guessCount !== 'number' || guessCount < 1) {
@@ -23,6 +23,7 @@ export const POST: RequestHandler = async ({ request }) => {
 				anonymousId,
 				date,
 				guessCount,
+				guesses: Array.isArray(guesses) ? JSON.stringify(guesses) : null,
 				completedAt,
 			});
 		} catch (err: any) {
@@ -68,67 +69,3 @@ export const POST: RequestHandler = async ({ request }) => {
 		return json({ error: 'Failed to submit completion' }, { status: 500 });
 	}
 };
-
-
-
-export const GET: RequestHandler = async ({ url }) => {
-	try {
-		const anonymousId = url.searchParams.get('anonymousId');
-		const date = url.searchParams.get('date');
-
-		if (!anonymousId || !date) {
-			return json({ error: 'Invalid data' }, { status: 400 });
-		}
-
-		const userCompletions = await db
-			.select()
-			.from(dailyCompletions)
-			.where(and(
-				eq(dailyCompletions.anonymousId, anonymousId),
-				eq(dailyCompletions.date, date)
-			))
-			.limit(1);
-
-		if (userCompletions.length === 0) {
-			return json({ error: 'No completion found' }, { status: 404 });
-		}
-
-		const userCompletion = userCompletions[0];
-		const guessCount = userCompletion.guessCount;
-
-		// Calculate statistics
-		const allCompletions = await db
-			.select()
-			.from(dailyCompletions)
-			.where(eq(dailyCompletions.date, date))
-			.orderBy(asc(dailyCompletions.completedAt));
-
-		const totalSolves = allCompletions.length;
-
-		// Solve rank: position in time-ordered list
-		const solveRank = allCompletions.findIndex(c => c.anonymousId === anonymousId) + 1;
-
-		// Guess rank: count how many had FEWER guesses (ties get same rank)
-		const betterGuesses = allCompletions.filter(c => c.guessCount < guessCount).length;
-		const guessRank = betterGuesses + 1;
-
-		// Count ties: how many have the SAME guessCount (excluding self)
-		const tiedCount = allCompletions.filter(c => c.guessCount === guessCount && c.anonymousId !== anonymousId).length;
-
-		// Average guesses
-		const totalGuesses = allCompletions.reduce((sum, c) => sum + c.guessCount, 0);
-		const averageGuesses = Math.round((totalGuesses / totalSolves) * 10) / 10;
-
-		// Percentile: what percentage of people you beat (100 - your rank percentage)
-		const betterOrEqualCount = allCompletions.filter(c => c.guessCount <= guessCount).length;
-		const percentile = Math.round((betterOrEqualCount / totalSolves) * 100);
-
-		return json({
-			success: true,
-			stats: { solveRank, guessRank, totalSolves, averageGuesses, tiedCount, percentile }
-		});
-	} catch (err) {
-		console.error('Error fetching stats:', err);
-		return json({ error: 'Failed to fetch stats' }, { status: 500 });
-	}
-};

svelte.config.js

@@ -10,9 +10,8 @@ const config = {
 	kit: {
 		adapter: adapter(),
 		csrf: {
-			// Disabled because Apple Sign In uses cross-origin form_post.
-			// The Apple callback route has its own CSRF protection via state + cookie.
-			checkOrigin: false
+			// Allow Apple Sign In cross-origin form_post callback
+			trustedOrigins: ['https://appleid.apple.com']
 		}
 	}
 };