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

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

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