pguzman/Rosary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit — Rosary Presenter App

Browse Source 
Full source for loveandrosary.com: slide-based Rosary/novena/Divine Mercy
Chaplet presentation tool with multi-user roles, SVG bead ring, audio uploads,
donate strip, and public session profiles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Philip Guzman III
2026-05-13 18:44:08 -07:00
commit 663fde3909
46 changed files with 10902 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/rosary.js
+364
View File
@@ -0,0 +1,364 @@
/**
* assets/js/rosary.js
*
* Draws an SVG rosary ring around the viewport edges.
*
* Layout: 60 beads distributed clockwise, starting at the bottom-center
* with the crucifix, then going right → up the right edge → left along top
* → down the left edge → back to bottom-center.
*
* Bead index mapping (60 beads total):
* 0 = Crucifix (bottom center, stem)
* 1 = large (Our Father, stem)
* 2–4 = small (3 Hail Marys, stem)
* 5 = large (Our Father, Decade 1)
* 6–15 = small (10 HMs, Decade 1)
* 16 = large (Our Father, Decade 2)
* 17–26 = small (Decade 2)
* 27 = large (Our Father, Decade 3)
* 28–37 = small (Decade 3)
* 38 = large (Our Father, Decade 4)
* 39–48 = small (Decade 4)
* 49 = large (Our Father, Decade 5)
* 50–59 = small (Decade 5)
*
* Colors:
* Unprayed : #555555 (dark gray)
* Current : #FFD700 (gold, glow)
* Prayed : #990000 (deep red)
*/
var RosaryRing = (function () {
'use strict';
var NS = 'http://www.w3.org/2000/svg';
var MARGIN = 28; // px from edge
var R_SMALL = 6;
var R_LARGE = 10;
var R_CRUCIFIX = 12;
var COLOR_UNPRAYED = '#555555';
var COLOR_CURRENT = '#FFD700';
var COLOR_PRAYED = '#990000';
var svg = null;
var beadEls = []; // SVG <circle> elements, indexed 0-59
var polyline = null;
var beadPositions = []; // [{x, y}] for each bead
var _beadClickHandler = null; // registered by presenter.js
// Which bead indices are "large" (Our Father) beads
var LARGE_BEADS = new Set([1, 5, 16, 27, 38, 49]);
var CRUCIFIX_BEADS = new Set([0]);
// --------------------------------------------------------------------------
// Calculate bead positions around the viewport edges
// --------------------------------------------------------------------------
function calcPositions(W, H) {
var m = MARGIN;
// Total path length around the rectangle (at margin inset)
// Corners: (m,m), (W-m,m), (W-m,H-m), (m,H-m)
var innerW = W - 2 * m;
var innerH = H - 2 * m;
var perimeter = 2 * (innerW + innerH);
// The ring uses beads 0–59 (60 total).
// Bead 0 (crucifix) is at the bottom-center.
// We distribute beads clockwise starting from bottom-center,
// going RIGHT first along the bottom edge.
// Reference point for bead 0: bottom center of inset rectangle
var startX = W / 2;
var startY = H - m;
var positions = [];
for (var i = 0; i < 60; i++) {
// Fraction of the perimeter for this bead (clockwise from bottom-center)
var frac = i / 60;
var dist = frac * perimeter;
var pt = pointOnRect(dist, startX, startY, m, W, H, innerW, innerH, perimeter);
positions.push(pt);
}
return positions;
}
/**
* Given a distance along the perimeter (starting at bottom-center, clockwise),
* return the {x, y} point on the inset rectangle.
*/
function pointOnRect(dist, startX, startY, m, W, H, innerW, innerH, perimeter) {
var x, y;
// Segment lengths from bottom-center going clockwise:
// Segment A: bottom-center → bottom-right corner = W/2 - m
// Segment B: bottom-right corner → top-right = H - 2m
// Segment C: top-right → top-left = W - 2m
// Segment D: top-left → bottom-left = H - 2m
// Segment E: bottom-left → bottom-center = W/2 - m
var segA = W / 2 - m; // → bottom-right
var segB = H - 2 * m; // ↑ right edge
var segC = W - 2 * m; // ← top edge
var segD = H - 2 * m; // ↓ left edge
var segE = W / 2 - m; // → back to bottom-center
dist = ((dist % perimeter) + perimeter) % perimeter; // normalize
if (dist <= segA) {
// Bottom edge: left of center → right (going right from bottom-center)
x = startX + dist;
y = H - m;
} else if (dist <= segA + segB) {
// Right edge: bottom → top
x = W - m;
y = (H - m) - (dist - segA);
} else if (dist <= segA + segB + segC) {
// Top edge: right → left
x = (W - m) - (dist - segA - segB);
y = m;
} else if (dist <= segA + segB + segC + segD) {
// Left edge: top → bottom
x = m;
y = m + (dist - segA - segB - segC);
} else {
// Bottom edge: left → bottom-center
x = m + (dist - segA - segB - segC - segD);
y = H - m;
}
return { x: x, y: y };
}
// --------------------------------------------------------------------------
// Build or rebuild the SVG
// --------------------------------------------------------------------------
function build() {
var container = document.getElementById('rosary-overlay');
if (!container) return;
// Remove existing SVG if any
container.innerHTML = '';
var W = window.innerWidth;
var H = window.innerHeight;
svg = document.createElementNS(NS, 'svg');
svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
svg.setAttribute('xmlns', NS);
svg.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none';
// Define glow filter
var defs = document.createElementNS(NS, 'defs');
var filter = document.createElementNS(NS, 'filter');
filter.setAttribute('id', 'glow');
filter.setAttribute('x', '-50%');
filter.setAttribute('y', '-50%');
filter.setAttribute('width', '200%');
filter.setAttribute('height', '200%');
var feGaussian = document.createElementNS(NS, 'feGaussianBlur');
feGaussian.setAttribute('stdDeviation', '3.5');
feGaussian.setAttribute('result', 'coloredBlur');
var feMerge = document.createElementNS(NS, 'feMerge');
var feMergeNode1 = document.createElementNS(NS, 'feMergeNode');
feMergeNode1.setAttribute('in', 'coloredBlur');
var feMergeNode2 = document.createElementNS(NS, 'feMergeNode');
feMergeNode2.setAttribute('in', 'SourceGraphic');
feMerge.appendChild(feMergeNode1);
feMerge.appendChild(feMergeNode2);
filter.appendChild(feGaussian);
filter.appendChild(feMerge);
defs.appendChild(filter);
svg.appendChild(defs);
beadPositions = calcPositions(W, H);
// Draw chain (polyline)
var pts = beadPositions.map(function (p) { return p.x + ',' + p.y; });
// Close the loop
pts.push(pts[0]);
polyline = document.createElementNS(NS, 'polyline');
polyline.setAttribute('points', pts.join(' '));
polyline.setAttribute('fill', 'none');
polyline.setAttribute('stroke', '#333');
polyline.setAttribute('stroke-width', '1.5');
polyline.setAttribute('opacity', '0.7');
svg.appendChild(polyline);
// Draw beads
beadEls = [];
for (var i = 0; i < 60; i++) {
var pos = beadPositions[i];
var isCrucifix = CRUCIFIX_BEADS.has(i);
var isLarge = LARGE_BEADS.has(i);
if (isCrucifix) {
// Draw a simple cross symbol
var g = document.createElementNS(NS, 'g');
g.setAttribute('transform', 'translate(' + pos.x + ',' + pos.y + ')');
// Beads are clickable — enable pointer events on this element
g.style.pointerEvents = 'all';
g.style.cursor = 'pointer';
var vert = document.createElementNS(NS, 'line');
vert.setAttribute('x1', '0'); vert.setAttribute('y1', '-14');
vert.setAttribute('x2', '0'); vert.setAttribute('y2', '14');
vert.setAttribute('stroke', COLOR_UNPRAYED);
vert.setAttribute('stroke-width', '3');
vert.setAttribute('stroke-linecap', 'round');
var horiz = document.createElementNS(NS, 'line');
horiz.setAttribute('x1', '-8'); horiz.setAttribute('y1', '-4');
horiz.setAttribute('x2', '8'); horiz.setAttribute('y2', '-4');
horiz.setAttribute('stroke', COLOR_UNPRAYED);
horiz.setAttribute('stroke-width', '3');
horiz.setAttribute('stroke-linecap', 'round');
// Invisible hit-area circle for color tracking and clicks
var hitCircle = document.createElementNS(NS, 'circle');
hitCircle.setAttribute('cx', '0'); hitCircle.setAttribute('cy', '0');
hitCircle.setAttribute('r', R_CRUCIFIX);
hitCircle.setAttribute('fill', 'transparent');
g.appendChild(vert);
g.appendChild(horiz);
g.appendChild(hitCircle);
g.dataset.beadIndex = i;
g._vertLine = vert;
g._horizLine = horiz;
// Click: emit bead index to registered handler
(function (beadIdx) {
g.addEventListener('click', function () {
if (_beadClickHandler) _beadClickHandler(beadIdx);
});
})(i);
svg.appendChild(g);
beadEls.push(g);
} else {
var r = isLarge ? R_LARGE : R_SMALL;
var circle = document.createElementNS(NS, 'circle');
circle.setAttribute('cx', pos.x);
circle.setAttribute('cy', pos.y);
circle.setAttribute('r', r);
circle.setAttribute('fill', COLOR_UNPRAYED);
circle.dataset.beadIndex = i;
// Beads are clickable — enable pointer events on this element
circle.style.pointerEvents = 'all';
circle.style.cursor = 'pointer';
// Click: emit bead index to registered handler
(function (beadIdx) {
circle.addEventListener('click', function () {
if (_beadClickHandler) _beadClickHandler(beadIdx);
});
})(i);
svg.appendChild(circle);
beadEls.push(circle);
}
}
container.appendChild(svg);
}
// --------------------------------------------------------------------------
// applyColors — internal: paint all beads for the given state.
// currentBeadIndex : bead being prayed NOW (gold glow), or null
// lastPrayedBeadIndex: highest bead index prayed so far (all <= this are red)
// --------------------------------------------------------------------------
function applyColors(currentBeadIndex, lastPrayedBeadIndex) {
if (!svg) return;
var last = (lastPrayedBeadIndex !== null && lastPrayedBeadIndex !== undefined)
? lastPrayedBeadIndex : -1;
// Once the final bead of decade 5 (index 59) has been prayed and there is
// no active bead, the cross turns gold and stays gold for the rest of the
// presentation (litanies, novena prayer, closing slide).
var allDecadesDone = (last >= 59) &&
(currentBeadIndex === null || currentBeadIndex === undefined);
beadEls.forEach(function (el, i) {
var isCrucifix = CRUCIFIX_BEADS.has(i);
var color;
var isActive = false;
if (currentBeadIndex !== null && currentBeadIndex !== undefined) {
// On a bead slide: gold = current, red = prayed, gray = future
if (i === currentBeadIndex) {
color = COLOR_CURRENT;
isActive = true;
} else if (i < currentBeadIndex) {
color = COLOR_PRAYED;
} else {
color = COLOR_UNPRAYED;
}
} else {
// Between-bead slide (Glory Be, Fatima, litany, etc.)
if (isCrucifix && allDecadesDone) {
// All 5 decades complete — crucifix glows gold
color = COLOR_CURRENT;
isActive = true;
} else {
color = (i <= last) ? COLOR_PRAYED : COLOR_UNPRAYED;
}
}
if (isCrucifix) {
el._vertLine.setAttribute('stroke', color);
el._horizLine.setAttribute('stroke', color);
if (isActive) { el.setAttribute('filter', 'url(#glow)'); }
else { el.removeAttribute('filter'); }
} else {
el.setAttribute('fill', color);
if (isActive) { el.setAttribute('filter', 'url(#glow)'); }
else { el.removeAttribute('filter'); }
}
});
}
// --------------------------------------------------------------------------
// update — public API. Saves state so a resize rebuild can restore it.
// --------------------------------------------------------------------------
var _lastCurrent = null;
var _lastPrayed = null;
function update(currentBeadIndex, lastPrayedBeadIndex) {
_lastCurrent = currentBeadIndex;
_lastPrayed = lastPrayedBeadIndex;
applyColors(currentBeadIndex, lastPrayedBeadIndex);
}
// --------------------------------------------------------------------------
// Initialize
// --------------------------------------------------------------------------
function init() {
build();
window.addEventListener('resize', function () {
build();
applyColors(_lastCurrent, _lastPrayed); // restore state after SVG rebuild
});
}
// Run on DOM ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
function onBeadClick(fn) {
_beadClickHandler = fn;
}
return { update: update, onBeadClick: onBeadClick };
})();