From 2e7cc1fa542868e5449d4343638f2c9aab32bb6c Mon Sep 17 00:00:00 2001
From: George Powell <geohpowell@gmail.com>
Date: Tue, 23 Dec 2025 00:32:22 -0500
Subject: [PATCH] silly little BIBDLE title animation

---
 src/lib/components/TitleAnimation.svelte |  83 +++
 src/lib/components/WinScreen.svelte      | 263 +++++----
 src/routes/+page.svelte                  | 644 +++++++++++------------
 todo.md                                  |  26 +-
 4 files changed, 550 insertions(+), 466 deletions(-)
 create mode 100644 src/lib/components/TitleAnimation.svelte

diff --git a/src/lib/components/TitleAnimation.svelte b/src/lib/components/TitleAnimation.svelte
new file mode 100644
index 0000000..2741d6b
--- /dev/null
+++ b/src/lib/components/TitleAnimation.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  let hovered = $state(false);
+  let isTapped = $state(false);
+  let tapMode = $state(false);
+
+  function handleMouseEnter() {
+    if (!tapMode) {
+      hovered = true;
+    }
+  }
+
+  function handleMouseLeave() {
+    hovered = false;
+  }
+
+  function handleTap() {
+    tapMode = true;
+    isTapped = !isTapped;
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleTap();
+    }
+  }
+
+  let showExpanded = $derived(tapMode ? isTapped : hovered);
+</script>
+
+<div
+  class="title-container relative inline-block cursor-pointer"
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  onclick={handleTap}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex="0"
+>
+  <!-- BIBDLE (collapsed state) -->
+  <span
+    class="title-word absolute inset-0 text-center transition-all duration-500 ease-in-out"
+    class:opacity-0={showExpanded}
+    class:opacity-100={!showExpanded}
+  >
+    BIBDLE
+  </span>
+
+  <!-- BIBLE DAILY (expanded state) -->
+  <div
+    class="title-expanded flex flex-row items-center justify-center transition-all duration-500 ease-in-out"
+    class:opacity-0={!showExpanded}
+    class:opacity-100={showExpanded}
+  >
+    <span
+      class="transition-all duration-500 ease-in-out"
+      class:translate-x-0={!showExpanded}
+      class:-translate-x-4={showExpanded}>BIBLE</span
+    >
+    <span
+      class="transition-all duration-500 ease-in-out"
+      class:translate-x-0={!showExpanded}
+      class:translate-x-4={showExpanded}>DAILY</span
+    >
+  </div>
+</div>
+
+<style>
+  .title-container {
+    min-height: 1.5em;
+  }
+
+  .title-word,
+  .title-expanded {
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+  }
+
+  .title-expanded span {
+    display: inline-block;
+  }
+</style>
diff --git a/src/lib/components/WinScreen.svelte b/src/lib/components/WinScreen.svelte
index 695cf4c..900bd75 100644
--- a/src/lib/components/WinScreen.svelte
+++ b/src/lib/components/WinScreen.svelte
@@ -1,150 +1,149 @@
 <script lang="ts">
-	import { fade } from "svelte/transition";
-	import { getBookById, toOrdinal } from "$lib/utils/game";
+  import { fade } from "svelte/transition";
+  import { getBookById, toOrdinal } from "$lib/utils/game";
 
-	interface StatsData {
-		solveRank: number;
-		guessRank: number;
-		totalSolves: number;
-		averageGuesses: number;
-	}
+  interface StatsData {
+    solveRank: number;
+    guessRank: number;
+    totalSolves: number;
+    averageGuesses: number;
+  }
 
-	interface WeightedMessage {
-		text: string;
-		weight: number;
-	}
+  interface WeightedMessage {
+    text: string;
+    weight: number;
+  }
 
-	let {
-		grade,
-		statsData,
-		correctBookId,
-		handleShare,
-		copyToClipboard,
-		copied = $bindable(false),
-		statsSubmitted,
-		guessCount,
-	} = $props();
+  let {
+    grade,
+    statsData,
+    correctBookId,
+    handleShare,
+    copyToClipboard,
+    copied = $bindable(false),
+    statsSubmitted,
+    guessCount,
+  } = $props();
 
-	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
-	let hasWebShare = $derived(
-		typeof navigator !== "undefined" && "share" in navigator,
-	);
-	let copySuccess = $state(false);
+  let bookName = $derived(getBookById(correctBookId)?.name ?? "");
+  let hasWebShare = $derived(
+    typeof navigator !== "undefined" && "share" in navigator
+  );
+  let copySuccess = $state(false);
 
-	// List of congratulations messages with weights
-	const congratulationsMessages: WeightedMessage[] = [
-		{ text: "🎉 Congratulations! 🎉", weight: 1000 },
-		{ text: "⭐ You got it! ⭐", weight: 10 },
-		{ text: "🎉 Yup 🎉", weight: 5 },
-		{ text: "👍🏻 Very nice! 👍🏻", weight: 1 },
-	];
+  // List of congratulations messages with weights
+  const congratulationsMessages: WeightedMessage[] = [
+    { text: "🎉 Congratulations! 🎉", weight: 1000 },
+    { text: "⭐ You got it! ⭐", weight: 10 },
+    { text: "🎉 Yup 🎉", weight: 5 },
+    { text: "👍🏻 Very nice! 👍🏻", weight: 1 },
+  ];
 
-	// Function to select a random message based on weights
-	function getRandomCongratulationsMessage(): string {
-		// Special case for first try success
-		if (guessCount === 1) {
-			const n = Math.random();
-			if (n < 0.95) {
-				return "🤯 First try! 🤯";
-			} else {
-				return "‼️ Axios ‼️";
-			}
-		}
+  // Function to select a random message based on weights
+  function getRandomCongratulationsMessage(): string {
+    // Special case for first try success
+    if (guessCount === 1) {
+      const n = Math.random();
+      if (n < 0.99) {
+        return "🤯 First try! 🤯";
+      } else {
+        return "‼️ Axios ‼️";
+      }
+    }
 
-		const totalWeight = congratulationsMessages.reduce(
-			(sum, msg) => sum + msg.weight,
-			0,
-		);
-		let random = Math.random() * totalWeight;
+    const totalWeight = congratulationsMessages.reduce(
+      (sum, msg) => sum + msg.weight,
+      0
+    );
+    let random = Math.random() * totalWeight;
 
-		for (const message of congratulationsMessages) {
-			random -= message.weight;
-			if (random <= 0) {
-				return message.text;
-			}
-		}
+    for (const message of congratulationsMessages) {
+      random -= message.weight;
+      if (random <= 0) {
+        return message.text;
+      }
+    }
 
-		// Fallback to first message if something goes wrong
-		return congratulationsMessages[0].text;
-	}
+    // Fallback to first message if something goes wrong
+    return congratulationsMessages[0].text;
+  }
 
-	// Generate the congratulations message
-	let congratulationsMessage = $derived(getRandomCongratulationsMessage());
+  // Generate the congratulations message
+  let congratulationsMessage = $derived(getRandomCongratulationsMessage());
 </script>
 
 <div
-	class="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"
+  class="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"
 >
-	<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
-		{congratulationsMessage}
-	</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>
+  <h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
+    {congratulationsMessage}
+  </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>
 
-	{#if hasWebShare}
-		<button
-			onclick={handleShare}
-			data-umami-event="Share"
-			class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
-		>
-			📤 Share
-		</button>
-		<button
-			onclick={() => {
-				copyToClipboard();
-				copySuccess = true;
-				setTimeout(() => {
-					copySuccess = false;
-				}, 3000);
-			}}
-			data-umami-event="Copy to Clipboard"
-			class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
-				copySuccess
-					? "bg-green-400/50 hover:bg-green-500/60"
-					: "bg-white/20 hover:bg-white/30"
-			}`}
-		>
-			{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
-		</button>
-	{:else}
-		<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>
-	{/if}
+  {#if hasWebShare}
+    <button
+      onclick={handleShare}
+      data-umami-event="Share"
+      class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
+    >
+      📤 Share
+    </button>
+    <button
+      onclick={() => {
+        copyToClipboard();
+        copySuccess = true;
+        setTimeout(() => {
+          copySuccess = false;
+        }, 3000);
+      }}
+      data-umami-event="Copy to Clipboard"
+      class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
+        copySuccess
+          ? "bg-green-400/50 hover:bg-green-500/60"
+          : "bg-white/20 hover:bg-white/30"
+      }`}
+    >
+      {copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
+    </button>
+  {:else}
+    <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>
+  {/if}
 
-	<!-- Statistics Display -->
-	{#if statsData}
-		<div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
-			<p class="font-regular">
-				You were the {toOrdinal(statsData.solveRank)} person to solve today.
-			</p>
-			<p class="font-regular">
-				You rank <span class="">{toOrdinal(statsData.guessRank)}</span> in
-				guesses.
-			</p>
-			<p class="opacity-90">
-				Average: <span class="font-semibold"
-					>{Math.ceil(statsData.averageGuesses)}</span
-				> guesses
-			</p>
-		</div>
-	{:else if !statsSubmitted}
-		<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
-	{/if}
+  <!-- Statistics Display -->
+  {#if statsData}
+    <div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
+      <p class="font-regular">
+        You were the {toOrdinal(statsData.solveRank)} person to solve today.
+      </p>
+      <p class="font-regular">
+        You rank <span class="">{toOrdinal(statsData.guessRank)}</span> in guesses.
+      </p>
+      <p class="opacity-90">
+        Average: <span class="font-semibold"
+          >{Math.ceil(statsData.averageGuesses)}</span
+        > guesses
+      </p>
+    </div>
+  {:else if !statsSubmitted}
+    <div class="mt-6 text-sm opacity-80">Submitting stats...</div>
+  {/if}
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4b17c4a..7b8ff90 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,384 +1,382 @@
 <script lang="ts">
-	import { bibleBooks, type BibleBook } from "$lib/types/bible";
+  import { bibleBooks, type BibleBook } from "$lib/types/bible";
 
-	import type { PageProps } from "./$types";
-	import { browser } from "$app/environment";
+  import type { PageProps } from "./$types";
+  import { browser } from "$app/environment";
 
-	import VerseDisplay from "$lib/components/VerseDisplay.svelte";
-	import SearchInput from "$lib/components/SearchInput.svelte";
-	import GuessesTable from "$lib/components/GuessesTable.svelte";
-	import CountdownTimer from "$lib/components/CountdownTimer.svelte";
-	import WinScreen from "$lib/components/WinScreen.svelte";
-	import Feedback from "$lib/components/Feedback.svelte";
-	import { getGrade } from "$lib/utils/game";
+  import VerseDisplay from "$lib/components/VerseDisplay.svelte";
+  import SearchInput from "$lib/components/SearchInput.svelte";
+  import GuessesTable from "$lib/components/GuessesTable.svelte";
+  import CountdownTimer from "$lib/components/CountdownTimer.svelte";
+  import WinScreen from "$lib/components/WinScreen.svelte";
+  import Feedback from "$lib/components/Feedback.svelte";
+  import TitleAnimation from "$lib/components/TitleAnimation.svelte";
+  import { getGrade } from "$lib/utils/game";
 
-	interface Guess {
-		book: BibleBook;
-		testamentMatch: boolean;
-		sectionMatch: boolean;
-		adjacent: boolean;
-	}
+  interface Guess {
+    book: BibleBook;
+    testamentMatch: boolean;
+    sectionMatch: boolean;
+    adjacent: boolean;
+  }
 
-	let { data }: PageProps = $props();
+  let { data }: PageProps = $props();
 
-	let dailyVerse = $derived(data.dailyVerse);
-	let correctBookId = $derived(data.correctBookId);
+  let dailyVerse = $derived(data.dailyVerse);
+  let correctBookId = $derived(data.correctBookId);
 
-	let guesses = $state<Guess[]>([]);
+  let guesses = $state<Guess[]>([]);
 
-	let searchQuery = $state("");
+  let searchQuery = $state("");
 
-	let copied = $state(false);
-	let isDev = $state(false);
+  let copied = $state(false);
+  let isDev = $state(false);
 
-	let anonymousId = $state("");
-	let statsSubmitted = $state(false);
-	let statsData = $state<{
-		solveRank: number;
-		guessRank: number;
-		totalSolves: number;
-		averageGuesses: number;
-	} | null>(null);
+  let anonymousId = $state("");
+  let statsSubmitted = $state(false);
+  let statsData = $state<{
+    solveRank: number;
+    guessRank: number;
+    totalSolves: number;
+    averageGuesses: number;
+  } | null>(null);
 
-	let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
+  let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
 
-	let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
-	let grade = $derived(
-		isWon
-			? getGrade(
-					guesses.length,
-					getBookById(correctBookId)?.popularity ?? 0,
-				)
-			: "",
-	);
+  let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
+  let grade = $derived(
+    isWon
+      ? getGrade(guesses.length, getBookById(correctBookId)?.popularity ?? 0)
+      : ""
+  );
 
-	function getBookById(id: string): BibleBook | undefined {
-		return bibleBooks.find((b) => b.id === id);
-	}
+  function getBookById(id: string): BibleBook | undefined {
+    return bibleBooks.find((b) => b.id === id);
+  }
 
-	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);
-	}
+  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);
+  }
 
-	function submitGuess(bookId: string) {
-		if (guesses.some((g) => g.book.id === bookId)) return;
+  function submitGuess(bookId: string) {
+    if (guesses.some((g) => g.book.id === bookId)) return;
 
-		const book = getBookById(bookId);
-		if (!book) return;
+    const book = getBookById(bookId);
+    if (!book) return;
 
-		const correctBook = getBookById(correctBookId);
-		if (!correctBook) return;
+    const correctBook = getBookById(correctBookId);
+    if (!correctBook) return;
 
-		const testamentMatch = book.testament === correctBook.testament;
-		const sectionMatch = book.section === correctBook.section;
-		const adjacent = isAdjacent(book.id, correctBookId);
+    const testamentMatch = book.testament === correctBook.testament;
+    const sectionMatch = book.section === correctBook.section;
+    const adjacent = isAdjacent(book.id, correctBookId);
 
-		console.log(
-			`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
-		);
+    console.log(
+      `Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
+    );
 
-		guesses = [
-			{
-				book,
-				testamentMatch,
-				sectionMatch,
-				adjacent,
-			},
-			...guesses,
-		];
+    guesses = [
+      {
+        book,
+        testamentMatch,
+        sectionMatch,
+        adjacent,
+      },
+      ...guesses,
+    ];
 
-		searchQuery = "";
-	}
+    searchQuery = "";
+  }
 
-	function generateUUID(): string {
-		// Try native randomUUID if available
-		if (typeof window.crypto.randomUUID === "function") {
-			return window.crypto.randomUUID();
-		}
+  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);
-		});
-	}
+    // 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;
-	}
+  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";
-	});
+  // Initialize anonymous ID
+  $effect(() => {
+    if (!browser) return;
+    anonymousId = getOrCreateAnonymousId();
+    const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
+    statsSubmitted = localStorage.getItem(statsKey) === "true";
+  });
 
-	$effect(() => {
-		if (!browser) return;
-		isDev = window.location.host === "192.168.0.42:5174";
-	});
+  $effect(() => {
+    if (!browser) return;
+    isDev = window.location.host === "192.168.0.42:5174";
+  });
 
-	// Load saved guesses
-	$effect(() => {
-		if (!browser) return;
+  // Load saved guesses
+  $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);
-				return {
-					book,
-					testamentMatch,
-					sectionMatch,
-					adjacent,
-				};
-			});
-		}
-	});
+    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);
+        return {
+          book,
+          testamentMatch,
+          sectionMatch,
+          adjacent,
+        };
+      });
+    }
+  });
 
-	$effect(() => {
-		if (!browser) return;
-		localStorage.setItem(
-			`bibdle-guesses-${dailyVerse.date}`,
-			JSON.stringify(guesses.map((g) => g.book.id)),
-		);
-	});
+  $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,
-		});
+  // 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 (!browser || !isWon || !anonymousId) {
+      console.log("Basic conditions not met");
+      return;
+    }
 
-		if (statsSubmitted && !statsData) {
-			console.log("Fetching existing stats...");
+    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);
+      (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);
-				}
-			})();
+          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;
-		}
+      return;
+    }
 
-		console.log("Submitting stats...");
+    console.log("Submitting stats...");
 
-		async function submitStats() {
-			try {
-				const payload = {
-					anonymousId,
-					date: dailyVerse.date,
-					guessCount: guesses.length,
-				};
+    async function submitStats() {
+      try {
+        const payload = {
+          anonymousId,
+          date: dailyVerse.date,
+          guessCount: guesses.length,
+        };
 
-				console.log("Sending POST request with:", payload);
+        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 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);
+        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);
-			}
-		}
+        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();
-	});
+    submitStats();
+  });
 
-	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("");
+  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",
-		});
-		const formattedDate = dateFormatter.format(
-			new Date(`${dailyVerse.date}T00:00:00`),
-		);
-		const siteUrl = window.location.origin;
-		return [
-			`📖 Bibdle | ${formattedDate} 📖`,
-			`${grade} (${guesses.length} guesses)`,
-			`${emojis}\n`,
-			siteUrl,
-		].join("\n");
-	}
+    const dateFormatter = new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+    const formattedDate = dateFormatter.format(
+      new Date(`${dailyVerse.date}T00:00:00`)
+    );
+    const siteUrl = window.location.origin;
+    return [
+      `📖 Bibdle | ${formattedDate} 📖`,
+      `${grade} (${guesses.length} guesses)`,
+      `${emojis}\n`,
+      siteUrl,
+    ].join("\n");
+  }
 
-	async function share() {
-		if (!browser) return;
+  async function share() {
+    if (!browser) return;
 
-		const shareText = generateShareText();
+    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;
-		}
-	}
+    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;
+  async function copyToClipboard() {
+    if (!browser) return;
 
-		const shareText = generateShareText();
+    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;
-		}
-	}
+    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() {
-		if (copied || !browser) return;
-		const useClipboard = !("share" in navigator);
-		if (useClipboard) {
-			copied = true;
-		}
-		share()
-			.then(() => {
-				if (useClipboard) {
-					setTimeout(() => {
-						copied = false;
-					}, 5000);
-				}
-			})
-			.catch(() => {
-				if (useClipboard) {
-					copied = false;
-				}
-			});
-	}
+  function handleShare() {
+    if (copied || !browser) return;
+    const useClipboard = !("share" in navigator);
+    if (useClipboard) {
+      copied = true;
+    }
+    share()
+      .then(() => {
+        if (useClipboard) {
+          setTimeout(() => {
+            copied = false;
+          }, 5000);
+        }
+      })
+      .catch(() => {
+        if (useClipboard) {
+          copied = false;
+        }
+      });
+  }
 </script>
 
 <svelte:head>
-	<title>Bibdle – A daily bible game{isDev ? " (dev)" : ""}</title>
-	<meta
-		name="description"
-		content="Guess which book of the Bible a daily verse comes from. A Wordle-inspired Bible game!"
-	/>
+  <title>Bibdle – A daily bible game{isDev ? " (dev)" : ""}</title>
+  <meta
+    name="description"
+    content="Guess which book of the Bible a daily verse comes from. A Wordle-inspired Bible game!"
+  />
 </svelte:head>
 
 <div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
-	<div
-		class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] w-full max-w-3xl mx-auto px-4"
-	>
-		<h1
-			class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
-		>
-			Bibdle <span class="font-normal">{isDev ? "dev" : ""}</span>
-		</h1>
+  <div
+    class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] w-full max-w-3xl mx-auto px-4"
+  >
+    <h1
+      class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
+    >
+      <TitleAnimation />
+      <span class="font-normal">{isDev ? "dev" : ""}</span>
+    </h1>
 
-		<VerseDisplay {data} {isWon} />
+    <VerseDisplay {data} {isWon} />
 
-		{#if !isWon}
-			<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
-		{:else}
-			<WinScreen
-				{grade}
-				{statsData}
-				{correctBookId}
-				{handleShare}
-				{copyToClipboard}
-				bind:copied
-				{statsSubmitted}
-				guessCount={guesses.length}
-			/>
-			<CountdownTimer />
-		{/if}
+    {#if !isWon}
+      <SearchInput bind:searchQuery {guessedIds} {submitGuess} />
+    {:else}
+      <WinScreen
+        {grade}
+        {statsData}
+        {correctBookId}
+        {handleShare}
+        {copyToClipboard}
+        bind:copied
+        {statsSubmitted}
+        guessCount={guesses.length}
+      />
+      <CountdownTimer />
+    {/if}
 
-		<GuessesTable {guesses} {correctBookId} />
-		{#if isWon}
-			<Feedback />
-		{/if}
-	</div>
+    <GuessesTable {guesses} {correctBookId} />
+    {#if isWon}
+      <Feedback />
+    {/if}
+  </div>
 </div>
diff --git a/todo.md b/todo.md
index bfa95ec..9563dec 100644
--- a/todo.md
+++ b/todo.md
@@ -8,20 +8,20 @@
 - maybe remove rank and average guesses
 - only show "top 10 / 5 / 1%" if there are more than 10/20/100 guesses?
 
-- hovering or tapping BIBDLE fades in and out to BIBLE DAILY
-
 - Difficulty levels
-- difficult mode (guess old or new testament, first try *only*)
+- difficult mode (guess old or new testament, first try _only_)
 - impossible mode (1894 scrivener koine greek NT or some hebrew version for OT) three guesses only
 
+- "login to see your stats, unlock practice mode, and more"
+
 # bibdle unlimited
 
 - Practice mode: Unlimited verses
 - Create public or private leaderboards
-- Passport book with badges: 
-	- Guess each Gospel first try
-	- "Guessed all Gospels", "Perfect week", "Old Testament expert"
-	- Theologian: Guess each book first try
+- Passport book with badges:
+  - Guess each Gospel first try
+  - "Guessed all Gospels", "Perfect week", "Old Testament expert"
+  - Theologian: Guess each book first try
 
 # places to send
 
@@ -33,25 +33,29 @@
 
 As a young camper at the Metropolis of Boston Camp, I remember His Eminence Metropolitan Methodios would visit every Sunday. He was often surrounded by important people for his entire time there, so I never gathered the courage to introduce myself, but his homilies during Liturgy always stood out to me. In some ways, they differed year after year, but a majority of his message remained strikingly familiar. "Take ten minutes to read the Bible every day," he asked. "Just ten minutes. Go somewhere quiet, turn off the TV (then iPod, then cell phone), and read in peace and quiet."
 
-Despite His Eminence's otherwise cool and intimidating aura, it never came across as a demand or an order. Yet it wasn't exactly polite either. It sounded closer to pleading... like to his core, he knew how important it was, what he was asking — how important it would be for our lives. 
+Despite His Eminence's otherwise cool and intimidating aura, it never came across as a demand or an order. Yet it wasn't exactly polite either. It sounded closer to pleading... like to his core, he knew how important it was, what he was asking — how important it would be for our lives.
 
 I never really followed through with what he asked. The Metropolis of Boston Camp was my true home throughout my childhood, teenage years, and young adulthood. Leaving it every summer, and bringing the lessons, experiences, and faith I'd gained over the weeks and years home to the monotony of home remains the challenge of my life so far.
 
 I created Bibdle from a combination of two things. The first is my lifelong desire to create experiences that people love; to create experiences that bring people together. The second is my guilt for never reading the Bible at home like Metropolitan Methodios asked. I hope it helps you with this challenge as much as it's helped me!
 
-------------------------------
+---
 
 # done
 
+## december 22nd
+
+- hovering or tapping BIBDLE fades in and out to BIBLE DAILY
 
 ## december 21st
 
 - better guess emoji consistency (removed ambiguous red squares)
-- HH:MM until next verse 
+- HH:MM until next verse
 - triodion font for verse (PT Serif)
 - custom verses for Christmas Eve and Christmas
 
 ## before december 19th
+
 - improve design (uniform column widths on desktop)
 - moved to bibdle.com
 - v2: avg guesses per bible verse updating daily (on completion: avg. guesses: 6)
@@ -61,4 +65,4 @@ I created Bibdle from a combination of two things. The first is my lifelong desi
 - site title
 - deploy
 
-------------------------------
\ No newline at end of file
+---