v2.1: stylistic updates & countdown timer

src/routes/+page.server.ts

@@ -9,13 +9,16 @@ import type { DailyVerse } from '$lib/server/db/schema';
 import crypto from 'node:crypto';
 
 async function getTodayVerse(): Promise<DailyVerse> {
+	// Get the current date (server-side)
 	const dateStr = new Date().toLocaleDateString('en-CA', { timeZone: 'America/New_York' });
 
+	// If there's an existing verse for the current date, return it
 	const existing = await db.select().from(dailyVerses).where(eq(dailyVerses.date, dateStr)).limit(1);
 	if (existing.length > 0) {
 		return existing[0];
 	}
 
+	// Otherwise get a new random verse
 	const apiVerse = await fetchRandomVerse();
 	const createdAt = sql`${Math.floor(Date.now() / 1000)}`;
 

src/routes/+page.svelte

@@ -7,6 +7,7 @@
 	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 { getGrade } from "$lib/utils/game";
@@ -348,7 +349,7 @@
 		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"
+			class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
 		>
 			Bibdle <span class="font-normal">{isDev ? "dev" : ""}</span>
 		</h1>
@@ -368,6 +369,7 @@
 				{statsSubmitted}
 				guessCount={guesses.length}
 			/>
+			<CountdownTimer />
 		{/if}
 
 		<GuessesTable {guesses} {correctBookId} />

src/routes/layout.css

@@ -1,2 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Triodion&family=Young+Serif&display=swap');
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+
+@theme {  
+	--font-triodion: "PT Serif", serif; 
+}