From 180bdb4aaa7edd2c5fa658d179be7d761a7b27e6 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 20 Jan 2026 12:02:48 +0100
Subject: [PATCH] fix: restore rosary counter functionality with Svelte 5
 reactivity

The Ave Maria counter was not updating the visualization when clicked.
Fixed by wrapping decadeCounters in $state() for proper reactivity tracking
and correcting data-section attributes to use template literals instead of
string literals in the decade loop.
---
 src/routes/glaube/rosenkranz/+page.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/glaube/rosenkranz/+page.svelte b/src/routes/glaube/rosenkranz/+page.svelte
index b893e63..a05af63 100644
--- a/src/routes/glaube/rosenkranz/+page.svelte
+++ b/src/routes/glaube/rosenkranz/+page.svelte
@@ -191,13 +191,13 @@ let sectionElements = {};
 let svgContainer;
 
 // Counter for tracking Ave Maria progress in each decade (0-10 for each)
-let decadeCounters = {
+let decadeCounters = $state({
 	secret1: 0,
 	secret2: 0,
 	secret3: 0,
 	secret4: 0,
 	secret5: 0
-};
+});
 
 // Modal state for displaying Bible citations
 let showModal = $state(false);
@@ -1388,7 +1388,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
 				<div
 					class="prayer-section decade"
 					bind:this={sectionElements[`secret${decadeNum}`]}
-					data-section="secret{decadeNum}"
+					data-section={`secret${decadeNum}`}
 				>
 					<h2>{decadeNum}. Gesätz: {currentMysteryTitles[decadeNum - 1]}</h2>
 
@@ -1421,7 +1421,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
 					<div
 						class="prayer-section"
 						bind:this={sectionElements[`secret${decadeNum}_transition`]}
-						data-section="secret{decadeNum}_transition"
+						data-section={`secret${decadeNum}_transition`}
 					>
 						<h3>Gloria Patri</h3>
 						<GloriaPatri />