george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Countdown timer now shows when there is a new verse available

Browse Source
This commit is contained in:
George Powell
2026-02-18 14:03:07 -05:00
parent e6081c28f1
commit e815e15ce5
1 changed files with 69 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/lib/components/CountdownTimer.svelte
View File

@@ -1,88 +1,82 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount, onDestroy } from "svelte";
let timeUntilNext = $state(""); let timeUntilNext = $state("");
let intervalId: number | null = null; let newVerseReady = $state(false);
let intervalId: number | null = null;
let targetTime = 0;
function calculateTimeUntilFivePM(): string { function initTarget() {
const now = new Date(); const target = new Date();
const target = new Date(now); 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 function updateTimer() {
target.setHours(17, 0, 0, 0); const diff = targetTime - Date.now();
// If it's already past 5:00 PM, set target to tomorrow 5:00 PM if (diff <= 0) {
if (now.getTime() >= target.getTime()) { newVerseReady = true;
target.setDate(target.getDate() + 1); 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) { timeUntilNext = `${hours.toString().padStart(2, "0")}h ${minutes
return "00:00:00"; .toString()
} .padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
}
const hours = Math.floor(diff / (1000 * 60 * 60)); onMount(() => {
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); initTarget();
const seconds = Math.floor((diff % (1000 * 60)) / 1000); updateTimer();
intervalId = window.setInterval(updateTimer, 1000);
});
return `${hours.toString().padStart(2, "0")}h ${minutes onDestroy(() => {
.toString() if (intervalId) {
.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`; clearInterval(intervalId);
} }
});
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);
}
});
</script> </script>
<div class="w-full"> <div class="w-full">
<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" 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"> {#if newVerseReady}
Next Verse In <p
</p> class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
<p class="text-4xl font-triodion font-black text-gray-800 tabular-nums"> >
{timeUntilNext} Next Verse In
</p> </p>
</div> <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> </div>