From 93acafc2320eade46ece79ad59883059e579b2a0 Mon Sep 17 00:00:00 2001
From: George Powell <geohpowell@gmail.com>
Date: Tue, 23 Dec 2025 01:10:33 -0500
Subject: [PATCH] add fade-in animations and conditional rendering to
 GuessesTable

---
 src/lib/components/GuessesTable.svelte | 174 +++++++++++++------------
 src/lib/components/WinScreen.svelte    |  19 ++-
 src/routes/+layout.svelte              |   1 +
 src/routes/+page.svelte                |   8 +-
 src/routes/layout.css                  |   4 +
 5 files changed, 117 insertions(+), 89 deletions(-)

diff --git a/src/lib/components/GuessesTable.svelte b/src/lib/components/GuessesTable.svelte
index 8bbb841..38e5e9e 100644
--- a/src/lib/components/GuessesTable.svelte
+++ b/src/lib/components/GuessesTable.svelte
@@ -1,91 +1,99 @@
 <script lang="ts">
-	interface Guess {
-		book: {
-			id: string;
-			name: string;
-			testament: string;
-			section: string;
-		};
-		testamentMatch: boolean;
-		sectionMatch: boolean;
-		adjacent: boolean;
-	}
+  interface Guess {
+    book: {
+      id: string;
+      name: string;
+      testament: string;
+      section: string;
+    };
+    testamentMatch: boolean;
+    sectionMatch: boolean;
+    adjacent: boolean;
+  }
 
-	let {
-		guesses,
-		correctBookId,
-	}: { guesses: Guess[]; correctBookId: string } = $props();
+  let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
+    $props();
+
+  let hasGuesses = $derived(guesses.length > 0);
 </script>
 
-<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 transition-colors {guess
-						.book.id === correctBookId
-						? 'bg-green-200 animate-shine'
-						: 'hover:bg-gray-50'}"
-				>
-					<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>
+{#if hasGuesses}
+  <div class="bg-white rounded-2xl shadow-xl overflow-x-auto fade-in">
+    <table class="w-full">
+      <thead class="fade-in">
+        <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, index (guess.book.id)}
+          <tr
+            class="border-b border-gray-100 transition-colors {guess.book.id ===
+            correctBookId
+              ? 'bg-green-200 animate-shine'
+              : 'hover:bg-gray-50'} {index === 0 ? 'fade-in' : ''}"
+          >
+            <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>
+{/if}
 
 <style>
-	@keyframes shine {
-		0% {
-			background-position: -200% 0;
-		}
-		100% {
-			background-position: 200% 0;
-		}
-	}
+  @keyframes shine {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
 
-	.animate-shine {
-		background: linear-gradient(
-			110deg,
-			#dcffe7 45%,
-			#f1fff5 50%,
-			#dcffe7 55%
-		);
-		background-size: 200% 100%;
-		animation: shine 5s infinite;
-	}
+  .animate-shine {
+    background: linear-gradient(110deg, #dcffe7 45%, #f1fff5 50%, #dcffe7 55%);
+    background-size: 200% 100%;
+    animation: shine 5s infinite;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 0.5s ease-out;
+  }
 </style>
diff --git a/src/lib/components/WinScreen.svelte b/src/lib/components/WinScreen.svelte
index 900bd75..927f9f5 100644
--- a/src/lib/components/WinScreen.svelte
+++ b/src/lib/components/WinScreen.svelte
@@ -73,7 +73,7 @@
 </script>
 
 <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"
+  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">
     {congratulationsMessage}
@@ -147,3 +147,20 @@
     <div class="mt-6 text-sm opacity-80">Submitting stats...</div>
   {/if}
 </div>
+
+<style>
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 0.5s ease-out;
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3f68800..5d3de82 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,6 +11,7 @@
     defer
     src="https://umami.snail.city/script.js"
     data-website-id="5b8c31ad-71cd-4317-940b-6bccea732acc"
+    data-domains="bibdle.com,www.bibdle.com"
   ></script>
 </svelte:head>
 {@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7b8ff90..709ce4c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -338,17 +338,15 @@
 </script>
 
 <svelte:head>
-  <title>Bibdle – A daily bible game{isDev ? " (dev)" : ""}</title>
+  <title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title>
   <meta
     name="description"
     content="Guess which book of the Bible a daily verse comes from. A Wordle-inspired Bible game!"
   />
 </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)] w-full max-w-3xl mx-auto px-4"
-  >
+<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
+  <div class="w-full max-w-3xl mx-auto px-4">
     <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"
     >
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 6b37cde..1993f5d 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -4,4 +4,8 @@
 
 @theme {  
 	--font-triodion: "PT Serif", serif; 
+}
+
+html, body {
+	background: oklch(98.11% 0.02777 158.93);
 }
\ No newline at end of file