major styling and spacing

src/lib/components/Container.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+    class?: string;
+  }
+
+  let { children, class: className = "" }: Props = $props();
+</script>
+
+<div
+  class="inline-flex flex-col items-center bg-white/50 backdrop-blur-sm rounded-2xl border border-white/50 shadow-sm {className}"
+>
+  {@render children()}
+</div>

src/lib/components/CountdownTimer.svelte

@@ -74,13 +74,11 @@
   });
 </script>
 
-<div class="text-center py-12">
+<div class="w-full">
   <div
-		class="inline-flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
-	>
-		<p
-			class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
+    class="flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm w-full"
   >
+    <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2">
       Next Verse In
     </p>
     <p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">

src/lib/components/Feedback.svelte

@@ -14,7 +14,7 @@
 	>
 </div> -->
 
-<div class="text-center py-12">
+<div class="text-center" in:fade={{ delay: 1500, duration: 1000 }}>
   <div
     class="inline-flex w-full flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
   >

src/lib/components/SearchInput.svelte

@@ -5,8 +5,8 @@
 
   let filteredBooks = $derived(
     bibleBooks.filter((book) =>
-			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
-		),
+      book.name.toLowerCase().includes(searchQuery.toLowerCase())
+    )
   );
 
   function handleKeydown(e: KeyboardEvent) {
@@ -16,7 +16,7 @@
   }
 </script>
 
-<div class="mb-12">
+<div>
   <input
     bind:value={searchQuery}
     placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
@@ -30,9 +30,7 @@
       {#each filteredBooks as book (book.id)}
         <li>
           <button
-						class="w-full p-4 sm:p-5 text-left {guessedIds.has(
-							book.id,
-						)
+            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)}

src/lib/components/VerseDisplay.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
+  import Container from "./Container.svelte";
 
   let { data, isWon }: { data: PageData; isWon: boolean } = $props();
   let dailyVerse = $derived(data.dailyVerse);
@@ -11,15 +12,17 @@
   );
 </script>
 
-<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-4 sm:mb-12 w-full">
+<Container class="w-full p-8 sm:p-12">
   <blockquote
     class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
   >
     {displayVerseText}
   </blockquote>
   {#if isWon}
-    <p class="text-center text-lg! big-text text-green-600! font-bold mt-8">
+    <p
+      class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
+    >
       {displayReference}
     </p>
   {/if}
-</div>
+</Container>

src/lib/components/WinScreen.svelte

@@ -2,6 +2,8 @@
   import { fade } from "svelte/transition";
   import { getBookById, toOrdinal, getNextGradeMessage } from "$lib/utils/game";
   import { onMount } from "svelte";
+  import Container from "./Container.svelte";
+  import CountdownTimer from "./CountdownTimer.svelte";
 
   interface StatsData {
     solveRank: number;
@@ -36,7 +38,7 @@
   const congratulationsMessages: WeightedMessage[] = [
     { text: "Congratulations!", weight: 10 },
     { text: "You got it!", weight: 1000 },
-    { text: "Yup,", weight: 100 },
+    { text: "Yup.", weight: 100 },
     { text: "Very nice!", weight: 1 },
   ];
 
@@ -73,27 +75,27 @@
   let congratulationsMessage = $derived(getRandomCongratulationsMessage());
 </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 fade-in"
+<div class="flex flex-col gap-6">
+  <Container
+    class="w-full p-8 sm:p-12 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
   >
-  <!-- <h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
-    {congratulationsMessage}
-  </h2> -->
-  <p class="text-xl sm:text-3xl md:text-4xl">
+    <p class="text-2xl sm:text-3xl md:text-4xl leading-relaxed">
       {congratulationsMessage} The verse is from
-    <span class="font-black text-xl sm:text-2xl md:text-3xl">{bookName}</span>.
+      <span class="font-black text-3xl md:text-4xl">{bookName}</span>.
     </p>
-  <p
-    class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
-  >
-    Your grade: {grade}
+    <p class="text-lg sm:text-xl md:text-2xl mt-4">
+      You guessed correctly after {guessCount}
+      {guessCount === 1 ? "guess" : "guesses"}.
+      <span class="font-bold bg-white/40 rounded px-1.5 py-0.75">{grade}</span>
     </p>
 
+    <div class="flex justify-center mt-6">
       {#if hasWebShare}
+        <!-- mobile and arc in production -->
         <button
           onclick={handleShare}
           data-umami-event="Share"
-      class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
+          class="text-2xl font-bold p-4 bg-white/70 hover:bg-white/80 rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
         >
           📤 Share
         </button>
@@ -106,42 +108,48 @@
             }, 3000);
           }}
           data-umami-event="Copy to Clipboard"
-      class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
-        copySuccess
-          ? "bg-green-400/50 hover:bg-green-500/60"
-          : "bg-white/20 hover:bg-white/30"
+          class={`text-2xl font-bold p-4 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
+            copySuccess ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
           }`}
         >
-      {copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
+          {copySuccess ? "✅ Copied!" : "📋 Copy"}
         </button>
       {:else}
+        <!-- dev mode and desktop browsers -->
         <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`}
+          data-umami-event="Copy to Clipboard"
+          class={`text-2xl font-bold p-4 ${
+            copied ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
+          } rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
         >
-      {copied ? "Copied to clipboard!" : "📤 Share"}
+          {copied ? "✅ Copied!" : "📋 Share"}
         </button>
       {/if}
+    </div>
 
-  <p class="pt-6 big-text text-gray-100!">
+    <p class="pt-6 big-text text-gray-700!">
       {getNextGradeMessage(guessCount)}
     </p>
+  </Container>
+
+  <CountdownTimer />
 
   <!-- Statistics Display -->
   {#if statsData}
-    <div class="mt-6" in:fade={{ delay: 800 }}>
-      <div class="grid grid-cols-3 gap-4 gap-x-8 text-center">
+    <Container
+      class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+    >
+      <div
+        class="grid grid-cols-3 gap-4 gap-x-8 text-center"
+        in:fade={{ delay: 800 }}
+      >
         <!-- 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">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             You were the {toOrdinal(statsData.solveRank)} person to solve today
           </div>
         </div>
@@ -155,7 +163,7 @@
                 100
             )}%
           </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
             total solves
           </div>
@@ -166,15 +174,19 @@
           <div class="text-3xl sm:text-4xl font-black">
             {statsData.averageGuesses}
           </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             People guessed correctly after {statsData.averageGuesses}
             {statsData.averageGuesses === 1 ? "guess" : "guesses"} on average
           </div>
         </div>
       </div>
-    </div>
+    </Container>
   {:else if !statsSubmitted}
-    <div class="mt-6 text-sm opacity-80">Submitting stats...</div>
+    <Container
+      class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+    >
+      <div class="text-sm opacity-80">Submitting stats...</div>
+    </Container>
   {/if}
 </div>
 

src/routes/+page.svelte

@@ -7,7 +7,6 @@
   import VerseDisplay from "$lib/components/VerseDisplay.svelte";
   import SearchInput from "$lib/components/SearchInput.svelte";
   import GuessesTable from "$lib/components/GuessesTable.svelte";
-  import CountdownTimer from "$lib/components/CountdownTimer.svelte";
   import WinScreen from "$lib/components/WinScreen.svelte";
   import Feedback from "$lib/components/Feedback.svelte";
   import TitleAnimation from "$lib/components/TitleAnimation.svelte";
@@ -408,6 +407,7 @@
       >
     </div>
 
+    <div class="flex flex-col gap-6">
       <VerseDisplay {data} {isWon} />
 
       {#if !isWon}
@@ -423,13 +423,14 @@
           {statsSubmitted}
           guessCount={guesses.length}
         />
-      <CountdownTimer />
       {/if}
 
       <GuessesTable {guesses} {correctBookId} />
+
       {#if isWon}
         <Feedback />
       {/if}
+    </div>
     {#if isDev}
       <button
         onclick={clearLocalStorage}

todo.md

@@ -1,6 +1,9 @@
 # in progress
 
-- root menu: classic / imposter mode / impossible mode (complete today's classic and imposter modes to unlock)
+- Show new/old testament after 3 guesses and section after 7 guesses
+- Verses ending in semicolons, commas, etc. will be replaced with "..."
+- For bonus points: guess the verse/psalm number
+- How do you balance rewarding knowledge vs incentivising learning?
 
 # todo
 
@@ -14,8 +17,12 @@
 
   - classic mode: identify what book the verse is from (e.g. Genesis, John, Revelations...) in as few guesses as possible.
   - imposter mode: out of four options, identify the verse that is not in the Bible
+  - OR out of four options, identify the verse that is not in the same book as the other three options
+  - OR, out of four options, drag them into the
   - impossible mode: identify which book of the bible the verse is from in less than three guesses.
 
+- The gambling aspect of hoping you get a verse you already know is VERY strong
+
 - add login + saved stats + streak etc.
 
 - add deuterocanonical books