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

Compare commits

base: Alexander:767b43e2ff078f0a0ec824db2134b6bf9e8303b3
Branches Tags
Alexander:master Alexander:better-auth-flow Alexander:svelte5 Alexander:feature-cospend
...
compare: Alexander:9da0a2740de2d8cc3b6ef9a31273172a75d6addc
Branches Tags
Alexander:master Alexander:better-auth-flow Alexander:svelte5 Alexander:feature-cospend

2 Commits
767b43e2ff ... 9da0a2740d

Author SHA1 Message Date
Alexander Bocken
9da0a2740d rosary: inline cross glyph as SVG path for consistent rendering
All checks were successful
CI / update (push) Successful in 1m27s
Details 
Replace <text> elements using the crosses web font with inlined SVG
paths extracted from the font file. Web fonts in SVG <text> elements
don't load reliably on Android, causing fallback rendering.
 2026-02-04 12:09:00 +01:00
Alexander Bocken
7411160a23 rosary: derive SVG bead positions from sectionPositions dictionary 
Use sectionPositions as single source of truth for all bead coordinates.
Compute transition bead positions as midpoints between decades, generate
decade beads and hitboxes via loops, and adjust bead spacing.
 2026-02-04 12:04:08 +01:00
1 changed files with 74 additions and 97 deletions
Expand all files Collapse all files

167
src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
View File

@@ -355,29 +355,34 @@ function handleCitationClick(reference, title = '', verseData = null) {
} }
// Map sections to their vertical positions in the SVG // Map sections to their vertical positions in the SVG
const BEAD_SPACING = 22;
const DECADE_OFFSET = 10;
const sectionPositions = { const sectionPositions = {
cross: 35, cross: 35,
lbead1: 80, lbead1: 75,
start1: 110, start1: 110,
start2: 135, start2: 135,
start3: 160, start3: 160,
lbead2: 200, lbead2: 195,
secret1: 270, secret1: 270,
secret1_transition: 520,
secret2: 560, secret2: 560,
secret2_transition: 800,
secret3: 840, secret3: 840,
secret3_transition: 1080,
secret4: 1120, secret4: 1120,
secret4_transition: 1360,
secret5: 1400, secret5: 1400,
final_transition: 1690, final_transition: 1685,
final_salve: 1730, final_salve: 1720,
final_schlussgebet: 1760, final_schlussgebet: 1745,
final_michael: 1790, final_michael: 1770,
final_paternoster: 1830, final_paternoster: 1805,
final_cross: 1920 final_cross: 1900
}; };
// Center transition beads between last bead of decade d and first bead of decade d+1
for (let d = 1; d < 5; d++) {
const lastBead = sectionPositions[`secret${d}`] + DECADE_OFFSET + 9 * BEAD_SPACING;
const nextFirst = sectionPositions[`secret${d + 1}`] + DECADE_OFFSET;
sectionPositions[`secret${d}_transition`] = Math.round((lastBead + nextFirst) / 2);
}
const pos = sectionPositions;
onMount(() => { onMount(() => {
// Load toggle state from localStorage // Load toggle state from localStorage
@@ -933,7 +938,6 @@ onMount(() => {
.rosary-visualization :global(.cross-symbol) { .rosary-visualization :global(.cross-symbol) {
fill: var(--nord4); fill: var(--nord4);
transition: all 0.3s ease; transition: all 0.3s ease;
font-family: crosses;
} }
.rosary-visualization :global(.hitboxes) { .rosary-visualization :global(.hitboxes) {
@@ -1330,89 +1334,64 @@ h1 {
<div class="rosary-sidebar"> <div class="rosary-sidebar">
<div class="rosary-visualization" bind:this={svgContainer}> <div class="rosary-visualization" bind:this={svgContainer}>
<svg class="linear-rosary" viewBox="-100 -100 250 2200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet"> <svg class="linear-rosary" viewBox="-100 -100 250 2200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet">
<defs>
<symbol id="cross-glyph" viewBox="0 0 1304 1497">
<path transform="translate(-132, 1497) scale(1, -1)" d="M315 948Q293 903 245 857Q292 813 315 768L410 835V881ZM1159 880V834L1253 767Q1276 813 1323 857Q1276 903 1253 948ZM875 1314Q831 1337 784 1384Q740 1337 695 1314L763 1219H808ZM807 277H762L695 182Q740 159 784 112Q830 159 875 182ZM868 941H1096L1304 1067Q1314 962 1436 856Q1314 752 1304 648L1096 774H868V340L994 132Q888 121 783 0Q679 121 575 132L701 340V774H473L265 648Q254 752 132 857Q254 962 265 1067L473 941H701V1155L575 1364Q679 1375 784 1497Q888 1375 994 1364L868 1155ZM758 1040V881H642V835H758V451H812V835H928V881H812V1040Z" />
</symbol>
</defs>
<!-- Vertical chain --> <!-- Vertical chain -->
<line x1="25" y1="35" x2="25" y2="1865" class="chain" /> <line x1="25" y1={pos.cross} x2="25" y2={pos.final_paternoster + 40} class="chain" />
<!-- Cross (at top) --> <!-- Cross (at top) -->
<g id="cross-section" data-section="cross"> <g id="cross-section" data-section="cross">
<text x="25" y="35" text-anchor="middle" font-size="80" <use href="#cross-glyph" x={25 - 25} y={pos.cross - 58} width="50" height="58"
class="cross-symbol" class:active-cross={activeSection === 'cross'}>♱</text> class="cross-symbol" class:active-cross={activeSection === 'cross'} />
</g> </g>
<!-- First large bead (Paternoster) --> <!-- First large bead (Paternoster) -->
<circle cx="25" cy="80" r="15" class="large-bead" class:active-large-bead={activeSection === 'lbead1'} data-section="lbead1" /> <circle cx="25" cy={pos.lbead1} r="15" class="large-bead" class:active-large-bead={activeSection === 'lbead1'} data-section="lbead1" />
<!-- Three small beads --> <!-- Three small beads -->
<circle cx="25" cy="110" r="10" class="bead" class:active-bead={activeSection === 'start1'} data-section="start1" /> <circle cx="25" cy={pos.start1} r="10" class="bead" class:active-bead={activeSection === 'start1'} data-section="start1" />
<circle cx="25" cy="135" r="10" class="bead" class:active-bead={activeSection === 'start2'} data-section="start2" /> <circle cx="25" cy={pos.start2} r="10" class="bead" class:active-bead={activeSection === 'start2'} data-section="start2" />
<circle cx="25" cy="160" r="10" class="bead" class:active-bead={activeSection === 'start3'} data-section="start3" /> <circle cx="25" cy={pos.start3} r="10" class="bead" class:active-bead={activeSection === 'start3'} data-section="start3" />
<!-- Large bead before decades --> <!-- Large bead before decades -->
<circle cx="25" cy="200" r="15" class="large-bead" class:active-large-bead={activeSection === 'lbead2'} data-section="lbead2" /> <circle cx="25" cy={pos.lbead2} r="15" class="large-bead" class:active-large-bead={activeSection === 'lbead2'} data-section="lbead2" />
<!-- Benedictus Medal --> <!-- Benedictus Medal -->
<image href="/glaube/benedictus.svg" x="5" y="220" width="40" height="40" /> <image href="/glaube/benedictus.svg" x="5" y={pos.lbead2 + 25} width="40" height="40" />
<!-- Decade 1: Ave Maria (10 beads) --> <!-- 5 Decades -->
{#each [1, 2, 3, 4, 5] as d}
{@const decadePos = pos[`secret${d}`]}
{@const transPos = pos[`secret${d}_transition`]}
<!-- Decade {d}: Ave Maria (10 beads) -->
{#each Array(10) as _, i} {#each Array(10) as _, i}
<circle cx="25" cy={280 + i * 22} r="10" class="bead" <circle cx="25" cy={decadePos + DECADE_OFFSET + i * BEAD_SPACING} r="10" class="bead"
class:active-bead={activeSection === 'secret1'} class:active-bead={activeSection === `secret${d}`}
class:counted-bead={i < decadeCounters.secret1} class:counted-bead={i < decadeCounters[`secret${d}`]}
data-section="secret1" /> data-section={`secret${d}`} />
{/each} {/each}
<!-- Transition 1: Gloria + Fatima + Paternoster (large bead) --> <!-- Transition: Gloria + Fatima + Paternoster (large bead) -->
<circle cx="25" cy="520" r="15" class="large-bead" class:active-large-bead={activeSection === 'secret1_transition'} data-section="secret1_transition" /> {#if d < 5}
<circle cx="25" cy={transPos} r="15" class="large-bead" class:active-large-bead={activeSection === `secret${d}_transition`} data-section={`secret${d}_transition`} />
<!-- Decade 2: Ave Maria (10 beads) --> {/if}
{#each Array(10) as _, i}
<circle cx="25" cy={560 + i * 22} r="10" class="bead"
class:active-bead={activeSection === 'secret2'}
class:counted-bead={i < decadeCounters.secret2}
data-section="secret2" />
{/each}
<!-- Transition 2: Gloria + Fatima + Paternoster (large bead) -->
<circle cx="25" cy="800" r="15" class="large-bead" class:active-large-bead={activeSection === 'secret2_transition'} data-section="secret2_transition" />
<!-- Decade 3: Ave Maria (10 beads) -->
{#each Array(10) as _, i}
<circle cx="25" cy={840 + i * 22} r="10" class="bead"
class:active-bead={activeSection === 'secret3'}
class:counted-bead={i < decadeCounters.secret3}
data-section="secret3" />
{/each}
<!-- Transition 3: Gloria + Fatima + Paternoster (large bead) -->
<circle cx="25" cy="1080" r="15" class="large-bead" class:active-large-bead={activeSection === 'secret3_transition'} data-section="secret3_transition" />
<!-- Decade 4: Ave Maria (10 beads) -->
{#each Array(10) as _, i}
<circle cx="25" cy={1120 + i * 22} r="10" class="bead"
class:active-bead={activeSection === 'secret4'}
class:counted-bead={i < decadeCounters.secret4}
data-section="secret4" />
{/each}
<!-- Transition 4: Gloria + Fatima + Paternoster (large bead) -->
<circle cx="25" cy="1360" r="15" class="large-bead" class:active-large-bead={activeSection === 'secret4_transition'} data-section="secret4_transition" />
<!-- Decade 5: Ave Maria (10 beads) -->
{#each Array(10) as _, i}
<circle cx="25" cy={1400 + i * 22} r="10" class="bead"
class:active-bead={activeSection === 'secret5'}
class:counted-bead={i < decadeCounters.secret5}
data-section="secret5" />
{/each} {/each}
<image href="/glaube/benedictus.svg" x="5" y="1620" width="40" height="40" /> <image href="/glaube/benedictus.svg" x="5" y={pos.secret5 + DECADE_OFFSET + 9 * BEAD_SPACING + 15} width="40" height="40" />
<!-- Final transition: Gloria + Fatima --> <!-- Final transition: Gloria + Fatima -->
<circle cx="25" cy="1690" r="15" class="large-bead" class:active-large-bead={activeSection === 'final_transition'} data-section="final_transition" /> <circle cx="25" cy={pos.final_transition} r="15" class="large-bead" class:active-large-bead={activeSection === 'final_transition'} data-section="final_transition" />
<circle cx="25" cy="1730" r="10" class="bead" class:active-bead={activeSection === 'final_salve'} data-section="final_salve" /> <circle cx="25" cy={pos.final_salve} r="10" class="bead" class:active-bead={activeSection === 'final_salve'} data-section="final_salve" />
<circle cx="25" cy="1760" r="10" class="bead" class:active-bead={activeSection === 'final_schlussgebet'} data-section="final_schlussgebet" /> <circle cx="25" cy={pos.final_schlussgebet} r="10" class="bead" class:active-bead={activeSection === 'final_schlussgebet'} data-section="final_schlussgebet" />
<circle cx="25" cy="1790" r="10" class="bead" class:active-bead={activeSection === 'final_michael'} data-section="final_michael" /> <circle cx="25" cy={pos.final_michael} r="10" class="bead" class:active-bead={activeSection === 'final_michael'} data-section="final_michael" />
<circle cx="25" cy="1830" r="15" class="large-bead" class:active-large-bead={activeSection === 'final_paternoster'} data-section="final_paternoster" /> <circle cx="25" cy={pos.final_paternoster} r="15" class="large-bead" class:active-large-bead={activeSection === 'final_paternoster'} data-section="final_paternoster" />
<g data-section="final_cross"> <g data-section="final_cross">
<text x="25" y="1920" text-anchor="middle" font-size="80" <use href="#cross-glyph" x={25 - 25} y={pos.final_cross - 58} width="50" height="58"
class="cross-symbol" class:active-cross={activeSection === 'final_cross'}>♱</text> class="cross-symbol" class:active-cross={activeSection === 'final_cross'} />
</g> </g>
<!-- Invisible hitboxes for larger tap targets --> <!-- Invisible hitboxes for larger tap targets -->
@@ -1421,30 +1400,28 @@ h1 {
<rect x="-15" y="-30" width="80" height="80" data-section="cross" /> <rect x="-15" y="-30" width="80" height="80" data-section="cross" />
<!-- Individual bead hitboxes --> <!-- Individual bead hitboxes -->
<circle cx="25" cy="80" r="25" data-section="lbead1" /> <circle cx="25" cy={pos.lbead1} r="25" data-section="lbead1" />
<circle cx="25" cy="110" r="20" data-section="start1" /> <circle cx="25" cy={pos.start1} r="20" data-section="start1" />
<circle cx="25" cy="135" r="20" data-section="start2" /> <circle cx="25" cy={pos.start2} r="20" data-section="start2" />
<circle cx="25" cy="160" r="20" data-section="start3" /> <circle cx="25" cy={pos.start3} r="20" data-section="start3" />
<circle cx="25" cy="200" r="25" data-section="lbead2" /> <circle cx="25" cy={pos.lbead2} r="25" data-section="lbead2" />
<!-- Decade hitboxes (rectangles covering 10 beads each) --> <!-- Decade hitboxes -->
<rect x="-15" y="268" width="80" height="222" data-section="secret1" /> {#each [1, 2, 3, 4, 5] as d}
<rect x="-15" y="548" width="80" height="222" data-section="secret2" /> {@const decadePos = pos[`secret${d}`]}
<rect x="-15" y="828" width="80" height="222" data-section="secret3" /> <rect x="-15" y={decadePos - 2} width="80" height={DECADE_OFFSET + 9 * BEAD_SPACING + 12} data-section={`secret${d}`} />
<rect x="-15" y="1108" width="80" height="222" data-section="secret4" /> {/each}
<rect x="-15" y="1388" width="80" height="222" data-section="secret5" />
<!-- Transition bead hitboxes --> <!-- Transition bead hitboxes -->
<circle cx="25" cy="520" r="25" data-section="secret1_transition" /> {#each [1, 2, 3, 4] as d}
<circle cx="25" cy="800" r="25" data-section="secret2_transition" /> <circle cx="25" cy={pos[`secret${d}_transition`]} r="25" data-section={`secret${d}_transition`} />
<circle cx="25" cy="1080" r="25" data-section="secret3_transition" /> {/each}
<circle cx="25" cy="1360" r="25" data-section="secret4_transition" /> <circle cx="25" cy={pos.final_transition} r="25" data-section="final_transition" />
<circle cx="25" cy="1690" r="25" data-section="final_transition" /> <circle cx="25" cy={pos.final_salve} r="20" data-section="final_salve" />
<circle cx="25" cy="1730" r="20" data-section="final_salve" /> <circle cx="25" cy={pos.final_schlussgebet} r="20" data-section="final_schlussgebet" />
<circle cx="25" cy="1760" r="20" data-section="final_schlussgebet" /> <circle cx="25" cy={pos.final_michael} r="20" data-section="final_michael" />
<circle cx="25" cy="1790" r="20" data-section="final_michael" /> <circle cx="25" cy={pos.final_paternoster} r="25" data-section="final_paternoster" />
<circle cx="25" cy="1830" r="25" data-section="final_paternoster" /> <rect x="-15" y={pos.final_cross - 50} width="80" height="80" data-section="final_cross" />
<rect x="-15" y="1870" width="80" height="80" data-section="final_cross" />
</g> </g>
</svg> </svg>