redirect to bibdle.dev and components

src/routes/+page.svelte

@@ -12,6 +12,13 @@
 	import { browser } from "$app/environment";
 	import { fade } from "svelte/transition";
 
+	import VerseDisplay from "$lib/components/VerseDisplay.svelte";
+	import SearchInput from "$lib/components/SearchInput.svelte";
+	import GuessesTable from "$lib/components/GuessesTable.svelte";
+	import WinScreen from "$lib/components/WinScreen.svelte";
+	import Feedback from "$lib/components/Feedback.svelte";
+	import { getGrade } from "$lib/utils/game";
+
 	let { data }: PageProps = $props();
 
 	let dailyVerse = $derived(data.dailyVerse);
@@ -22,6 +29,7 @@
 	let searchQuery = $state("");
 
 	let copied = $state(false);
+	let isDev = $state(false);
 
 	let anonymousId = $state("");
 	let statsSubmitted = $state(false);
@@ -32,12 +40,6 @@
 		averageGuesses: number;
 	} | null>(null);
 
-	let filteredBooks = $derived(
-		bibleBooks.filter((book) =>
-			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
-		),
-	);
-
 	let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
 
 	let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
@@ -90,27 +92,6 @@
 		searchQuery = "";
 	}
 
-	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-";
-	}
-
-	function toOrdinal(n: number): string {
-		if (n >= 11 && n <= 13) {
-			return `${n}th`;
-		}
-		const mod = n % 10;
-		const suffix =
-			mod === 1 ? "st" : mod === 2 ? "nd" : mod === 3 ? "rd" : "th";
-		return `${n}${suffix}`;
-	}
-
 	function generateUUID(): string {
 		// Try native randomUUID if available
 		if (typeof window.crypto.randomUUID === "function") {
@@ -145,6 +126,11 @@
 		statsSubmitted = localStorage.getItem(statsKey) === "true";
 	});
 
+	$effect(() => {
+		if (!browser) return;
+		isDev = window.location.host === "192.168.0.42:5174";
+	});
+
 	// Load saved guesses
 	$effect(() => {
 		if (!browser) return;
@@ -334,212 +320,37 @@
 </script>
 
 <svelte:head>
-	<title>Bibdle</title>
+	<title>Bibdle{isDev ? " dev" : ""}</title>
 </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)] max-w-md sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto px-2 sm:px-4"
+		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 text-gray-800 p-8 sm:p-12 drop-shadow-lg"
 		>
-			Bibdle
+			Bibdle <span class="font-normal">{isDev ? "dev" : ""}</span>
 		</h1>
 
-		<!-- Verse Display -->
-		<div
-			class="bg-white rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto"
-		>
-			<blockquote
-				class="text-xl sm:text-2xl leading-relaxed text-gray-700 italic 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>
+		<VerseDisplay {data} {isWon} />
 
 		{#if !isWon}
-			<!-- Book Search -->
-			<div class="mb-12">
-				<input
-					bind:value={searchQuery}
-					placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
-					class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
-					onkeydown={(e) => {
-						if (e.key === "Enter" && filteredBooks.length > 0) {
-							submitGuess(filteredBooks[0].id);
-						}
-					}}
-				/>
-				{#if searchQuery && filteredBooks.length > 0}
-					<ul
-						class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
-					>
-						{#each filteredBooks as book}
-							<li>
-								<button
-									class="w-full p-4 sm:p-5 text-left {guessedIds.has(
-										book.id,
-									)
-										? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
-										: 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
-									onclick={() => submitGuess(book.id)}
-								>
-									<span
-										class="font-semibold {guessedIds.has(
-											book.id,
-										)
-											? 'line-through text-gray-500'
-											: ''}">{book.name}</span
-									>
-									<span class="ml-auto text-sm opacity-75"
-										>({book.testament.toUpperCase()})</span
-									>
-								</button>
-							</li>
-						{/each}
-					</ul>
-				{:else if searchQuery}
-					<p class="mt-4 text-center text-gray-500 p-8">
-						No books found
-					</p>
-				{/if}
-			</div>
+			<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
 		{:else}
-			<div
-				class="mb-12 p-8 sm:p-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
-				in:fade={{ delay: 500 }}
-			>
-				<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
-					🎉 Congratulations! 🎉
-				</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"
-						>{getBookById(correctBookId)?.name}</span
-					>
-				</p>
-				<!-- <p class="text-xl opacity-90">{dailyVerse.reference}</p> -->
-				<p
-					class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
-				>
-					Your grade: {grade}
-				</p>
-
-				<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>
-
-				<!-- Statistics Display -->
-				{#if statsData}
-					<div
-						class="mt-6 space-y-2 text-lg"
-						in:fade={{ delay: 800 }}
-					>
-						<p class="font-semibold">
-							You were the {toOrdinal(statsData.solveRank)} person
-							to solve today.
-						</p>
-						<p class="font-semibold">
-							You rank <span class="text-2xl font-black"
-								>{toOrdinal(statsData.guessRank)}</span
-							> in guesses.
-						</p>
-						<!-- <p class="opacity-90">
-							{statsData.totalSolves}
-							{statsData.totalSolves === 1
-								? "person has"
-								: "people have"} solved today
-						</p> -->
-						<p class="opacity-90">
-							Average: <span class="font-semibold"
-								>{statsData.averageGuesses.toFixed(1)}</span
-							> guesses
-						</p>
-					</div>
-				{:else if !statsSubmitted}
-					<div class="mt-6 text-sm opacity-80">
-						Submitting stats...
-					</div>
-				{/if}
-			</div>
+			<WinScreen
+				{grade}
+				{statsData}
+				{correctBookId}
+				{handleShare}
+				bind:copied
+				{statsSubmitted}
+			/>
 		{/if}
 
-		<!-- Guesses Grid -->
-		<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
-			<table class="w-full">
-				<thead>
-					<tr class="bg-linear-to-r from-gray-50 to-gray-300">
-						<th
-							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-							>Book</th
-						>
-						<th
-							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-							>Testament</th
-						>
-						<th
-							class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-							>Section</th
-						>
-					</tr>
-				</thead>
-				<tbody>
-					{#each guesses as guess (guess.book.id)}
-						<tr
-							class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
-						>
-							<td
-								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
-							>
-								{guess.book.id === correctBookId ? "✅" : "❌"}
-								{guess.book.name}
-							</td>
-							<td
-								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
-							>
-								{guess.testamentMatch ? "✅" : "🟥"}
-								{guess.book.testament.charAt(0).toUpperCase() +
-									guess.book.testament.slice(1).toLowerCase()}
-							</td>
-							<td
-								class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
-							>
-								{guess.sectionMatch ? "✅" : "🟥"}
-								{guess.adjacent ? "‼️ " : ""}{guess.book
-									.section}
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
+		<GuessesTable {guesses} {correctBookId} />
 		{#if isWon}
-			<div
-				class="mt-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
-				in:fade={{ delay: 1500, duration: 1000 }}
-			>
-				Thank you so much for playing! Feel free to email me directly
-				with feedback:
-				<a
-					href="mailto:george@snail.city"
-					class="font-semibold text-blue-600 hover:text-blue-800 underline"
-					>george@snail.city</a
-				>
-			</div>
+			<Feedback />
 		{/if}
 	</div>
 </div>