);
}
// Modal showing the current office
function OfficeModal({ theme, onClose }) {
const cur = currentOffice();
const c = OFFICE_CONTENT[cur.id] || OFFICE_CONTENT.compline;
return (
℣ {c.versicle}
℟ {c.response}
{c.psalm}
{c.canticle}
The grace of our Lord Jesus Christ, and the love of God, and the fellowship of the Holy Spirit, be with us all evermore.
Amen.
);
}
// ─────────────────────────────────────────────────────────────
// LectionaryModal — full readings as a missal page
// ─────────────────────────────────────────────────────────────
function LectionaryModal({ theme, onClose, reading }) {
const r = LECTIONARY_FULL[reading] || LECTIONARY_FULL.gospel;
return (
{r.body.map((p, i) => (
{i === 0 && }
{i === 0 ? p.slice(1) : p}
))}
);
}
// ─────────────────────────────────────────────────────────────
// SaintRibbon — slim ribbon between season & hero
// ─────────────────────────────────────────────────────────────
function SaintRibbon({ theme }) {
const s = saintToday();
if (!s) return null;
return (
★
Today we remember
{s.name}
);
}
// ─────────────────────────────────────────────────────────────
// softChime — a brief gentle tone played between prayer lines.
// Wrapped in try/catch so that if AudioContext is blocked (Safari
// before first user gesture, content-blockers, etc.) the prayer flow
// still advances. Previously this function was undefined, which threw
// a ReferenceError every cue and froze the modal on line 0.
// ─────────────────────────────────────────────────────────────
function softChime(freq = 880) {
try {
const Ctx = window.AudioContext || window.webkitAudioContext;
if (!Ctx) return;
if (!window.__chimeCtx) window.__chimeCtx = new Ctx();
const ctx = window.__chimeCtx;
if (ctx.state === 'suspended' && ctx.resume) { try { ctx.resume(); } catch (e) {} }
const t = ctx.currentTime;
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(freq, t);
gain.gain.setValueAtTime(0, t);
gain.gain.linearRampToValueAtTime(0.06, t + 0.02);
gain.gain.exponentialRampToValueAtTime(0.0001, t + 1.0);
osc.connect(gain).connect(ctx.destination);
osc.start(t);
osc.stop(t + 1.05);
} catch (e) { /* silent — audio is a nice-to-have */ }
}
// ─────────────────────────────────────────────────────────────
// PrayWithUs — Lord's Prayer at a meditative cadence, then this
// week's Prayer of the Day, then close.
// ─────────────────────────────────────────────────────────────
const LORDS_PRAYER = [
'Our Father, who art in heaven,',
'hallowed be thy Name.',
'Thy kingdom come,',
'thy will be done,',
'on earth as it is in heaven.',
'Give us this day our daily bread.',
'And forgive us our trespasses,',
'as we forgive those who trespass against us.',
'And lead us not into temptation,',
'but deliver us from evil.',
'For thine is the kingdom,',
'and the power, and the glory,',
'for ever and ever.',
'Amen.',
];
function PrayWithUsModal({ theme, onClose }) {
const [phase, setPhase] = React.useState('lords'); // 'lords' | 'collect'
const [idx, setIdx] = React.useState(0);
const [paused, setPaused] = React.useState(false);
// Pull this week's Collect (the Prayer of the Day) — auto-changes by Sunday.
const [collect] = React.useState(() => {
try { return (typeof getCollect === 'function') ? getCollect() : null; } catch (e) { return null; }
});
// Auto-advance through the Lord's Prayer; on the last line, transition
// to the Collect phase after a short pause.
React.useEffect(() => {
if (phase !== 'lords' || paused) return;
if (idx >= LORDS_PRAYER.length - 1) {
if (!collect || !collect.text) return;
const t = setTimeout(() => setPhase('collect'), 4200);
return () => clearTimeout(t);
}
const t = setTimeout(() => {
softChime(idx % 2 === 0 ? 880 : 660);
setIdx(i => i + 1);
}, 3800);
return () => clearTimeout(t);
}, [idx, paused, phase, collect]);
// Initial chime on mount (gracefully no-ops if AudioContext is blocked).
React.useEffect(() => { softChime(880); }, []);
// Soft chime on phase change to mark the transition.
React.useEffect(() => { if (phase === 'collect') softChime(550); }, [phase]);
const restart = () => { setPhase('lords'); setIdx(0); setPaused(false); };
if (phase === 'collect' && collect) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// YearWheel — circular liturgical year
// ─────────────────────────────────────────────────────────────
function YearWheel({ theme, size = 280 }) {
const r = size / 2;
const cx = r, cy = r;
// Compute actual liturgical season boundaries for the current year.
// Falls back to a static approximation if the helper isn't loaded.
let seasons = null;
let todayPct = 0;
let labelYears = '';
try {
if (typeof getLiturgicalSeasons === 'function') {
seasons = getLiturgicalSeasons();
todayPct = seasons.today;
labelYears = `${seasons.startYear} — ${seasons.endYear}`;
}
} catch (e) { /* fall through */ }
if (!seasons) {
// Approximate fallback when the helper isn't loaded
seasons = {
advent: { from: 0, to: 0.07 },
christmas: { from: 0.07, to: 0.10 },
epiphany: { from: 0.10, to: 0.22 },
lent: { from: 0.22, to: 0.35 },
easter: { from: 0.35, to: 0.50 },
pentecost: { from: 0.50, to: 0.97 },
reign: { from: 0.97, to: 1 },
};
labelYears = String(new Date().getFullYear());
}
// Arc order goes clockwise from the top: Advent at 12 o'clock,
// running through the year and ending with Christ the King.
// Pentecost Day gets a small red wedge between Easter and the long
// green Season-after-Pentecost arc — same visual width as Reign.
const arcs = [
{ ...seasons.advent, name: 'Advent', col: '#3a2858' },
{ ...seasons.christmas, name: 'Christmas', col: '#b8893d' },
{ ...seasons.epiphany, name: 'Epiphany', col: '#4a7042' },
{ ...seasons.lent, name: 'Lent', col: '#4a3858' },
{ ...seasons.easter, name: 'Easter', col: '#a87838' },
seasons.pentecostDay && { ...seasons.pentecostDay, name: '', col: '#9a2828' },
{ ...seasons.pentecost, name: 'Pentecost', col: '#3a5a3a' },
{ ...seasons.reign, name: 'Reign', col: '#c8983d' },
].filter(Boolean);
const polar = (pct, radius) => {
const a = pct * Math.PI * 2 - Math.PI / 2;
return [cx + Math.cos(a) * radius, cy + Math.sin(a) * radius];
};
const arcPath = (from, to, ri, ro) => {
const [x1, y1] = polar(from, ri);
const [x2, y2] = polar(to, ri);
const [x3, y3] = polar(to, ro);
const [x4, y4] = polar(from, ro);
const large = (to - from) > 0.5 ? 1 : 0;
return `M${x1} ${y1} A${ri} ${ri} 0 ${large} 1 ${x2} ${y2} L${x3} ${y3} A${ro} ${ro} 0 ${large} 0 ${x4} ${y4} Z`;
};
const ri = r - 56, ro = r - 14;
const [tx, ty] = polar(todayPct, (ri + ro) / 2);
// Render labels for nearly all arcs; very thin ones get a smaller font.
const minLabelArc = 0.012;
const tightLabelArc = 0.04;
return (
);
}
// ─────────────────────────────────────────────────────────────
// ModalShell — full-screen modal with paper texture and close
// ─────────────────────────────────────────────────────────────
function ModalShell({ theme, onClose, title, subtitle, children }) {
return (