silly little BIBDLE title animation

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>

src/lib/components/WinScreen.svelte

@@ -27,7 +27,7 @@
 
   let bookName = $derived(getBookById(correctBookId)?.name ?? "");
   let hasWebShare = $derived(
-		typeof navigator !== "undefined" && "share" in navigator,
+    typeof navigator !== "undefined" && "share" in navigator
   );
   let copySuccess = $state(false);
 
@@ -44,7 +44,7 @@
     // Special case for first try success
     if (guessCount === 1) {
       const n = Math.random();
-			if (n < 0.95) {
+      if (n < 0.99) {
         return "🤯 First try! 🤯";
       } else {
         return "‼️ Axios ‼️";
@@ -53,7 +53,7 @@
 
     const totalWeight = congratulationsMessages.reduce(
       (sum, msg) => sum + msg.weight,
-			0,
+      0
     );
     let random = Math.random() * totalWeight;
 
@@ -79,8 +79,8 @@
     {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
+    The verse is from <span class="font-black text-xl sm:text-2xl md:text-3xl"
+      >{bookName}</span
     >
   </p>
   <p
@@ -135,8 +135,7 @@
         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.
+        You rank <span class="">{toOrdinal(statsData.guessRank)}</span> in guesses.
       </p>
       <p class="opacity-90">
         Average: <span class="font-semibold"

src/routes/+page.svelte

@@ -10,6 +10,7 @@
   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 {
@@ -45,11 +46,8 @@
   let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
   let grade = $derived(
     isWon
-			? getGrade(
-					guesses.length,
-					getBookById(correctBookId)?.popularity ?? 0,
-				)
-			: "",
+      ? getGrade(guesses.length, getBookById(correctBookId)?.popularity ?? 0)
+      : ""
   );
 
   function getBookById(id: string): BibleBook | undefined {
@@ -76,7 +74,7 @@
     const adjacent = isAdjacent(book.id, correctBookId);
 
     console.log(
-			`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
+      `Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
     );
 
     guesses = [
@@ -100,8 +98,7 @@
 
     // 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 r = window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
       const v = c === "x" ? r : (r & 0x3) | 0x8;
       return v.toString(16);
     });
@@ -160,7 +157,7 @@
     if (!browser) return;
     localStorage.setItem(
       `bibdle-guesses-${dailyVerse.date}`,
-			JSON.stringify(guesses.map((g) => g.book.id)),
+      JSON.stringify(guesses.map((g) => g.book.id))
     );
   });
 
@@ -185,7 +182,7 @@
       (async () => {
         try {
           const response = await fetch(
-						`/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`,
+            `/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`
           );
           const result = await response.json();
           console.log("Stats response:", result);
@@ -195,7 +192,7 @@
             statsData = result.stats;
             localStorage.setItem(
               `bibdle-stats-submitted-${dailyVerse.date}`,
-							"true",
+              "true"
             );
           } else if (result.error) {
             console.error("Server error:", result.error);
@@ -239,7 +236,7 @@
           statsSubmitted = true;
           localStorage.setItem(
             `bibdle-stats-submitted-${dailyVerse.date}`,
-						"true",
+            "true"
           );
         } else if (result.error) {
           console.error("Server error:", result.error);
@@ -273,7 +270,7 @@
       year: "numeric",
     });
     const formattedDate = dateFormatter.format(
-			new Date(`${dailyVerse.date}T00:00:00`),
+      new Date(`${dailyVerse.date}T00:00:00`)
     );
     const siteUrl = window.location.origin;
     return [
@@ -355,7 +352,8 @@
     <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>
+      <TitleAnimation />
+      <span class="font-normal">{isDev ? "dev" : ""}</span>
     </h1>
 
     <VerseDisplay {data} {isWon} />

todo.md

@@ -8,12 +8,12 @@
 - 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
@@ -39,10 +39,13 @@ I never really followed through with what he asked. The Metropolis of Boston Cam
 
 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
 
@@ -52,6 +55,7 @@ I created Bibdle from a combination of two things. The first is my lifelong desi
 - 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
 
-------------------------------
+---