rosary: server-side streak fetch, remove aggressive polling
All checks were successful
CI / update (push) Successful in 1m29s
All checks were successful
CI / update (push) Successful in 1m29s
- Fetch streak data in +page.server.ts for logged-in users via API - Initialize store once with server data, sync only runs once - Only poll for reconnection in PWA mode when offline with pending changes - Extract FireEffect to separate component with burst animation - Convert StreakAura/StreakCounter to Svelte 5 runes ($props, $state, $derived) - Fix SSR flash by using server data for initial render
This commit is contained in:
376
src/lib/components/FireEffect.svelte
Normal file
376
src/lib/components/FireEffect.svelte
Normal file
@@ -0,0 +1,376 @@
|
|||||||
|
<!-- FireEffect.svelte -->
|
||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
holy?: boolean;
|
||||||
|
burst?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { holy = false, burst = false }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="fire {burst ? 'burst' : ''}" class:holy-fire={holy}>
|
||||||
|
<div class="fire-left">
|
||||||
|
<div class="main-fire"></div>
|
||||||
|
<div class="particle-fire"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fire-center">
|
||||||
|
<div class="main-fire"></div>
|
||||||
|
<div class="particle-fire"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fire-right">
|
||||||
|
<div class="main-fire"></div>
|
||||||
|
<div class="particle-fire"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fire-bottom">
|
||||||
|
<div class="main-fire"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* =====================
|
||||||
|
BASE LAYOUT
|
||||||
|
===================== */
|
||||||
|
.aura {
|
||||||
|
position: relative;
|
||||||
|
width: 88px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
.aura.phase-3,
|
||||||
|
.aura.phase-4,
|
||||||
|
.aura.phase-5,
|
||||||
|
.aura.phase-6
|
||||||
|
{
|
||||||
|
height: 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nord13);
|
||||||
|
--shadow-outline: 0 0 1px rgba(255,255,255,0.9), 0 0 3px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
PHASE 1 – GLOW
|
||||||
|
===================== */
|
||||||
|
.phase-1 .number {
|
||||||
|
text-shadow:
|
||||||
|
0 0 8px rgba(255,215,100,.5),
|
||||||
|
0 0 16px rgba(255,215,100,.35);
|
||||||
|
animation: glow-pulse 2.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%,100% { text-shadow: 0 0 8px rgba(255,215,100,.4); }
|
||||||
|
50% { text-shadow: 0 0 16px rgba(255,215,100,.8); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
PURE CSS FIRE (SCALED + RISING)
|
||||||
|
===================== */
|
||||||
|
.fire {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) scale(0.55);
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- animations ---------- */
|
||||||
|
@keyframes scaleUpDown {
|
||||||
|
0%,100% { transform: scaleY(1) scaleX(1); }
|
||||||
|
50%,90% { transform: scaleY(1.1); }
|
||||||
|
75% { transform: scaleY(0.95); }
|
||||||
|
80% { transform: scaleX(0.95); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
0%,100% { transform: skewX(0) scale(1); }
|
||||||
|
50% { transform: skewX(5deg) scale(0.9); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes particleUp {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
20% { opacity: 1; }
|
||||||
|
80% { opacity: 1; }
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
top: -100%;
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glow {
|
||||||
|
0%,100% { background-color: #ef5a00; }
|
||||||
|
50% { background-color: #ff7800; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- fire structure ---------- */
|
||||||
|
.fire-center,
|
||||||
|
.fire-left,
|
||||||
|
.fire-right {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-center {
|
||||||
|
animation: scaleUpDown 3s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-left {
|
||||||
|
animation: shake 3s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-right {
|
||||||
|
animation: shake 2s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-fire {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: radial-gradient(
|
||||||
|
farthest-corner at 10px 0,
|
||||||
|
color-mix(in srgb, var(--nord11) 70%, transparent),
|
||||||
|
color-mix(in srgb, var(--nord12) 70%, transparent) 60%,
|
||||||
|
color-mix(in srgb, var(--nord13) 85%, transparent) 95%
|
||||||
|
);
|
||||||
|
filter: drop-shadow(0 0 6px var(--nord12));
|
||||||
|
transform: scaleX(0.8) rotate(45deg);
|
||||||
|
border-radius: 0 40% 60% 40%;
|
||||||
|
/*filter: drop-shadow(0 0 10px #d43322);*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-left .main-fire {
|
||||||
|
top: 15%;
|
||||||
|
left: -20%;
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-right .main-fire {
|
||||||
|
top: 15%;
|
||||||
|
right: -25%;
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle-fire {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: var(--nord13);
|
||||||
|
filter: drop-shadow(0 0 4px var(--nord12));
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: particleUp 2.5s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-center .particle-fire {
|
||||||
|
top: 60%;
|
||||||
|
left: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-left .particle-fire {
|
||||||
|
top: 20%;
|
||||||
|
left: 20%;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-right .particle-fire {
|
||||||
|
top: 45%;
|
||||||
|
left: 50%;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-bottom .main-fire {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
left: 20%;
|
||||||
|
width: 75%;
|
||||||
|
height: 75%;
|
||||||
|
background-color: #ff7800;
|
||||||
|
transform: scaleX(0.8) rotate(45deg);
|
||||||
|
border-radius: 0 40% 100% 40%;
|
||||||
|
filter: blur(10px);
|
||||||
|
animation: glow 2s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
HOLY (BLUE-WHITE) FIRE
|
||||||
|
===================== */
|
||||||
|
.holy-fire .main-fire {
|
||||||
|
background-image: radial-gradient(
|
||||||
|
farthest-corner at 10px 0,
|
||||||
|
#9fd4ff 0%,
|
||||||
|
#eaf6ff 95%
|
||||||
|
);
|
||||||
|
filter: drop-shadow(0 0 12px rgba(180,220,255,.9));
|
||||||
|
}
|
||||||
|
|
||||||
|
.holy-fire .particle-fire {
|
||||||
|
background-color: #eaf6ff;
|
||||||
|
filter: drop-shadow(0 0 12px rgba(180,220,255,.9));
|
||||||
|
}
|
||||||
|
|
||||||
|
.holy-fire .fire-bottom .main-fire {
|
||||||
|
background-color: #d6ecff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
PHASE 3 – HALO
|
||||||
|
===================== */
|
||||||
|
.halo {
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
width: 70px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4px solid rgba(255,235,180,.9);
|
||||||
|
box-shadow:
|
||||||
|
0 0 12px rgba(255,235,180,.8),
|
||||||
|
0 0 20px rgba(255,235,180,.5);
|
||||||
|
animation: halo-float 3s ease-in-out infinite;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes halo-float {
|
||||||
|
0%,100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-4px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
PHASE 4 – WINGS
|
||||||
|
===================== */
|
||||||
|
.wing {
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
width: 36px;
|
||||||
|
height: 64px;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transform-origin: top center;
|
||||||
|
filter: drop-shadow(0 0 3px white);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.wing svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
.wing.left {
|
||||||
|
left: -18px;
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
animation: wing-slow-fly-left 4s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wing.right {
|
||||||
|
right: -18px;
|
||||||
|
transform: scaleX(-1) rotate(-10deg);
|
||||||
|
animation: wing-slow-fly-right 4s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* slow back-and-forth rotation for a gentle flight */
|
||||||
|
@keyframes wing-slow-fly-left {
|
||||||
|
0% { transform: rotate(10deg); }
|
||||||
|
50% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(10deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wing-slow-fly-right {
|
||||||
|
0% { transform: scaleX(-1) rotate(10deg); }
|
||||||
|
50% { transform: scaleX(-1) rotate(0deg); }
|
||||||
|
100% { transform: scaleX(-1) rotate(10deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
EMBER TEXT SHADOW
|
||||||
|
===================== */
|
||||||
|
.phase-2 .number,
|
||||||
|
.phase-3 .number,
|
||||||
|
.phase-4 .number {
|
||||||
|
animation: ember-pulse 1.4s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ember-pulse {
|
||||||
|
0% {
|
||||||
|
text-shadow:
|
||||||
|
var(--shadow-outline),
|
||||||
|
0 0 6px rgba(255,140,0,.6),
|
||||||
|
0 0 12px rgba(255,90,0,.4),
|
||||||
|
0 0 20px rgba(255,50,0,.2);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
text-shadow:
|
||||||
|
var(--shadow-outline),
|
||||||
|
0 0 10px rgba(255,180,0,.9),
|
||||||
|
0 0 18px rgba(255,120,0,.6),
|
||||||
|
0 0 28px rgba(255,70,0,.35);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.holy-fire .number {
|
||||||
|
animation: holy-ember 1.8s infinite alternate;
|
||||||
|
color: #eaf6ff;
|
||||||
|
--shadow-outline: 0 0 5px rgba(0,0,0,0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes holy-ember {
|
||||||
|
0% {
|
||||||
|
text-shadow:
|
||||||
|
var(--shadow-outline),
|
||||||
|
0 0 6px rgba(180,220,255,.6),
|
||||||
|
0 0 14px rgba(120,180,255,.45),
|
||||||
|
0 0 24px rgba(80,140,255,.3);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
text-shadow:
|
||||||
|
var(--shadow-outline),
|
||||||
|
0 0 12px rgba(220,245,255,.95),
|
||||||
|
0 0 22px rgba(160,210,255,.7),
|
||||||
|
0 0 36px rgba(100,160,255,.45);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* ===== BURST OVERRIDE ===== */
|
||||||
|
.fire.burst {
|
||||||
|
animation: flame-burst 600ms ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire.burst .particle-fire {
|
||||||
|
animation: particleBurst 600ms ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flame-burst {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-50%) scale(0.1) translateY(0%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-50%) scale(2) translateY(-10%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes particleBurst {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
30% { opacity: 1; }
|
||||||
|
100% {
|
||||||
|
transform: translateY(-120px) scale(0.3);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,13 +1,21 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let value: number = 0;
|
import FireEffect from './FireEffect.svelte';
|
||||||
|
|
||||||
const phase =
|
interface Props {
|
||||||
|
value?: number;
|
||||||
|
burst?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { value = 0, burst = false }: Props = $props();
|
||||||
|
|
||||||
|
const phase = $derived(
|
||||||
value >= 365 ? 6 :
|
value >= 365 ? 6 :
|
||||||
value >= 180 ? 5 :
|
value >= 180 ? 5 :
|
||||||
value >= 90 ? 4 :
|
value >= 90 ? 4 :
|
||||||
value >= 30 ? 3 :
|
value >= 30 ? 3 :
|
||||||
value >= 14 ? 2 : // NEW: particles only
|
value >= 14 ? 2 :
|
||||||
value >= 7 ? 1 : 0;
|
value >= 7 ? 1 : 0
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="aura phase-{phase}" class:holy-fire={phase>=4}>
|
<div class="aura phase-{phase}" class:holy-fire={phase>=4}>
|
||||||
@@ -33,36 +41,13 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
{#if phase >= 2}
|
{#if phase >= 2}
|
||||||
<div class="fire">
|
<FireEffect holy={phase>=4} />
|
||||||
<div class="fire-left">
|
{/if}
|
||||||
{#if phase >= 3}
|
|
||||||
<div class="main-fire"></div>
|
|
||||||
{/if}
|
|
||||||
<div class="particle-fire"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fire-center">
|
{#if burst}
|
||||||
{#if phase >= 3}
|
<FireEffect holy={phase>=4} burst />
|
||||||
<div class="main-fire"></div>
|
{/if}
|
||||||
{/if}
|
|
||||||
<div class="particle-fire"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fire-right">
|
|
||||||
{#if phase >= 3}
|
|
||||||
<div class="main-fire"></div>
|
|
||||||
{/if}
|
|
||||||
<div class="particle-fire"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fire-bottom">
|
|
||||||
{#if phase >= 3}
|
|
||||||
<div class="main-fire"></div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<span class="number">{value}</span>
|
<span class="number">{value}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,37 +2,47 @@
|
|||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
import { getRosaryStreak } from '$lib/stores/rosaryStreak.svelte';
|
import { getRosaryStreak } from '$lib/stores/rosaryStreak.svelte';
|
||||||
import StreakAura from '$lib/components/StreakAura.svelte';
|
import StreakAura from '$lib/components/StreakAura.svelte';
|
||||||
|
import { tick, onMount } from 'svelte';
|
||||||
|
|
||||||
|
let burst = $state(false);
|
||||||
|
let streak = $state<ReturnType<typeof getRosaryStreak> | null>(null);
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user?: { nickname?: string } | null;
|
streakData?: { length: number; lastPrayed: string | null } | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { user = null }: Props = $props();
|
let { streakData = null }: Props = $props();
|
||||||
|
|
||||||
const streak = browser ? getRosaryStreak() : null;
|
// Derive display values: use store when available, fall back to server data for SSR
|
||||||
|
let displayLength = $derived(streak?.length ?? streakData?.length ?? 0);
|
||||||
|
let prayedToday = $derived(streak?.prayedToday ?? (streakData?.lastPrayed === new Date().toISOString().split('T')[0]));
|
||||||
|
|
||||||
|
// Initialize store on mount (client-side only)
|
||||||
// Sync with server when user is logged in
|
onMount(() => {
|
||||||
$effect(() => {
|
streak = getRosaryStreak();
|
||||||
if (browser && streak) {
|
streak.initWithServerData(streakData, streakData !== null);
|
||||||
streak.setLoggedIn(!!user?.nickname);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
async function pray() {
|
||||||
|
burst = true;
|
||||||
|
await tick();
|
||||||
|
setTimeout(() => burst = false, 700);
|
||||||
|
streak?.recordPrayer();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="streak-container">
|
<div class="streak-container">
|
||||||
<div class="streak-display">
|
<div class="streak-display">
|
||||||
<StreakAura value={streak?.length ?? 0} />
|
<StreakAura value={displayLength} {burst} />
|
||||||
<span class="streak-label">Tag{#if streak?.length !== 1}e{/if}</span>
|
<span class="streak-label">Tag{#if displayLength !== 1}e{/if}</span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="streak-button"
|
class="streak-button"
|
||||||
onclick={() => streak?.recordPrayer()}
|
onclick={pray}
|
||||||
disabled={streak?.prayedToday}
|
disabled={prayedToday}
|
||||||
aria-label="Gebet als gebetet markieren"
|
aria-label="Gebet als gebetet markieren"
|
||||||
>
|
>
|
||||||
{#if streak?.prayedToday}
|
{#if prayedToday}
|
||||||
Heute gebetet
|
Heute gebetet
|
||||||
{:else}
|
{:else}
|
||||||
Gebetet
|
Gebetet
|
||||||
|
|||||||
@@ -36,18 +36,6 @@ function saveToStorage(data: StreakData): void {
|
|||||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchFromServer(): Promise<StreakData | null> {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/glaube/rosary-streak');
|
|
||||||
if (res.ok) {
|
|
||||||
return await res.json();
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Server unavailable, return null
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveToServer(data: StreakData): Promise<boolean> {
|
async function saveToServer(data: StreakData): Promise<boolean> {
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/glaube/rosary-streak', {
|
const res = await fetch('/api/glaube/rosary-streak', {
|
||||||
@@ -77,6 +65,13 @@ function mergeStreakData(local: StreakData, server: StreakData | null): StreakDa
|
|||||||
return local.lastPrayed > server.lastPrayed ? local : server;
|
return local.lastPrayed > server.lastPrayed ? local : server;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check if running as installed PWA
|
||||||
|
function isPWA(): boolean {
|
||||||
|
if (!browser) return false;
|
||||||
|
return window.matchMedia('(display-mode: standalone)').matches ||
|
||||||
|
(window.navigator as Navigator & { standalone?: boolean }).standalone === true;
|
||||||
|
}
|
||||||
|
|
||||||
class RosaryStreakStore {
|
class RosaryStreakStore {
|
||||||
#length = $state(0);
|
#length = $state(0);
|
||||||
#lastPrayed = $state<string | null>(null);
|
#lastPrayed = $state<string | null>(null);
|
||||||
@@ -84,15 +79,18 @@ class RosaryStreakStore {
|
|||||||
#initialized = false;
|
#initialized = false;
|
||||||
#syncing = $state(false);
|
#syncing = $state(false);
|
||||||
#pendingSync = false; // Track if we have unsynced changes
|
#pendingSync = false; // Track if we have unsynced changes
|
||||||
|
#hasSyncedOnce = false; // Track if initial sync has completed
|
||||||
|
#isOffline = $state(false);
|
||||||
|
#reconnectInterval: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
if (browser) {
|
if (browser) {
|
||||||
this.#init();
|
this.#initFromStorage();
|
||||||
this.#setupOnlineListener();
|
this.#setupNetworkListeners();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#init() {
|
#initFromStorage() {
|
||||||
if (this.#initialized) return;
|
if (this.#initialized) return;
|
||||||
const data = loadFromStorage();
|
const data = loadFromStorage();
|
||||||
this.#length = data.length;
|
this.#length = data.length;
|
||||||
@@ -100,12 +98,47 @@ class RosaryStreakStore {
|
|||||||
this.#initialized = true;
|
this.#initialized = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
#setupOnlineListener() {
|
#setupNetworkListeners() {
|
||||||
|
// Track online/offline status
|
||||||
|
this.#isOffline = !navigator.onLine;
|
||||||
|
|
||||||
window.addEventListener('online', () => {
|
window.addEventListener('online', () => {
|
||||||
|
this.#isOffline = false;
|
||||||
|
this.#stopReconnectPolling();
|
||||||
|
// Sync pending changes when coming back online
|
||||||
if (this.#isLoggedIn && this.#pendingSync) {
|
if (this.#isLoggedIn && this.#pendingSync) {
|
||||||
this.#syncWithServer();
|
this.#pushToServer();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
window.addEventListener('offline', () => {
|
||||||
|
this.#isOffline = true;
|
||||||
|
// Only start polling in PWA mode
|
||||||
|
if (isPWA() && this.#isLoggedIn && this.#pendingSync) {
|
||||||
|
this.#startReconnectPolling();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
#startReconnectPolling() {
|
||||||
|
if (this.#reconnectInterval) return;
|
||||||
|
// Poll every 30 seconds to check if we're back online (only in PWA mode when offline)
|
||||||
|
this.#reconnectInterval = setInterval(() => {
|
||||||
|
if (navigator.onLine) {
|
||||||
|
this.#isOffline = false;
|
||||||
|
this.#stopReconnectPolling();
|
||||||
|
if (this.#pendingSync) {
|
||||||
|
this.#pushToServer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 30000);
|
||||||
|
}
|
||||||
|
|
||||||
|
#stopReconnectPolling() {
|
||||||
|
if (this.#reconnectInterval) {
|
||||||
|
clearInterval(this.#reconnectInterval);
|
||||||
|
this.#reconnectInterval = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get length() {
|
get length() {
|
||||||
@@ -128,36 +161,41 @@ class RosaryStreakStore {
|
|||||||
return this.#syncing;
|
return this.#syncing;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Call this when user session is available
|
// Initialize with server data (called once on page load)
|
||||||
async setLoggedIn(loggedIn: boolean): Promise<void> {
|
initWithServerData(serverData: StreakData | null, isLoggedIn: boolean): void {
|
||||||
this.#isLoggedIn = loggedIn;
|
if (this.#hasSyncedOnce) return; // Only sync once
|
||||||
|
|
||||||
if (loggedIn && browser) {
|
this.#isLoggedIn = isLoggedIn;
|
||||||
await this.#syncWithServer();
|
|
||||||
|
if (!isLoggedIn || !serverData) {
|
||||||
|
this.#hasSyncedOnce = true;
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const localData = loadFromStorage();
|
||||||
|
const merged = mergeStreakData(localData, serverData);
|
||||||
|
|
||||||
|
// Update local state
|
||||||
|
this.#length = merged.length;
|
||||||
|
this.#lastPrayed = merged.lastPrayed;
|
||||||
|
saveToStorage(merged);
|
||||||
|
|
||||||
|
// If local had newer data, push to server
|
||||||
|
if (merged.length !== serverData.length || merged.lastPrayed !== serverData.lastPrayed) {
|
||||||
|
this.#pushToServer();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#hasSyncedOnce = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
async #syncWithServer(): Promise<void> {
|
async #pushToServer(): Promise<void> {
|
||||||
if (this.#syncing) return;
|
if (this.#syncing || !this.#isLoggedIn) return;
|
||||||
this.#syncing = true;
|
this.#syncing = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const serverData = await fetchFromServer();
|
const data: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
|
||||||
const localData: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
|
const success = await saveToServer(data);
|
||||||
const merged = mergeStreakData(localData, serverData);
|
this.#pendingSync = !success;
|
||||||
|
|
||||||
// Update local state
|
|
||||||
this.#length = merged.length;
|
|
||||||
this.#lastPrayed = merged.lastPrayed;
|
|
||||||
saveToStorage(merged);
|
|
||||||
|
|
||||||
// If local had newer data, push to server
|
|
||||||
if (!serverData || merged.length !== serverData.length || merged.lastPrayed !== serverData.lastPrayed) {
|
|
||||||
const success = await saveToServer(merged);
|
|
||||||
this.#pendingSync = !success;
|
|
||||||
} else {
|
|
||||||
this.#pendingSync = false;
|
|
||||||
}
|
|
||||||
} catch {
|
} catch {
|
||||||
this.#pendingSync = true;
|
this.#pendingSync = true;
|
||||||
} finally {
|
} finally {
|
||||||
@@ -193,6 +231,11 @@ class RosaryStreakStore {
|
|||||||
if (this.#isLoggedIn) {
|
if (this.#isLoggedIn) {
|
||||||
const success = await saveToServer(data);
|
const success = await saveToServer(data);
|
||||||
this.#pendingSync = !success;
|
this.#pendingSync = !success;
|
||||||
|
|
||||||
|
// Start polling if offline in PWA mode
|
||||||
|
if (!success && this.#isOffline && isPWA()) {
|
||||||
|
this.#startReconnectPolling();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,11 @@ import type { PageServerLoad } from './$types';
|
|||||||
// TODO: allow prerendering/fetching of bible verses at compile time while keeping the rest dynamic.
|
// TODO: allow prerendering/fetching of bible verses at compile time while keeping the rest dynamic.
|
||||||
// export const prerender = true; # breaks user logged-in state
|
// export const prerender = true; # breaks user logged-in state
|
||||||
|
|
||||||
|
interface StreakData {
|
||||||
|
length: number;
|
||||||
|
lastPrayed: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
async function fetchBibleData(reference: string, fetch: typeof globalThis.fetch): Promise<{ text: string; verseData: VerseData | null }> {
|
async function fetchBibleData(reference: string, fetch: typeof globalThis.fetch): Promise<{ text: string; verseData: VerseData | null }> {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`/api/glaube/bibel/${encodeURIComponent(reference)}`);
|
const response = await fetch(`/api/glaube/bibel/${encodeURIComponent(reference)}`);
|
||||||
@@ -33,7 +38,9 @@ async function fetchBibleData(reference: string, fetch: typeof globalThis.fetch)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const load: PageServerLoad = async ({ fetch }) => {
|
export const load: PageServerLoad = async ({ fetch, locals }) => {
|
||||||
|
const session = await locals.auth();
|
||||||
|
|
||||||
// Fetch Bible texts for all mysteries at build time
|
// Fetch Bible texts for all mysteries at build time
|
||||||
const mysteryDescriptions: Record<string, MysteryDescription[]> = {
|
const mysteryDescriptions: Record<string, MysteryDescription[]> = {
|
||||||
lichtreichen: [],
|
lichtreichen: [],
|
||||||
@@ -59,7 +66,21 @@ export const load: PageServerLoad = async ({ fetch }) => {
|
|||||||
mysteryDescriptions[mysteryType] = descriptions;
|
mysteryDescriptions[mysteryType] = descriptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fetch streak data for logged-in users via API route
|
||||||
|
let streakData: StreakData | null = null;
|
||||||
|
if (session?.user?.nickname) {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/glaube/rosary-streak');
|
||||||
|
if (res.ok) {
|
||||||
|
streakData = await res.json();
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// Server unavailable, client will use localStorage
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
mysteryDescriptions
|
mysteryDescriptions,
|
||||||
|
streakData
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1215,7 +1215,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
|
|||||||
|
|
||||||
<!-- Toggle Controls & Streak Counter -->
|
<!-- Toggle Controls & Streak Counter -->
|
||||||
<div class="controls-row">
|
<div class="controls-row">
|
||||||
<StreakCounter user={data.session?.user} />
|
<StreakCounter streakData={data.streakData} />
|
||||||
<div class="toggle-controls">
|
<div class="toggle-controls">
|
||||||
<!-- Luminous Mysteries Toggle -->
|
<!-- Luminous Mysteries Toggle -->
|
||||||
<Toggle
|
<Toggle
|
||||||
|
|||||||
Reference in New Issue
Block a user