rosary: server-side streak fetch, remove aggressive polling

- 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
2026-02-01 13:49:38 +01:00
parent 01fd067eda
commit 924ce386d5
6 changed files with 525 additions and 90 deletions
--- a/src/lib/components/FireEffect.svelte
+++ b/src/lib/components/FireEffect.svelte
@@ -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>
--- a/src/lib/components/StreakAura.svelte
+++ b/src/lib/components/StreakAura.svelte
@@ -1,13 +1,21 @@
 <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 >= 180 ? 5 :
 		value >= 90  ? 4 :
 		value >= 30  ? 3 :
-		value >= 14  ? 2 :   // NEW: particles only
-		value >= 7   ? 1 : 0;
+		value >= 14  ? 2 :
+		value >= 7   ? 1 : 0
+	);
 </script>

 <div class="aura phase-{phase}" class:holy-fire={phase>=4}>
@@ -34,34 +42,11 @@


 	{#if phase >= 2}
-	<div class="fire">
-		<div class="fire-left">
-			{#if phase >= 3}
-				<div class="main-fire"></div>
+		<FireEffect holy={phase>=4} />
 	{/if}
-			<div class="particle-fire"></div>
-		</div>

-		<div class="fire-center">
-			{#if phase >= 3}
-				<div class="main-fire"></div>
-			{/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 burst}
+		<FireEffect holy={phase>=4} burst />
 	{/if}

 	<span class="number">{value}</span>
--- a/src/lib/components/StreakCounter.svelte
+++ b/src/lib/components/StreakCounter.svelte
@@ -2,37 +2,47 @@
 import { browser } from '$app/environment';
 import { getRosaryStreak } from '$lib/stores/rosaryStreak.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 {
-	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]));

-
-// Sync with server when user is logged in
-$effect(() => {
-	if (browser && streak) {
-		streak.setLoggedIn(!!user?.nickname);
-	}
+// Initialize store on mount (client-side only)
+onMount(() => {
+	streak = getRosaryStreak();
+	streak.initWithServerData(streakData, streakData !== null);
 });
+
+async function pray() {
+	burst = true;
+	await tick();
+	setTimeout(() => burst = false, 700);
+	streak?.recordPrayer();
+}
 </script>

 <div class="streak-container">
 	<div class="streak-display">
-		<StreakAura value={streak?.length ?? 0} />
-		<span class="streak-label">Tag{#if streak?.length !== 1}e{/if}</span>
+		<StreakAura value={displayLength} {burst} />
+		<span class="streak-label">Tag{#if displayLength !== 1}e{/if}</span>
 	</div>
 	<button
 		class="streak-button"
-		onclick={() => streak?.recordPrayer()}
-		disabled={streak?.prayedToday}
+		onclick={pray}
+  		disabled={prayedToday}
 		aria-label="Gebet als gebetet markieren"
 	>
-		{#if streak?.prayedToday}
+		{#if prayedToday}
 			Heute gebetet
 		{:else}
 			Gebetet
--- a/src/lib/stores/rosaryStreak.svelte.ts
+++ b/src/lib/stores/rosaryStreak.svelte.ts
@@ -36,18 +36,6 @@ function saveToStorage(data: StreakData): void {
 	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> {
 	try {
 		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;
 }

+// 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 {
 	#length = $state(0);
 	#lastPrayed = $state<string | null>(null);
@@ -84,15 +79,18 @@ class RosaryStreakStore {
 	#initialized = false;
 	#syncing = $state(false);
 	#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() {
 		if (browser) {
-			this.#init();
-			this.#setupOnlineListener();
+			this.#initFromStorage();
+			this.#setupNetworkListeners();
 		}
 	}

-	#init() {
+	#initFromStorage() {
 		if (this.#initialized) return;
 		const data = loadFromStorage();
 		this.#length = data.length;
@@ -100,12 +98,47 @@ class RosaryStreakStore {
 		this.#initialized = true;
 	}

-	#setupOnlineListener() {
+	#setupNetworkListeners() {
+		// Track online/offline status
+		this.#isOffline = !navigator.onLine;
+
 		window.addEventListener('online', () => {
+			this.#isOffline = false;
+			this.#stopReconnectPolling();
+			// Sync pending changes when coming back online
 			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() {
@@ -128,22 +161,18 @@ class RosaryStreakStore {
 		return this.#syncing;
 	}

-	// Call this when user session is available
-	async setLoggedIn(loggedIn: boolean): Promise<void> {
-		this.#isLoggedIn = loggedIn;
+	// Initialize with server data (called once on page load)
+	initWithServerData(serverData: StreakData | null, isLoggedIn: boolean): void {
+		if (this.#hasSyncedOnce) return; // Only sync once

-		if (loggedIn && browser) {
-			await this.#syncWithServer();
-		}
+		this.#isLoggedIn = isLoggedIn;
+
+		if (!isLoggedIn || !serverData) {
+			this.#hasSyncedOnce = true;
+			return;
 		}

-	async #syncWithServer(): Promise<void> {
-		if (this.#syncing) return;
-		this.#syncing = true;
-
-		try {
-			const serverData = await fetchFromServer();
-			const localData: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
+		const localData = loadFromStorage();
 		const merged = mergeStreakData(localData, serverData);

 		// Update local state
@@ -152,12 +181,21 @@ class RosaryStreakStore {
 		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;
+		if (merged.length !== serverData.length || merged.lastPrayed !== serverData.lastPrayed) {
+			this.#pushToServer();
 		}
+
+		this.#hasSyncedOnce = true;
+	}
+
+	async #pushToServer(): Promise<void> {
+		if (this.#syncing || !this.#isLoggedIn) return;
+		this.#syncing = true;
+
+		try {
+			const data: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
+			const success = await saveToServer(data);
+			this.#pendingSync = !success;
 		} catch {
 			this.#pendingSync = true;
 		} finally {
@@ -193,6 +231,11 @@ class RosaryStreakStore {
 		if (this.#isLoggedIn) {
 			const success = await saveToServer(data);
 			this.#pendingSync = !success;
+
+			// Start polling if offline in PWA mode
+			if (!success && this.#isOffline && isPWA()) {
+				this.#startReconnectPolling();
+			}
 		}
 	}
 }
--- a/src/routes/glaube/rosenkranz/+page.server.ts
+++ b/src/routes/glaube/rosenkranz/+page.server.ts
@@ -4,6 +4,11 @@ import type { PageServerLoad } from './$types';
 // TODO: allow prerendering/fetching of bible verses at compile time while keeping the rest dynamic.
 // 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 }> {
  try {
    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
  const mysteryDescriptions: Record<string, MysteryDescription[]> = {
    lichtreichen: [],
@@ -59,7 +66,21 @@ export const load: PageServerLoad = async ({ fetch }) => {
    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 {
-    mysteryDescriptions
+    mysteryDescriptions,
+    streakData
  };
 };
--- a/src/routes/glaube/rosenkranz/+page.svelte
+++ b/src/routes/glaube/rosenkranz/+page.svelte
@@ -1215,7 +1215,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10

 	<!-- Toggle Controls & Streak Counter -->
 	<div class="controls-row">
-		<StreakCounter user={data.session?.user} />
+		<StreakCounter streakData={data.streakData} />
 		<div class="toggle-controls">
 			<!-- Luminous Mysteries Toggle -->
 			<Toggle