Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore rosary counter functionality with Svelte 5 reactivity

Browse Source 
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.
This commit is contained in:
Alexander Bocken
2026-01-20 12:02:48 +01:00
parent 50b0e7a70e
commit 180bdb4aaa
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/routes/glaube/rosenkranz/+page.svelte
View File

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