From e815e15ce5b2054ef639529d3cd2c306f4ea5330 Mon Sep 17 00:00:00 2001
From: George Powell <geohpowell@gmail.com>
Date: Wed, 18 Feb 2026 14:03:07 -0500
Subject: [PATCH] Countdown timer now shows when there is a new verse available

---
 src/lib/components/CountdownTimer.svelte | 144 +++++++++++------------
 1 file changed, 69 insertions(+), 75 deletions(-)

diff --git a/src/lib/components/CountdownTimer.svelte b/src/lib/components/CountdownTimer.svelte
index 8390bc0..66dbc64 100644
--- a/src/lib/components/CountdownTimer.svelte
+++ b/src/lib/components/CountdownTimer.svelte
@@ -1,88 +1,82 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+	import { onMount, onDestroy } from "svelte";
 
-  let timeUntilNext = $state("");
-  let intervalId: number | null = null;
+	let timeUntilNext = $state("");
+	let newVerseReady = $state(false);
+	let intervalId: number | null = null;
+	let targetTime = 0;
 
-  function calculateTimeUntilFivePM(): string {
-    const now = new Date();
-    const target = new Date(now);
+	function initTarget() {
+		const target = new Date();
+		target.setHours(0, 0, 0, 0);
+		if (Date.now() >= target.getTime()) {
+			target.setDate(target.getDate() + 1);
+		}
+		targetTime = target.getTime();
+	}
 
-    // Set target to 5:00 PM today
-    target.setHours(17, 0, 0, 0);
+	function updateTimer() {
+		const diff = targetTime - Date.now();
 
-    // If it's already past 5:00 PM, set target to tomorrow 5:00 PM
-    if (now.getTime() >= target.getTime()) {
-      target.setDate(target.getDate() + 1);
-    }
+		if (diff <= 0) {
+			newVerseReady = true;
+			timeUntilNext = "";
+			if (intervalId) {
+				clearInterval(intervalId);
+				intervalId = null;
+			}
+			return;
+		}
 
-    const diff = target.getTime() - now.getTime();
+		const hours = Math.floor(diff / (1000 * 60 * 60));
+		const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+		const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
-    if (diff <= 0) {
-      return "00:00:00";
-    }
+		timeUntilNext = `${hours.toString().padStart(2, "0")}h ${minutes
+			.toString()
+			.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
+	}
 
-    const hours = Math.floor(diff / (1000 * 60 * 60));
-    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+	onMount(() => {
+		initTarget();
+		updateTimer();
+		intervalId = window.setInterval(updateTimer, 1000);
+	});
 
-    return `${hours.toString().padStart(2, "0")}h ${minutes
-      .toString()
-      .padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
-  }
-
-  function calculateTimeUntilMidnight(): string {
-    const now = new Date();
-    const target = new Date(now);
-
-    // Set target to midnight today
-    target.setHours(0, 0, 0, 0);
-
-    // If it's already past midnight, set target to tomorrow midnight
-    if (now.getTime() >= target.getTime()) {
-      target.setDate(target.getDate() + 1);
-    }
-
-    const diff = target.getTime() - now.getTime();
-
-    if (diff <= 0) {
-      return "00:00:00";
-    }
-
-    const hours = Math.floor(diff / (1000 * 60 * 60));
-    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-
-    return `${hours.toString().padStart(2, "0")}h ${minutes
-      .toString()
-      .padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
-  }
-
-  function updateTimer() {
-    timeUntilNext = calculateTimeUntilMidnight();
-  }
-
-  onMount(() => {
-    updateTimer();
-    intervalId = window.setInterval(updateTimer, 1000);
-  });
-
-  onDestroy(() => {
-    if (intervalId) {
-      clearInterval(intervalId);
-    }
-  });
+	onDestroy(() => {
+		if (intervalId) {
+			clearInterval(intervalId);
+		}
+	});
 </script>
 
 <div class="w-full">
-  <div
-    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">
-      {timeUntilNext}
-    </p>
-  </div>
+	<div
+		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"
+	>
+		{#if newVerseReady}
+			<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">Now</p>
+			<p
+				class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mt-2"
+			>
+				(refresh page to see the new verse)
+			</p>
+		{:else}
+			<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"
+			>
+				{timeUntilNext}
+			</p>
+		{/if}
+	</div>
 </div>