add First Letter column with special epistle handling

src/lib/components/GuessesTable.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { bibleBooks } from "$lib/types/bible";
+
   interface Guess {
     book: {
       id: string;
@@ -9,6 +11,7 @@
     testamentMatch: boolean;
     sectionMatch: boolean;
     adjacent: boolean;
+    firstLetterMatch: boolean;
   }
 
   let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
@@ -24,11 +27,28 @@
 
   function getBoxContent(
     guess: Guess,
-    column: "book" | "testament" | "section",
+    column: "book" | "firstLetter" | "testament" | "section",
   ): string {
     switch (column) {
       case "book":
         return guess.book.name;
+      case "firstLetter":
+        // Check if this is the special Epistles + "1" case
+        const correctBook = bibleBooks.find((b) => b.id === correctBookId);
+        const correctIsEpistlesWithNumber =
+          (correctBook?.section === "Pauline Epistles" ||
+            correctBook?.section === "General Epistles") &&
+          correctBook.name[0] === "1";
+        const guessStartsWithNumber = guess.book.name[0] === "1";
+
+        if (
+          correctIsEpistlesWithNumber &&
+          guessStartsWithNumber &&
+          guess.firstLetterMatch
+        ) {
+          return "Yes"; // Special wordplay case
+        }
+        return guess.book.name[0]; // Normal case: just show the first letter
       case "testament":
         return (
           guess.book.testament.charAt(0).toUpperCase() +
@@ -43,29 +63,34 @@
 {#if hasGuesses}
   <div class="space-y-3">
     <!-- Column Headers -->
-    <div class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-800">
+    <div class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400">
       <div
-        class="flex-1 text-center text-sm font-semibold text-gray-700"
+        class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
       >
         Book
       </div>
       <div
-        class="flex-1 text-center text-sm font-semibold text-gray-700"
+        class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
       >
         Testament
       </div>
       <div
-        class="flex-1 text-center text-sm font-semibold text-gray-700"
+        class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
       >
         Section
       </div>
+      <div
+        class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+      >
+        First Letter
+      </div>
     </div>
 
     {#each guesses as guess, rowIndex (guess.book.id)}
       <div class="flex gap-2 justify-center">
         <!-- Book Column -->
         <div
-          class="flex-1 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-xs sm:text-sm md:text-base shadow-md animate-flip-in {getBoxColor(
+          class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
             guess.book.id === correctBookId,
           )}"
           style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
@@ -79,7 +104,7 @@
 
         <!-- Testament Column -->
         <div
-          class="flex-1 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-xs sm:text-sm md:text-base shadow-md animate-flip-in {getBoxColor(
+          class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
             guess.testamentMatch,
           )}"
           style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
@@ -93,7 +118,7 @@
 
         <!-- Section Column -->
         <div
-          class="relative flex-1 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-xs sm:text-sm md:text-base shadow-md animate-flip-in {getBoxColor(
+          class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
             guess.sectionMatch,
             guess.adjacent,
           )}"
@@ -108,6 +133,20 @@
             {/if}
           </span>
         </div>
+
+        <!-- First Letter Column -->
+        <div
+          class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
+            guess.firstLetterMatch,
+          )}"
+          style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
+        >
+          <span
+            class="text-center leading-tight px-1"
+            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
+            >{getBoxContent(guess, "firstLetter")}</span
+          >
+        </div>
       </div>
     {/each}
   </div>

src/routes/+page.svelte

@@ -17,6 +17,7 @@
     testamentMatch: boolean;
     sectionMatch: boolean;
     adjacent: boolean;
+    firstLetterMatch: boolean;
   }
 
   let { data }: PageProps = $props();
@@ -88,6 +89,15 @@
     const sectionMatch = book.section === correctBook.section;
     const adjacent = isAdjacent(bookId, correctBookId);
     
+    // Special case: if correct book is Epistles + starts with "1", 
+    // any guess starting with "1" counts as first letter match
+    const correctIsEpistlesWithNumber = correctBook.section === "Epistles" && correctBook.name[0] === "1";
+    const guessStartsWithNumber = book.name[0] === "1";
+    
+    const firstLetterMatch = correctIsEpistlesWithNumber && guessStartsWithNumber
+      ? true
+      : book.name[0].toUpperCase() === correctBook.name[0].toUpperCase();
+
     console.log(
       `Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
     );
@@ -110,6 +120,7 @@
         testamentMatch,
         sectionMatch,
         adjacent,
+        firstLetterMatch,
       },
       ...guesses,
     ];
@@ -181,11 +192,21 @@
         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 === "Epistles" && correctBook.name[0] === "1";
+        const guessStartsWithNumber = book.name[0] === "1";
+        
+        const firstLetterMatch = correctIsEpistlesWithNumber && guessStartsWithNumber
+          ? true
+          : book.name[0].toUpperCase() === correctBook.name[0].toUpperCase();
+        
         return {
           book,
           testamentMatch,
           sectionMatch,
           adjacent,
+          firstLetterMatch,
         };
       });
     }