add fade-in animations and conditional rendering to GuessesTable

src/lib/components/GuessesTable.svelte

@@ -1,91 +1,99 @@
 <script lang="ts">
-	interface Guess {
+  interface Guess {
-		book: {
+    book: {
-			id: string;
+      id: string;
-			name: string;
+      name: string;
-			testament: string;
+      testament: string;
-			section: string;
+      section: string;
-		};
+    };
-		testamentMatch: boolean;
+    testamentMatch: boolean;
-		sectionMatch: boolean;
+    sectionMatch: boolean;
-		adjacent: boolean;
+    adjacent: boolean;
-	}
+  }
 
-	let {
+  let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
-		guesses,
+    $props();
-		correctBookId,
+
-	}: { guesses: Guess[]; correctBookId: string } = $props();
+  let hasGuesses = $derived(guesses.length > 0);
 </script>
 
-<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
+{#if hasGuesses}
-	<table class="w-full">
+  <div class="bg-white rounded-2xl shadow-xl overflow-x-auto fade-in">
-		<thead>
+    <table class="w-full">
-			<tr class="bg-linear-to-r from-gray-50 to-gray-300">
+      <thead class="fade-in">
-				<th
+        <tr class="bg-linear-to-r from-gray-50 to-gray-300">
-					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"
+          <th
-					>Book</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"
+          <th
-					>Testament</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"
+          <th
-					>Section</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>
+        </tr>
-		<tbody>
+      </thead>
-			{#each guesses as guess (guess.book.id)}
+      <tbody>
-				<tr
+        {#each guesses as guess, index (guess.book.id)}
-					class="border-b border-gray-100 transition-colors {guess
+          <tr
-						.book.id === correctBookId
+            class="border-b border-gray-100 transition-colors {guess.book.id ===
-						? 'bg-green-200 animate-shine'
+            correctBookId
-						: 'hover:bg-gray-50'}"
+              ? '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"
+            <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}
+              {guess.book.id === correctBookId ? "✅" : "❌"}
-					</td>
+              {guess.book.name}
-					<td
+            </td>
-						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+            <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
-					>
+              {guess.testamentMatch ? "✅" : "❌"}
-						{guess.testamentMatch ? "✅" : "❌"}
+              {guess.book.testament.charAt(0).toUpperCase() +
-						{guess.book.testament.charAt(0).toUpperCase() +
+                guess.book.testament.slice(1).toLowerCase()}
-							guess.book.testament.slice(1).toLowerCase()}
+            </td>
-					</td>
+            <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
-					<td
+              {guess.sectionMatch ? "✅" : "❌"}
-						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
+              {guess.adjacent ? "‼️ " : ""}{guess.book.section}
-					>
+            </td>
-						{guess.sectionMatch ? "✅" : "❌"}
+          </tr>
-						{guess.adjacent ? "‼️ " : ""}{guess.book.section}
+        {/each}
-					</td>
+      </tbody>
-				</tr>
+    </table>
-			{/each}
+  </div>
-		</tbody>
+{/if}
-	</table>
-</div>
 
 <style>
-	@keyframes shine {
+  @keyframes shine {
-		0% {
+    0% {
-			background-position: -200% 0;
+      background-position: -200% 0;
-		}
+    }
-		100% {
+    100% {
-			background-position: 200% 0;
+      background-position: 200% 0;
-		}
+    }
-	}
+  }
 
-	.animate-shine {
+  .animate-shine {
-		background: linear-gradient(
+    background: linear-gradient(110deg, #dcffe7 45%, #f1fff5 50%, #dcffe7 55%);
-			110deg,
+    background-size: 200% 100%;
-			#dcffe7 45%,
+    animation: shine 5s infinite;
-			#f1fff5 50%,
+  }
-			#dcffe7 55%
+
-		);
+  @keyframes fadeIn {
-		background-size: 200% 100%;
+    from {
-		animation: shine 5s infinite;
+      opacity: 0;
-	}
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 0.5s ease-out;
+  }
 </style>

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>

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()}

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="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
-  <div
+  <div class="w-full max-w-3xl mx-auto 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 uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
     >

src/routes/layout.css

@@ -4,4 +4,8 @@
 
 @theme {  
 	--font-triodion: "PT Serif", serif; 
+}
+
+html, body {
+	background: oklch(98.11% 0.02777 158.93);
 }