Merge github/main into embeddings

src/lib/components/VerseDisplay.svelte

@@ -6,13 +6,16 @@
   let displayReference = $derived(
     dailyVerse.reference.replace(/^Psalms /, "Psalm ")
   );
+  let displayVerseText = $derived(
+    dailyVerse.verseText.replace(/^([a-z])/, (c) => c.toUpperCase())
+  );
 </script>
 
 <div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-4 sm:mb-12 w-full">
   <blockquote
     class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
   >
-    {dailyVerse.verseText}
+    {displayVerseText}
   </blockquote>
   {#if isWon}
     <p class="text-center text-lg! big-text text-green-600! font-bold mt-8">

src/lib/components/WinScreen.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
   import { getBookById, toOrdinal, getNextGradeMessage } from "$lib/utils/game";
+  import { onMount } from "svelte";
 
   interface StatsData {
     solveRank: number;
@@ -33,10 +34,10 @@
 
   // 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 },
+    { text: "Congratulations!", weight: 10 },
+    { text: "You got it!", weight: 1000 },
+    { text: "Yup,", weight: 100 },
+    { text: "Very nice!", weight: 1 },
   ];
 
   // Function to select a random message based on weights
@@ -45,9 +46,9 @@
     if (guessCount === 1) {
       const n = Math.random();
       if (n < 0.99) {
-        return "🤯 First try! 🤯";
+        return "🌟 First try! 🌟";
       } else {
-        return "‼️ Axios ‼️";
+        return "🗣️ Axios! 🗣️";
       }
     }
 
@@ -75,13 +76,12 @@
 <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 fade-in"
 >
-  <h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
+  <!-- <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
-    >
+  </h2> -->
+  <p class="text-xl sm:text-3xl md:text-4xl">
+    {congratulationsMessage} 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"
@@ -167,8 +167,8 @@
             {statsData.averageGuesses}
           </div>
           <div class="text-xs sm:text-sm opacity-90 mt-1">
-            People guessed correctly after {statsData.averageGuesses} guesses on
-            average
+            People guessed correctly after {statsData.averageGuesses}
+            {statsData.averageGuesses === 1 ? "guess" : "guesses"} on average
           </div>
         </div>
       </div>

src/routes/+page.svelte

@@ -86,6 +86,18 @@
       `Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
     );
 
+    if (guesses.length === 0) {
+      const key = `bibdle-first-guess-${dailyVerse.date}`;
+      if (
+        localStorage.getItem(key) !== "true" &&
+        browser &&
+        (window as any).umami
+      ) {
+        (window as any).umami.track("First guess");
+        localStorage.setItem(key, "true");
+      }
+    }
+
     guesses = [
       {
         book,
@@ -260,6 +272,18 @@
     submitStats();
   });
 
+  $effect(() => {
+    if (!browser || !isWon) return;
+    const key = `bibdle-win-tracked-${dailyVerse.date}`;
+    if (localStorage.getItem(key) === "true") return;
+    if ((window as any).umami) {
+      (window as any).umami.track("Guessed correctly", {
+        totalGuesses: guesses.length,
+      });
+    }
+    localStorage.setItem(key, "true");
+  });
+
   function generateShareText(): string {
     const emojis = guesses
       .slice()
@@ -362,11 +386,12 @@
 </script>
 
 <svelte:head>
-  <title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title>
-  <meta
+  <!-- <title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title> -->
+  <title>A daily bible game{isDev ? " (dev)" : ""}</title>
+  <!-- <meta
     name="description"
-    content="A Wordle-inspired Bible game (short for Bible Daily)"
-  />
+    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">

src/routes/layout.css

@@ -7,7 +7,7 @@
 }
 
 html, body {
-	background: oklch(98.11% 0.02777 158.93);
+	background: oklch(89.126% 0.06134 298.626);
 }
 
 .big-text {