diff --git a/src/lib/components/StreakCounter.svelte b/src/lib/components/StreakCounter.svelte
index e0254bf..c3301ec 100644
--- a/src/lib/components/StreakCounter.svelte
+++ b/src/lib/components/StreakCounter.svelte
@@ -2,7 +2,20 @@
import { browser } from '$app/environment';
import { getRosaryStreak } from '$lib/stores/rosaryStreak.svelte';
+interface Props {
+ user?: { nickname?: string } | null;
+}
+
+let { user = null }: Props = $props();
+
const streak = browser ? getRosaryStreak() : null;
+
+// Sync with server when user is logged in
+$effect(() => {
+ if (browser && streak) {
+ streak.setLoggedIn(!!user?.nickname);
+ }
+});
diff --git a/src/lib/stores/rosaryStreak.svelte.ts b/src/lib/stores/rosaryStreak.svelte.ts
index 8007911..3754a40 100644
--- a/src/lib/stores/rosaryStreak.svelte.ts
+++ b/src/lib/stores/rosaryStreak.svelte.ts
@@ -36,14 +36,59 @@ function saveToStorage(data: StreakData): void {
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}
+async function fetchFromServer(): Promise {
+ 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 {
+ try {
+ const res = await fetch('/api/glaube/rosary-streak', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(data)
+ });
+ return res.ok;
+ } catch {
+ return false;
+ }
+}
+
+// Merge local and server data, preferring the more recent/higher streak
+function mergeStreakData(local: StreakData, server: StreakData | null): StreakData {
+ if (!server) return local;
+
+ // If same lastPrayed date, take the higher length
+ if (local.lastPrayed === server.lastPrayed) {
+ return local.length >= server.length ? local : server;
+ }
+
+ // Otherwise take whichever was prayed more recently
+ if (!local.lastPrayed) return server;
+ if (!server.lastPrayed) return local;
+
+ return local.lastPrayed > server.lastPrayed ? local : server;
+}
+
class RosaryStreakStore {
#length = $state(0);
#lastPrayed = $state(null);
+ #isLoggedIn = $state(false);
#initialized = false;
+ #syncing = $state(false);
+ #pendingSync = false; // Track if we have unsynced changes
constructor() {
if (browser) {
this.#init();
+ this.#setupOnlineListener();
}
}
@@ -55,6 +100,14 @@ class RosaryStreakStore {
this.#initialized = true;
}
+ #setupOnlineListener() {
+ window.addEventListener('online', () => {
+ if (this.#isLoggedIn && this.#pendingSync) {
+ this.#syncWithServer();
+ }
+ });
+ }
+
get length() {
return this.#length;
}
@@ -67,7 +120,52 @@ class RosaryStreakStore {
return this.#lastPrayed === getToday();
}
- recordPrayer(): void {
+ get isLoggedIn() {
+ return this.#isLoggedIn;
+ }
+
+ get syncing() {
+ return this.#syncing;
+ }
+
+ // Call this when user session is available
+ async setLoggedIn(loggedIn: boolean): Promise {
+ this.#isLoggedIn = loggedIn;
+
+ if (loggedIn && browser) {
+ await this.#syncWithServer();
+ }
+ }
+
+ async #syncWithServer(): Promise {
+ if (this.#syncing) return;
+ this.#syncing = true;
+
+ try {
+ const serverData = await fetchFromServer();
+ const localData: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
+ 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 (!serverData || merged.length !== serverData.length || merged.lastPrayed !== serverData.lastPrayed) {
+ const success = await saveToServer(merged);
+ this.#pendingSync = !success;
+ } else {
+ this.#pendingSync = false;
+ }
+ } catch {
+ this.#pendingSync = true;
+ } finally {
+ this.#syncing = false;
+ }
+ }
+
+ async recordPrayer(): Promise {
const today = getToday();
// Already prayed today - no change
@@ -87,7 +185,15 @@ class RosaryStreakStore {
this.#length = newLength;
this.#lastPrayed = today;
- saveToStorage({ length: newLength, lastPrayed: today });
+
+ const data: StreakData = { length: newLength, lastPrayed: today };
+ saveToStorage(data);
+
+ // Sync to server if logged in
+ if (this.#isLoggedIn) {
+ const success = await saveToServer(data);
+ this.#pendingSync = !success;
+ }
}
}
diff --git a/src/models/RosaryStreak.ts b/src/models/RosaryStreak.ts
new file mode 100644
index 0000000..672bb18
--- /dev/null
+++ b/src/models/RosaryStreak.ts
@@ -0,0 +1,12 @@
+import mongoose from 'mongoose';
+
+const RosaryStreakSchema = new mongoose.Schema(
+ {
+ username: { type: String, required: true, unique: true },
+ length: { type: Number, required: true, default: 0 },
+ lastPrayed: { type: String, default: null } // ISO date string (YYYY-MM-DD)
+ },
+ { timestamps: true }
+);
+
+export const RosaryStreak = mongoose.models.RosaryStreak || mongoose.model("RosaryStreak", RosaryStreakSchema);
diff --git a/src/routes/api/glaube/rosary-streak/+server.ts b/src/routes/api/glaube/rosary-streak/+server.ts
new file mode 100644
index 0000000..298e7c6
--- /dev/null
+++ b/src/routes/api/glaube/rosary-streak/+server.ts
@@ -0,0 +1,61 @@
+import { json, error, type RequestHandler } from '@sveltejs/kit';
+import { RosaryStreak } from '../../../../models/RosaryStreak';
+import { dbConnect } from '../../../../utils/db';
+
+export const GET: RequestHandler = async ({ locals }) => {
+ const session = await locals.auth();
+
+ if (!session?.user?.nickname) {
+ throw error(401, 'Authentication required');
+ }
+
+ await dbConnect();
+
+ try {
+ const streak = await RosaryStreak.findOne({
+ username: session.user.nickname
+ }).lean();
+
+ return json({
+ length: streak?.length ?? 0,
+ lastPrayed: streak?.lastPrayed ?? null
+ });
+ } catch (e) {
+ throw error(500, 'Failed to fetch rosary streak');
+ }
+};
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+ const session = await locals.auth();
+
+ if (!session?.user?.nickname) {
+ throw error(401, 'Authentication required');
+ }
+
+ const { length, lastPrayed } = await request.json();
+
+ if (typeof length !== 'number' || length < 0) {
+ throw error(400, 'Valid streak length required');
+ }
+
+ if (lastPrayed !== null && typeof lastPrayed !== 'string') {
+ throw error(400, 'Invalid lastPrayed format');
+ }
+
+ await dbConnect();
+
+ try {
+ const updated = await RosaryStreak.findOneAndUpdate(
+ { username: session.user.nickname },
+ { length, lastPrayed },
+ { upsert: true, new: true }
+ ).lean();
+
+ return json({
+ length: updated.length,
+ lastPrayed: updated.lastPrayed
+ });
+ } catch (e) {
+ throw error(500, 'Failed to update rosary streak');
+ }
+};
diff --git a/src/routes/glaube/rosenkranz/+page.svelte b/src/routes/glaube/rosenkranz/+page.svelte
index f2fa33d..4f9e1b3 100644
--- a/src/routes/glaube/rosenkranz/+page.svelte
+++ b/src/routes/glaube/rosenkranz/+page.svelte
@@ -1238,7 +1238,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
-
+