Add bead separator support to Rosary Builder

- Bead Markers section in library panel with Small, Large, Crucifix cards
- Bead steps render as amber-tinted cards in the sequence (no attribution)
- migrate_v5.php: adds step_type/bead_type columns, makes prayer_id nullable
- Bead steps produce slides with proper bead+bead_index so the ring advances
  during presentation — allows participants to follow along on physical beads
- Prayer steps between beads still show bead_index=null (ring stays on last bead)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-13 21:20:59 -07:00
parent 3c11fd2067
commit 3cc002a6da
6 changed files with 299 additions and 38 deletions
+37 -4
View File
@@ -33,12 +33,12 @@ if (isset($_GET['id'])) {
}
// Load steps with prayer data
$step_stmt = $pdo->prepare("
SELECT bs.prayer_id, bs.attribution,
SELECT bs.step_type, bs.bead_type, bs.prayer_id, bs.attribution,
cp.name, cp.leader_text, cp.all_text, cp.is_global, cp.created_by,
IF(cp.is_global=1 AND u.role='superadmin','standard',
IF(cp.is_global=1,'global','mine')) AS source_tag
FROM builder_steps bs
JOIN custom_prayers cp ON cp.id = bs.prayer_id
LEFT JOIN custom_prayers cp ON cp.id = bs.prayer_id
LEFT JOIN users u ON u.id = cp.created_by
WHERE bs.session_id = ?
ORDER BY bs.step_order ASC
@@ -168,6 +168,37 @@ $page_title = $session ? 'Edit: ' . htmlspecialchars($session['name']) : 'Rosary
<button class="tab-btn" data-tab="mine">My Prayers</button>
</div>
</div>
<!-- Bead markers — always visible, not filtered by search/tab -->
<div class="bead-markers-section">
<div class="bead-markers-label">Bead Markers</div>
<div class="bead-marker-cards">
<button class="bead-marker-card" onclick="builderAddBead('small')">
<span class="bead-icon-sm">&#x25CB;</span>
<span class="bead-card-text">
<strong>Small Bead</strong>
<small>Hail Mary</small>
</span>
<span class="bead-add-label">+ Add</span>
</button>
<button class="bead-marker-card" onclick="builderAddBead('large')">
<span class="bead-icon-lg">&#x25CF;</span>
<span class="bead-card-text">
<strong>Large Bead</strong>
<small>Our Father</small>
</span>
<span class="bead-add-label">+ Add</span>
</button>
<button class="bead-marker-card" onclick="builderAddBead('crucifix')">
<span class="bead-icon-cx">&#x271D;</span>
<span class="bead-card-text">
<strong>Crucifix</strong>
<small>Cross bead</small>
</span>
<span class="bead-add-label">+ Add</span>
</button>
</div>
</div>
<div id="prayer-list">
<div class="library-empty" style="grid-column:1/-1;padding:40px;text-align:center;color:var(--muted)">
Loading…
@@ -255,8 +286,10 @@ var IS_ADMIN = <?= $is_admin ? 'true' : 'false' ?>;
var EDIT_SESSION_ID = <?= $session ? (int)$session['id'] : 'null' ?>;
var PRAYERS_DATA = <?= json_encode(array_values($prayers_data)) ?>;
var EXISTING_STEPS = <?= json_encode(array_map(fn($s) => [
'prayer_id' => (int)$s['prayer_id'],
'attribution' => $s['attribution'],
'step_type' => $s['step_type'] ?? 'prayer',
'bead_type' => $s['bead_type'] ?? null,
'prayer_id' => $s['prayer_id'] ? (int)$s['prayer_id'] : null,
'attribution' => $s['attribution'] ?? 'leader_all',
], $edit_steps)) ?>;
</script>
<script src="<?= BASE_URL ?>/assets/js/builder.js?v=1"></script>