// ornaments.jsx — illuminated decorative pieces, drop caps, woodcut placeholders // ───────────────────────────────────────────────────────────── // Decorative rule with center diamond — like a missal page break // ───────────────────────────────────────────────────────────── function MissalRule({ theme, color, label }) { const c = color || theme.gold; return (
{label && {label}} {label && }
); } // ───────────────────────────────────────────────────────────── // Illuminated drop cap. Uses a square with gold border + filigree-ish // background using overlapping circles, holding the letter. // ───────────────────────────────────────────────────────────── function DropCap({ letter, theme, size = 64, color }) { const c = color || theme.accent; const id = 'dc-' + (letter || 'A') + '-' + Math.random().toString(36).slice(2, 6); // Stroke-dash length tuned to the corner flourish path length so it draws // smoothly from origin to terminal point. const FLOURISH_LEN = 18; return ( {/* colored block — fades in */} {/* corner flourishes — drawn in sequence with the inkDraw animation */} {letter} ); } // ───────────────────────────────────────────────────────────── // Chalice countdown — fills based on % of week elapsed // ───────────────────────────────────────────────────────────── function Chalice({ theme, fillPct = 0.6, width = 80 }) { const h = width * 1.4; const fillY = 28 + (40 - fillPct * 40); // wine surface return ( {/* cup outline */} {/* wine */} {/* meniscus */} {/* rim highlight */} {/* stem */} {/* knob */} {/* base */} ); } // ───────────────────────────────────────────────────────────── // Votive candle — flickering flame // ───────────────────────────────────────────────────────────── function Candle({ theme, lit = true, size = 1, name, prayer }) { const w = 56 * size, h = 90 * size; return (
{lit && ( <> {/* glow halo */}
{/* flame */} )} {/* wick */}
{/* candle body */}
{/* drips */}
{/* glass holder */}
{name &&
{name}
} {prayer &&
{prayer}
}
); } // ───────────────────────────────────────────────────────────── // Liturgical season ribbon — top of screen accent // ───────────────────────────────────────────────────────────── // Compress a long RCL Sunday name for places where horizontal room is tight // (iPhone-width ribbon, etc.). "Fifth Sunday of Easter" → "Easter 5"; // "Reign of Christ · Christ the King" → "Christ the King"; preserves short // names ("Trinity Sunday", "The Day of Pentecost") as-is. function shortSundayName(name) { if (!name) return ''; const m = name.match(/^(First|Second|Third|Fourth|Fifth|Sixth|Seventh) Sunday (?:in|of|after) (.+)$/); if (m) { const ord = { First: 1, Second: 2, Third: 3, Fourth: 4, Fifth: 5, Sixth: 6, Seventh: 7 }[m[1]]; return `${m[2].split(' ')[0]} ${ord}`; } return name.split(' · ')[0].replace(/^The /, ''); } function SeasonRibbon({ theme }) { const s = theme.season; // Dynamic Year + Sunday name from the RCL helper. Falls back to season name // if the helper isn't loaded yet (defensive — should always be available). let tagline = ''; try { if (typeof getRCLToday === 'function') { const rcl = getRCLToday(); if (rcl && rcl.year && rcl.name) tagline = `Year ${rcl.year} · ${shortSundayName(rcl.name)}`; } } catch (e) { /* ignore — leave tagline empty */ } return (
† {s.name} {tagline && {tagline}}
); } // ───────────────────────────────────────────────────────────── // Woodcut-style placeholder — a "stained-glass" composition // uses simple repeating geometry, no figural recreation // ───────────────────────────────────────────────────────────── function StainedGlass({ theme, height = 200, seed = 1 }) { const palette = [theme.accent, theme.gold, '#3a5a7a', '#3a2858', '#3a5a3a']; // Tall Gothic lancet with an abstract Celtic cross within const stoneStroke = theme.ink; // Lancet path (pointed arch). Apex at top, springs from y=110. const arch = "M40 240 L40 110 Q40 28 100 14 Q160 28 160 110 L160 240 Z"; return (
{/* Stone outer arch */} {/* Glass field within the lancet */} {/* Background glass (deep colored field) */} {/* Diamond lattice (lead came) across the whole field */} {(() => { const lines = []; for (let y = 30; y <= 240; y += 22) { lines.push(); } for (let x = 50; x <= 150; x += 22) { lines.push(); } return lines; })()} {/* Celtic cross — abstract */} {/* Nimbus / halo ring (the circle) */} {/* Vertical bar of the cross */} {/* Horizontal crossbar */} {/* Center jewel where the bars cross */} {/* Small jewels along the cross arms */} {/* Inner stone arch outline */}
); } // ───────────────────────────────────────────────────────────── // Manuscript-style placeholder card with monospace label // ───────────────────────────────────────────────────────────── function PlaceholderImg({ theme, height = 120, label = 'photograph' }) { return (
[ {label} ]
); } // ───────────────────────────────────────────────────────────── // Cross / chi-rho / fleur small icons (monoline) // ───────────────────────────────────────────────────────────── const Icons = { cross: (size = 14, c = 'currentColor') => ( ), chalice: (size = 14, c = 'currentColor') => ( ), candle: (size = 14, c = 'currentColor') => ( ), alms: (size = 14, c = 'currentColor') => ( ), scroll: (size = 14, c = 'currentColor') => ( ), door: (size = 14, c = 'currentColor') => ( ), star: (size = 14, c = 'currentColor') => ( ), pin: (size = 14, c = 'currentColor') => ( ), bell: (size = 14, c = 'currentColor') => ( ), book: (size = 14, c = 'currentColor') => ( ), }; Object.assign(window, { MissalRule, DropCap, Chalice, Candle, SeasonRibbon, StainedGlass, PlaceholderImg, Icons });