switched to NKJV, improved grading, improved styling

src/lib/components/GuessesTable.svelte

@@ -82,6 +82,12 @@
     animation: shine 5s infinite;
   }
 
+  .animate-shine.fade-in {
+    animation:
+      fadeIn 0.5s ease-out,
+      shine 5s infinite;
+  }
+
   @keyframes fadeIn {
     from {
       opacity: 0;

src/lib/components/VerseDisplay.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
-	import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
+  import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
 
-	let { data, isWon }: { data: PageData; isWon: boolean } = $props();
-	let dailyVerse = $derived(data.dailyVerse);
+  let { data, isWon }: { data: PageData; isWon: boolean } = $props();
+  let dailyVerse = $derived(data.dailyVerse);
+  let displayReference = $derived(
+    dailyVerse.reference.replace(/^Psalms /, "Psalm ")
+  );
 </script>
 
-<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 w-full">
-	<blockquote
-		class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
-	>
-		{dailyVerse.verseText}
-	</blockquote>
-	{#if isWon}
-		<p class="text-center text-lg text-green-600 font-bold mt-4">
-			{dailyVerse.reference}
-		</p>
-	{/if}
+<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}
+  </blockquote>
+  {#if isWon}
+    <p class="text-center text-lg! big-text text-green-600! font-bold mt-8">
+      {displayReference}
+    </p>
+  {/if}
 </div>

src/lib/components/WinScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
-  import { getBookById, toOrdinal } from "$lib/utils/game";
+  import { getBookById, toOrdinal, getNextGradeMessage } from "$lib/utils/game";
 
   interface StatsData {
     solveRank: number;
@@ -128,20 +128,50 @@
     </button>
   {/if}
 
+  <p class="pt-6 big-text text-gray-100!">
+    {getNextGradeMessage(guessCount)}
+  </p>
+
   <!-- 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 class="mt-6" in:fade={{ delay: 800 }}>
+      <div class="grid grid-cols-3 gap-4 gap-x-8 text-center">
+        <!-- Solve Rank Column -->
+        <div class="flex flex-col">
+          <div class="text-3xl sm:text-4xl font-black">
+            #{statsData.solveRank}
+          </div>
+          <div class="text-xs sm:text-sm opacity-90 mt-1">
+            You were the {toOrdinal(statsData.solveRank)} person to solve today
+          </div>
+        </div>
+
+        <!-- Guess Rank Column -->
+        <div class="flex flex-col">
+          <div class="text-3xl sm:text-4xl font-black">
+            {Math.round(
+              ((statsData.totalSolves - statsData.guessRank + 1) /
+                statsData.totalSolves) *
+                100
+            )}%
+          </div>
+          <div class="text-xs sm:text-sm opacity-90 mt-1">
+            You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
+            total solves
+          </div>
+        </div>
+
+        <!-- Average Column -->
+        <div class="flex flex-col">
+          <div class="text-3xl sm:text-4xl font-black">
+            {statsData.averageGuesses}
+          </div>
+          <div class="text-xs sm:text-sm opacity-90 mt-1">
+            People guessed correctly after {statsData.averageGuesses} guesses on
+            average
+          </div>
+        </div>
+      </div>
     </div>
   {:else if !statsSubmitted}
     <div class="mt-6 text-sm opacity-80">Submitting stats...</div>

src/lib/server/bible-api.ts

@@ -1,45 +1,30 @@
 import type { DailyVerse } from '$lib/server/db/schema';
 import { getBookById } from './bible';
+import { getRandomVerses, formatReference } from './xml-bible';
 
 type ApiVerse = Omit<DailyVerse, 'id' | 'date' | 'createdAt'>;
 
 export async function fetchRandomVerse(): Promise<ApiVerse> {
-	// Step 1: Fetch random verse to get starting position
-	const randomRes = await fetch('https://bible-api.com/data/web/random');
-	if (!randomRes.ok) {
-		throw new Error(`Failed to fetch random verse: ${randomRes.status}`);
-	}
-	const randomData = await randomRes.json() as any;
-	const randomVerse = randomData.random_verse;
-	if (!randomVerse || !randomVerse.book_id) {
-		throw new Error('Invalid random verse data');
+	// Get 3 random verses from the local XML Bible
+	const verseData = getRandomVerses(3);
+
+	if (!verseData) {
+		throw new Error('Failed to get random verses from Bible XML');
 	}
 
-	const bookId = randomVerse.book_id as string;
-	const chapter = randomVerse.chapter as number;
-	const verse = randomVerse.verse as number;
-	const endVerse = verse + 2;
-
-	// Step 2: Fetch 3 consecutive verses starting from random
-	const rangeUrl = `https://bible-api.com/${bookId}${chapter}:${verse}-${endVerse}`;
-	const rangeRes = await fetch(rangeUrl);
-	if (!rangeRes.ok) {
-		throw new Error(`Failed to fetch verse range: ${rangeRes.status}`);
-	}
-	const rangeData = await rangeRes.json() as any;
-
-	const reference = rangeData.reference as string;
-	const verses = rangeData.verses as any[];
-	if (!verses || verses.length === 0) {
-		throw new Error('No verses in range');
-	}
-	const verseText = verses.map((v: any) => v.text).join(' ');
+	const { bookId, bookName, chapter, startVerse, endVerse, verses } = verseData;
 
 	// Validate bookId
 	if (!getBookById(bookId)) {
-		throw new Error(`Unknown book ID from API: ${bookId}`);
+		throw new Error(`Unknown book ID: ${bookId}`);
 	}
 
+	// Format the reference string (e.g., "Matthew 1:1-3")
+	const reference = formatReference(bookName, chapter, startVerse, endVerse);
+
+	// Join verses with spaces
+	const verseText = verses.join(' ');
+
 	return {
 		bookId,
 		reference,

src/lib/server/bible.ts

@@ -1,10 +1,26 @@
 import type { BibleBook, Testament, BibleSection } from '$lib/types/bible';
 import { bibleBooks } from '$lib/types/bible';
 
+// Book number (1-66) to book ID mapping derived from bibleBooks order property
+export const bookNumberToId: Record<number, string> = bibleBooks.reduce((acc, book) => {
+	acc[book.order] = book.id;
+	return acc;
+}, {} as Record<number, string>);
+
+// Book ID to book number mapping (reverse lookup)
+export const bookIdToNumber: Record<string, number> = bibleBooks.reduce((acc, book) => {
+	acc[book.id] = book.order;
+	return acc;
+}, {} as Record<string, number>);
+
 export function getBookById(id: string): BibleBook | undefined {
 	return bibleBooks.find((book) => book.id === id);
 }
 
+export function getBookByNumber(number: number): BibleBook | undefined {
+	return bibleBooks.find((book) => book.order === number);
+}
+
 export function getBooksByTestament(testament: Testament): BibleBook[] {
 	return bibleBooks.filter((book) => book.testament === testament);
 }

src/lib/server/xml-bible.ts

@@ -0,0 +1,212 @@
+import { XMLParser } from 'fast-xml-parser';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { bookNumberToId, getBookByNumber } from './bible';
+
+// XML parser configuration
+const parser = new XMLParser({
+	ignoreAttributes: false,
+	attributeNamePrefix: '',
+	textNodeName: '_text',
+	parseAttributeValue: true,
+	trimValues: true,
+	isArray: (name) => ['chapter', 'verse'].includes(name)
+});
+
+// Cache for parsed Bible data to avoid re-reading the file
+let cachedBible: any = null;
+
+interface VerseData {
+	number: number;
+	_text: string;
+}
+
+interface ChapterData {
+	number: number;
+	verse: VerseData[];
+}
+
+interface BookData {
+	number: number;
+	chapter: ChapterData[];
+}
+
+interface TestamentData {
+	name: string;
+	book: BookData[];
+}
+
+interface BibleData {
+	bible: {
+		testament: TestamentData[];
+	};
+}
+
+/**
+ * Load and parse the Bible XML file
+ */
+function loadBibleXml(): BibleData {
+	if (cachedBible) {
+		return cachedBible;
+	}
+
+	const xmlPath = join(process.cwd(), 'EnglishNKJBible.xml');
+	const xmlContent = readFileSync(xmlPath, 'utf-8');
+	cachedBible = parser.parse(xmlContent) as BibleData;
+	return cachedBible;
+}
+
+/**
+ * Get a specific book from the Bible XML
+ */
+function getBook(bookNumber: number): BookData | null {
+	const bible = loadBibleXml();
+
+	// Old Testament books are 1-39, New Testament are 40-66
+	const testamentIndex = bookNumber <= 39 ? 0 : 1;
+	const testament = bible.bible.testament[testamentIndex];
+
+	if (!testament) {
+		return null;
+	}
+
+	// Find the book by number within the testament
+	const bookIndex = bookNumber <= 39 ? bookNumber - 1 : bookNumber - 40;
+	return testament.book[bookIndex] || null;
+}
+
+/**
+ * Get a specific chapter from a book
+ */
+function getChapter(bookNumber: number, chapterNumber: number): ChapterData | null {
+	const book = getBook(bookNumber);
+	if (!book) {
+		return null;
+	}
+
+	return book.chapter.find((ch) => ch.number === chapterNumber) || null;
+}
+
+/**
+ * Get the number of verses in a specific chapter
+ */
+function getVerseCount(bookNumber: number, chapterNumber: number): number {
+	const chapter = getChapter(bookNumber, chapterNumber);
+	return chapter ? chapter.verse.length : 0;
+}
+
+/**
+ * Get the number of chapters in a specific book
+ */
+function getChapterCount(bookNumber: number): number {
+	const book = getBook(bookNumber);
+	return book ? book.chapter.length : 0;
+}
+
+/**
+ * Extract consecutive verses from a specific location
+ */
+function extractVerses(
+	bookNumber: number,
+	chapterNumber: number,
+	startVerse: number,
+	count: number
+): string[] {
+	const chapter = getChapter(bookNumber, chapterNumber);
+	if (!chapter) {
+		return [];
+	}
+
+	const verses: string[] = [];
+	for (let i = 0; i < count; i++) {
+		const verseIndex = startVerse - 1 + i; // Convert to 0-based index
+		if (verseIndex >= chapter.verse.length) {
+			break;
+		}
+		verses.push(chapter.verse[verseIndex]._text);
+	}
+
+	return verses;
+}
+
+/**
+ * Get a random book number (1-66)
+ */
+function getRandomBookNumber(): number {
+	return Math.floor(Math.random() * 66) + 1;
+}
+
+/**
+ * Get a random chapter number for a specific book
+ */
+function getRandomChapterNumber(bookNumber: number): number {
+	const chapterCount = getChapterCount(bookNumber);
+	return Math.floor(Math.random() * chapterCount) + 1;
+}
+
+/**
+ * Get a random starting verse number for a specific chapter
+ * Ensures there are enough verses for the requested count
+ */
+function getRandomStartVerse(bookNumber: number, chapterNumber: number, verseCount: number): number {
+	const totalVerses = getVerseCount(bookNumber, chapterNumber);
+	const maxStartVerse = Math.max(1, totalVerses - verseCount + 1);
+	return Math.floor(Math.random() * maxStartVerse) + 1;
+}
+
+/**
+ * Get a random set of verses from the Bible
+ * Returns 3 consecutive verses by default
+ */
+export function getRandomVerses(count: number = 3): {
+	bookId: string;
+	bookName: string;
+	chapter: number;
+	startVerse: number;
+	endVerse: number;
+	verses: string[];
+} | null {
+	// Try up to 10 times to find a valid passage
+	for (let attempt = 0; attempt < 10; attempt++) {
+		const bookNumber = getRandomBookNumber();
+		const book = getBookByNumber(bookNumber);
+
+		if (!book) {
+			continue;
+		}
+
+		const chapterNumber = getRandomChapterNumber(bookNumber);
+		const verseCount = getVerseCount(bookNumber, chapterNumber);
+
+		// Skip chapters that don't have enough verses
+		if (verseCount < count) {
+			continue;
+		}
+
+		const startVerse = getRandomStartVerse(bookNumber, chapterNumber, count);
+		const verses = extractVerses(bookNumber, chapterNumber, startVerse, count);
+
+		if (verses.length === count) {
+			return {
+				bookId: book.id,
+				bookName: book.name,
+				chapter: chapterNumber,
+				startVerse,
+				endVerse: startVerse + count - 1,
+				verses
+			};
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Format a reference string from verse data
+ */
+export function formatReference(bookName: string, chapter: number, startVerse: number, endVerse: number): string {
+	if (startVerse === endVerse) {
+		return `${bookName} ${chapter}:${startVerse}`;
+	}
+	return `${bookName} ${chapter}:${startVerse}-${endVerse}`;
+}

src/lib/utils/game.ts

@@ -11,14 +11,23 @@ export function isAdjacent(id1: string, id2: string): boolean {
 }
 
 export function getGrade(numGuesses: number, popularity: number): string {
-	const difficulty = 14 - popularity;
-	const performanceScore = Math.max(0, 10 - numGuesses);
-	const totalScore = performanceScore + difficulty * 0.8;
-	if (totalScore >= 14) return "🟢 S";
-	if (totalScore >= 11) return "🟢 A";
-	if (totalScore >= 8) return "🟡 B";
-	if (totalScore >= 5) return "🟠 C";
-	return "🔴 C-";
+	if (numGuesses === 1) return "S+";
+	if (numGuesses === 2) return "A+";
+	if (numGuesses === 3) return "A";
+	if (numGuesses >= 4 && numGuesses <= 6) return "B+";
+	if (numGuesses >= 7 && numGuesses <= 10) return "B";
+	if (numGuesses >= 11 && numGuesses <= 15) return "C+";
+	return "C";
+}
+
+export function getNextGradeMessage(numGuesses: number): string {
+	if (numGuesses === 1) return "";
+	if (numGuesses === 2) return "Next grade: 1 guess or less";
+	if (numGuesses === 3) return "Next grade: 2 guesses or less";
+	if (numGuesses >= 4 && numGuesses <= 6) return "Next grade: 3 guesses or less";
+	if (numGuesses >= 7 && numGuesses <= 10) return "Next grade: 6 guesses or less";
+	if (numGuesses >= 11 && numGuesses <= 15) return "Next grade: 10 guesses or less";
+	return "Next grade: 15 guesses or less";
 }
 
 export function toOrdinal(n: number): string {

src/routes/+page.svelte

@@ -125,7 +125,7 @@
 
   $effect(() => {
     if (!browser) return;
-    isDev = window.location.host === "192.168.0.42:5174";
+    isDev = window.location.host === "localhost:5173";
   });
 
   // Load saved guesses
@@ -335,6 +335,21 @@
         }
       });
   }
+
+  function clearLocalStorage() {
+    if (!browser) return;
+    // Clear all bibdle-related localStorage items
+    const keysToRemove: string[] = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith("bibdle-")) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach((key) => localStorage.removeItem(key));
+    // Reload the page to reset state
+    window.location.reload();
+  }
 </script>
 
 <svelte:head>
@@ -376,5 +391,13 @@
     {#if isWon}
       <Feedback />
     {/if}
+    {#if isDev}
+      <button
+        onclick={clearLocalStorage}
+        class="mt-4 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-bold transition-colors"
+      >
+        Clear LocalStorage
+      </button>
+    {/if}
   </div>
 </div>

src/routes/layout.css

@@ -2,10 +2,18 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
 
-@theme {  
-	--font-triodion: "PT Serif", serif; 
+@theme {
+	--font-triodion: "PT Serif", serif;
 }
 
 html, body {
 	background: oklch(98.11% 0.02777 158.93);
+}
+
+.big-text {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.2em;
+	color: rgb(107 114 128);
+	font-weight: 700;
 }

src/routes/random/+page.server.ts

@@ -0,0 +1,25 @@
+import type { PageServerLoad } from './$types';
+import { fetchRandomVerse } from '$lib/server/bible-api';
+import { getBookById } from '$lib/server/bible';
+
+export const load: PageServerLoad = async () => {
+	const apiVerse = await fetchRandomVerse();
+
+	// Create a dailyVerse-like object for VerseDisplay
+	const dailyVerse = {
+		id: 'debug-' + Date.now(),
+		date: new Date().toLocaleDateString('en-CA', { timeZone: 'America/New_York' }),
+		bookId: apiVerse.bookId,
+		reference: apiVerse.reference,
+		verseText: apiVerse.verseText,
+		createdAt: new Date()
+	};
+
+	const correctBook = getBookById(dailyVerse.bookId) ?? null;
+
+	return {
+		dailyVerse,
+		correctBookId: dailyVerse.bookId,
+		correctBook
+	};
+};

src/routes/random/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { PageProps } from "./$types";
+
+  import VerseDisplay from "$lib/components/VerseDisplay.svelte";
+
+  let { data }: PageProps = $props();
+
+  let dailyVerse = $derived(data.dailyVerse);
+</script>
+
+<svelte:head>
+  <title>Random Verse - Bibdle</title>
+</svelte:head>
+
+<div class="min-h-screen bg-linear-to-br from-blue-50 to-indigo-100 py-12 px-4">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="text-4xl font-bold text-center text-gray-800 mb-8">
+      Random Verse Debug
+    </h1>
+
+    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
+      <h2 class="text-xl font-semibold text-gray-700 mb-4">Verse Details</h2>
+      <div class="space-y-2 text-gray-600">
+        <p><strong>Book ID:</strong> {dailyVerse.bookId}</p>
+        <p><strong>Reference:</strong> {dailyVerse.reference}</p>
+        <p><strong>Verse Text:</strong> {dailyVerse.verseText}</p>
+      </div>
+    </div>
+
+    <VerseDisplay {data} isWon={true} />
+  </div>
+</div>