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">
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>