300 lines
17 KiB
JavaScript
300 lines
17 KiB
JavaScript
|
// Band Lineup — client. Renders the shared stage board from /state + /stream.
|
|||
|
|
// The Edit button opens an editor: an uploaded-photo library you drag (or click)
|
|||
|
|
// into slots, plus rename / clear / upload / delete. Edits go to the server and
|
|||
|
|
// come back over SSE, so every Band Lineup screen stays in sync. Birthday week
|
|||
|
|
// (Wed→Tue) rains confetti.
|
|||
|
|
|
|||
|
|
const CONFETTI_COLORS = ['#f5c451', '#ff6b81', '#4fd1c5', '#a78bfa', '#ffffff'];
|
|||
|
|
|
|||
|
|
export default function create({ root, moduleApi }) {
|
|||
|
|
let stream = null;
|
|||
|
|
let state = null;
|
|||
|
|
let editing = false;
|
|||
|
|
let choirBtn = null;
|
|||
|
|
let selectedLibId = ''; // click-to-place fallback for touch
|
|||
|
|
const canvases = new Set();
|
|||
|
|
let raf = null;
|
|||
|
|
// Auto-scroll the editor while dragging a photo (native DnD won't do it reliably).
|
|||
|
|
let dragScrolling = false;
|
|||
|
|
let dragY = 0;
|
|||
|
|
let dragBody = null;
|
|||
|
|
let dragRaf = null;
|
|||
|
|
function startDragAutoScroll() {
|
|||
|
|
if (dragRaf) return;
|
|||
|
|
const tick = () => {
|
|||
|
|
if (!dragScrolling || !dragBody || !dragBody.isConnected) { dragRaf = null; return; }
|
|||
|
|
const r = dragBody.getBoundingClientRect();
|
|||
|
|
const zone = 90; // generous edge band so you don't have to be pixel-accurate
|
|||
|
|
let dy = 0;
|
|||
|
|
if (dragY < r.top + zone) dy = -Math.ceil((r.top + zone - dragY) / 4) - 3;
|
|||
|
|
else if (dragY > r.bottom - zone) dy = Math.ceil((dragY - (r.bottom - zone)) / 4) + 3;
|
|||
|
|
if (dy) dragBody.scrollTop += dy;
|
|||
|
|
dragRaf = requestAnimationFrame(tick);
|
|||
|
|
};
|
|||
|
|
dragRaf = requestAnimationFrame(tick);
|
|||
|
|
}
|
|||
|
|
function stopDragAutoScroll() { dragScrolling = false; if (dragRaf) { cancelAnimationFrame(dragRaf); dragRaf = null; } }
|
|||
|
|
|
|||
|
|
/* ---------- confetti (always animates) ---------- */
|
|||
|
|
function makeParticle(w, h, intensity, seedY) {
|
|||
|
|
const ribbon = Math.random() < 0.55;
|
|||
|
|
return {
|
|||
|
|
x: Math.random() * w, y: seedY != null ? seedY : Math.random() * h,
|
|||
|
|
w: ribbon ? 4 + Math.random() * 4 : 5 + Math.random() * 5, h: ribbon ? 9 + Math.random() * 8 : 0, ribbon,
|
|||
|
|
color: CONFETTI_COLORS[(Math.random() * CONFETTI_COLORS.length) | 0],
|
|||
|
|
rot: Math.random() * Math.PI * 2, vr: -0.14 + Math.random() * 0.28,
|
|||
|
|
sway: 0.6 + Math.random() * 1.1, phase: Math.random() * Math.PI * 2,
|
|||
|
|
vy: (intensity === 'subtle' ? 0.6 : 1.0) * (1.1 + Math.random() * 1.5),
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
function seed(c, w, h) { const base = c._intensity === 'subtle' ? 26 : 64; const n = Math.max(10, Math.round((base * (w * h)) / (300 * 500))); c._parts = Array.from({ length: n }, () => makeParticle(w, h, c._intensity)); }
|
|||
|
|
function step(c) {
|
|||
|
|
const w = c.clientWidth, h = c.clientHeight; if (!w || !h) return;
|
|||
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|||
|
|
if (c._w !== w || c._h !== h) { c.width = w * dpr; c.height = h * dpr; c._ctx = c.getContext('2d'); c._ctx.setTransform(dpr, 0, 0, dpr, 0, 0); c._w = w; c._h = h; seed(c, w, h); }
|
|||
|
|
const ctx = c._ctx; ctx.clearRect(0, 0, w, h);
|
|||
|
|
for (const p of c._parts) {
|
|||
|
|
p.phase += 0.03; p.y += p.vy; p.x += Math.sin(p.phase) * p.sway; p.rot += p.vr;
|
|||
|
|
if (p.y > h + 16) Object.assign(p, makeParticle(w, h, c._intensity, -16));
|
|||
|
|
ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.rot); ctx.fillStyle = p.color;
|
|||
|
|
if (p.ribbon) ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h); else { ctx.beginPath(); ctx.arc(0, 0, p.w / 2, 0, Math.PI * 2); ctx.fill(); }
|
|||
|
|
ctx.restore();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function loop() { for (const c of [...canvases]) { if (!c.isConnected) { canvases.delete(c); continue; } step(c); } raf = canvases.size ? requestAnimationFrame(loop) : null; }
|
|||
|
|
function addConfetti(host, intensity) { const c = document.createElement('canvas'); c.className = 'bl-confetti'; c._intensity = intensity; host.appendChild(c); canvases.add(c); if (!raf) raf = requestAnimationFrame(loop); }
|
|||
|
|
|
|||
|
|
/* ---------- helpers ---------- */
|
|||
|
|
function initials(name) { const p = String(name || '').trim().split(/\s+/).filter(Boolean).slice(0, 2); return p.length ? p.map((x) => x[0]).join('').toUpperCase() : ''; }
|
|||
|
|
// Per-tile Columns wins; 0 falls back to the admin default.
|
|||
|
|
function resolveCols() { const per = Number(moduleApi.instanceSettings.columns) || 0; return Math.max(1, per > 0 ? per : (Number(state && state.columns) || 7)); }
|
|||
|
|
function el(tag, cls, text) { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; }
|
|||
|
|
function photoNode(person, cls) {
|
|||
|
|
if (person && person.photo) { const img = el('img', cls || 'bl-img'); img.alt = ''; img.src = person.photo; img.loading = 'lazy'; return img; }
|
|||
|
|
return el('div', 'bl-initials', initials(person && person.name));
|
|||
|
|
}
|
|||
|
|
async function api(pathStr, opts) { try { return await moduleApi.fetch(pathStr, opts); } catch { return null; } }
|
|||
|
|
|
|||
|
|
/* ---------- display board ---------- */
|
|||
|
|
function stopConfetti() { canvases.clear(); if (raf) { cancelAnimationFrame(raf); raf = null; } }
|
|||
|
|
|
|||
|
|
function render() {
|
|||
|
|
stopConfetti();
|
|||
|
|
stopParallax();
|
|||
|
|
root.innerHTML = '';
|
|||
|
|
if (choirBtn) choirBtn.classList.toggle('active', !!(state && state.choir));
|
|||
|
|
if (editing) { renderEditor(); return; }
|
|||
|
|
|
|||
|
|
const board = el('div', 'bl-board');
|
|||
|
|
if (!state) { board.classList.add('bl-message'); board.textContent = 'Connecting…'; root.appendChild(board); return; }
|
|||
|
|
|
|||
|
|
const s = moduleApi.instanceSettings;
|
|||
|
|
const birthdays = s.birthdays !== false;
|
|||
|
|
const intensity = s.birthdayIntensity === 'full' ? 'full' : 'subtle';
|
|||
|
|
const testIndex = birthdays ? String(s.birthdayTest || '') : '';
|
|||
|
|
const cols = resolveCols();
|
|||
|
|
const rows = Math.max(1, Math.ceil((state.slots ? state.slots.length : 1) / cols));
|
|||
|
|
board.style.setProperty('--bl-cols', cols);
|
|||
|
|
board.style.setProperty('--bl-rows', rows);
|
|||
|
|
|
|||
|
|
for (const slot of state.slots || []) {
|
|||
|
|
const cell = el('div', 'bl-slot');
|
|||
|
|
const person = slot.person;
|
|||
|
|
if (person) {
|
|||
|
|
const tile = el('div', 'bl-tile');
|
|||
|
|
const photo = el('div', 'bl-photo');
|
|||
|
|
photo.appendChild(photoNode(person));
|
|||
|
|
const celebrating = birthdays && (person.celebrating || (testIndex !== '' && testIndex === String(slot.index)));
|
|||
|
|
if (celebrating) { tile.classList.add('bl-birthday', `bl-birthday-${intensity}`); addConfetti(photo, intensity); }
|
|||
|
|
if (s.showNames !== false && person.name) photo.appendChild(el('div', 'bl-name', person.name));
|
|||
|
|
tile.appendChild(photo);
|
|||
|
|
if (s.showLabels !== false && slot.label) tile.appendChild(el('div', 'bl-label', slot.label));
|
|||
|
|
cell.appendChild(tile);
|
|||
|
|
} else {
|
|||
|
|
const empty = el('div', 'bl-tile bl-empty');
|
|||
|
|
empty.appendChild(el('div', 'bl-label bl-label-empty', slot.label || `Slot ${slot.index + 1}`));
|
|||
|
|
cell.appendChild(empty);
|
|||
|
|
}
|
|||
|
|
board.appendChild(cell);
|
|||
|
|
}
|
|||
|
|
root.appendChild(board);
|
|||
|
|
applyParallax(board, s.parallax !== false);
|
|||
|
|
reportStatus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------- parallax: each photo drifts on its own, automatically ---------- */
|
|||
|
|
let parallaxRaf = null;
|
|||
|
|
let parallaxImgs = [];
|
|||
|
|
function stopParallax() { if (parallaxRaf) { cancelAnimationFrame(parallaxRaf); parallaxRaf = null; } parallaxImgs = []; }
|
|||
|
|
function applyParallax(board, on) {
|
|||
|
|
stopParallax();
|
|||
|
|
const imgs = [...board.querySelectorAll('.bl-img')];
|
|||
|
|
if (!on) { imgs.forEach((i) => { i.style.transform = ''; }); return; }
|
|||
|
|
// Give each image its own gentle, endless drift — different amplitude, speed and phase,
|
|||
|
|
// so the wall never looks frozen and no two photos move together. No mouse needed.
|
|||
|
|
parallaxImgs = imgs.map((img) => ({
|
|||
|
|
img,
|
|||
|
|
ax: 4 + Math.random() * 5, ay: 4 + Math.random() * 5,
|
|||
|
|
// Very slow: a full drift cycle takes roughly a minute, so the motion only
|
|||
|
|
// registers if you actually watch for it.
|
|||
|
|
sx: 0.03 + Math.random() * 0.05, sy: 0.03 + Math.random() * 0.05,
|
|||
|
|
px: Math.random() * Math.PI * 2, py: Math.random() * Math.PI * 2,
|
|||
|
|
}));
|
|||
|
|
const tick = () => {
|
|||
|
|
const t = performance.now() / 1000;
|
|||
|
|
for (const p of parallaxImgs) {
|
|||
|
|
if (!p.img.isConnected) continue;
|
|||
|
|
p.img.style.transform = `scale(1.08) translate(${(Math.sin(t * p.sx + p.px) * p.ax).toFixed(2)}px, ${(Math.cos(t * p.sy + p.py) * p.ay).toFixed(2)}px)`;
|
|||
|
|
}
|
|||
|
|
parallaxRaf = requestAnimationFrame(tick);
|
|||
|
|
};
|
|||
|
|
parallaxRaf = requestAnimationFrame(tick);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function reportStatus() {
|
|||
|
|
if (!state) return moduleApi.setStatus('connecting', 'Connecting…');
|
|||
|
|
if (state.configured && !state.reachable) return moduleApi.setStatus('error', state.lastError || 'Planning Center unreachable');
|
|||
|
|
return moduleApi.setStatus('ok', state.plan?.dates ? `Plan: ${state.plan.dates}` : 'Ready');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------- editor ---------- */
|
|||
|
|
function renderEditor() {
|
|||
|
|
// No top bar: the photo source is managed in Admin (Google Drive link). Edit mode is just the
|
|||
|
|
// board on top and the picture picker (library) below it.
|
|||
|
|
const wrap = el('div', 'bl-editor bl-editor-nobar');
|
|||
|
|
const body = el('div', 'bl-editor-body');
|
|||
|
|
// Feed the drag auto-scroller the pointer position anywhere over the editor.
|
|||
|
|
body.addEventListener('dragover', (e) => { dragY = e.clientY; });
|
|||
|
|
|
|||
|
|
// Slots (drop targets)
|
|||
|
|
const boardEl = el('div', 'bl-edit-board');
|
|||
|
|
boardEl.style.setProperty('--bl-cols', resolveCols());
|
|||
|
|
for (const slot of state?.slots || []) {
|
|||
|
|
const cell = el('div', 'bl-edit-slot');
|
|||
|
|
cell.dataset.index = String(slot.index);
|
|||
|
|
const photo = el('div', 'bl-edit-photo');
|
|||
|
|
photo.appendChild(slot.person ? photoNode(slot.person) : el('div', 'bl-edit-drop', '＋'));
|
|||
|
|
cell.appendChild(photo);
|
|||
|
|
// An occupied card is a drag SOURCE too — move/swap it to another slot.
|
|||
|
|
if (slot.person) {
|
|||
|
|
cell.draggable = true;
|
|||
|
|
cell.addEventListener('dragstart', (e) => {
|
|||
|
|
e.dataTransfer.setData('text/plain', 'slot:' + slot.index); e.dataTransfer.effectAllowed = 'move';
|
|||
|
|
dragBody = body; dragScrolling = true; startDragAutoScroll();
|
|||
|
|
});
|
|||
|
|
cell.addEventListener('dragend', stopDragAutoScroll);
|
|||
|
|
}
|
|||
|
|
const nameRow = el('div', 'bl-edit-namerow');
|
|||
|
|
const nameBtn = el('button', 'bl-edit-name', (slot.person && slot.person.name) || 'Name…');
|
|||
|
|
nameBtn.addEventListener('click', () => renameSlot(slot.index, slot.person ? slot.person.name : ''));
|
|||
|
|
nameRow.appendChild(nameBtn);
|
|||
|
|
if (slot.person) { const clr = el('button', 'bl-edit-clear', '×'); clr.title = 'Clear'; clr.addEventListener('click', () => api(`/slot/${slot.index}/clear`, { method: 'POST' })); nameRow.appendChild(clr); }
|
|||
|
|
cell.appendChild(nameRow);
|
|||
|
|
cell.appendChild(el('div', 'bl-edit-label', slot.label || `Slot ${slot.index + 1}`));
|
|||
|
|
// drop
|
|||
|
|
cell.addEventListener('dragover', (e) => { e.preventDefault(); cell.classList.add('bl-drop-over'); });
|
|||
|
|
cell.addEventListener('dragleave', () => cell.classList.remove('bl-drop-over'));
|
|||
|
|
cell.addEventListener('drop', (e) => {
|
|||
|
|
e.preventDefault(); stopDragAutoScroll(); cell.classList.remove('bl-drop-over');
|
|||
|
|
const data = e.dataTransfer.getData('text/plain') || '';
|
|||
|
|
if (data.startsWith('lib:')) assign(slot.index, data.slice(4));
|
|||
|
|
else if (data.startsWith('slot:')) { const from = data.slice(5); if (from !== String(slot.index)) api(`/move?from=${from}&to=${slot.index}`, { method: 'POST' }); }
|
|||
|
|
});
|
|||
|
|
cell.addEventListener('click', (e) => { if (e.target.closest('.bl-edit-name') || e.target.closest('.bl-edit-clear')) return; if (selectedLibId) assign(slot.index, selectedLibId); });
|
|||
|
|
boardEl.appendChild(cell);
|
|||
|
|
}
|
|||
|
|
body.appendChild(boardEl);
|
|||
|
|
|
|||
|
|
// Library
|
|||
|
|
const lib = el('div', 'bl-library');
|
|||
|
|
const list = state?.library || [];
|
|||
|
|
if (!list.length) lib.appendChild(el('div', 'bl-lib-empty', 'No photos yet — set a Google Drive folder link in Admin, or hit Sync. Then drag a photo onto a slot.'));
|
|||
|
|
for (const person of list) {
|
|||
|
|
const item = el('div', 'bl-lib-item'); item.draggable = true; item.dataset.id = person.id;
|
|||
|
|
if (person.id === selectedLibId) item.classList.add('bl-lib-selected');
|
|||
|
|
const ph = el('div', 'bl-lib-photo'); ph.appendChild(photoNode(person, 'bl-lib-img')); item.appendChild(ph);
|
|||
|
|
const nm = el('button', 'bl-lib-name', person.name || 'Name…');
|
|||
|
|
nm.addEventListener('click', (e) => { e.stopPropagation(); renameLibrary(person.id, person.name); });
|
|||
|
|
item.appendChild(nm);
|
|||
|
|
const del = el('button', 'bl-lib-del', '×'); del.title = 'Delete photo';
|
|||
|
|
del.addEventListener('click', (e) => { e.stopPropagation(); if (confirm(`Delete ${person.name || 'this photo'} from the library?`)) api(`/library/${person.id}/delete`, { method: 'POST' }); });
|
|||
|
|
item.appendChild(del);
|
|||
|
|
item.addEventListener('dragstart', (e) => {
|
|||
|
|
e.dataTransfer.setData('text/plain', 'lib:' + person.id); e.dataTransfer.effectAllowed = 'copy';
|
|||
|
|
dragBody = body; dragScrolling = true; startDragAutoScroll();
|
|||
|
|
});
|
|||
|
|
item.addEventListener('dragend', stopDragAutoScroll);
|
|||
|
|
item.addEventListener('click', () => { selectedLibId = selectedLibId === person.id ? '' : person.id; renderEditor(); });
|
|||
|
|
lib.appendChild(item);
|
|||
|
|
}
|
|||
|
|
body.appendChild(lib);
|
|||
|
|
wrap.appendChild(body);
|
|||
|
|
|
|||
|
|
root.innerHTML = '';
|
|||
|
|
root.appendChild(wrap);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function assign(slotIndex, personId) {
|
|||
|
|
selectedLibId = '';
|
|||
|
|
api(`/assign?slot=${slotIndex}&personId=${encodeURIComponent(personId)}`, { method: 'POST' });
|
|||
|
|
}
|
|||
|
|
function renameSlot(slotIndex, currentName) {
|
|||
|
|
const name = prompt('Name for this spot (leave blank to remove a name-only spot):', currentName || '');
|
|||
|
|
if (name === null) return;
|
|||
|
|
api(`/slot/${slotIndex}/name?name=${encodeURIComponent(name.trim())}`, { method: 'POST' });
|
|||
|
|
}
|
|||
|
|
function renameLibrary(id, currentName) {
|
|||
|
|
const name = prompt('Rename this photo:', currentName || '');
|
|||
|
|
if (name === null) return;
|
|||
|
|
api(`/library/${id}?name=${encodeURIComponent(name.trim())}`, { method: 'POST' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------- lifecycle ---------- */
|
|||
|
|
return {
|
|||
|
|
start() {
|
|||
|
|
moduleApi.setStatus('connecting', 'Connecting…');
|
|||
|
|
const SYNC_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>';
|
|||
|
|
const EDIT_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>';
|
|||
|
|
moduleApi.header.addButton({
|
|||
|
|
icon: SYNC_ICON,
|
|||
|
|
title: 'Sync',
|
|||
|
|
onClick() { moduleApi.setStatus('connecting', 'Syncing with Planning Center…'); api('/sync', { method: 'POST' }); },
|
|||
|
|
});
|
|||
|
|
const editBtn = moduleApi.header.addButton({ icon: EDIT_ICON, title: 'Edit board', onClick() { editing = !editing; editBtn.classList.toggle('active', editing); render(); } });
|
|||
|
|
// Columns −/+ (touch-friendly; replaces the gear number field).
|
|||
|
|
const MINUS_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12h14"/></svg>';
|
|||
|
|
const PLUS_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>';
|
|||
|
|
const bumpCols = (d) => {
|
|||
|
|
const max = Math.max(1, state && state.slots ? state.slots.length : 12);
|
|||
|
|
const next = Math.max(1, Math.min(max, resolveCols() + d));
|
|||
|
|
moduleApi.saveInstanceSettings({ columns: next });
|
|||
|
|
render();
|
|||
|
|
};
|
|||
|
|
moduleApi.header.addButton({ icon: MINUS_ICON, title: 'Fewer columns', onClick() { bumpCols(-1); } });
|
|||
|
|
moduleApi.header.addButton({ icon: PLUS_ICON, title: 'More columns', onClick() { bumpCols(1); } });
|
|||
|
|
const CHOIR_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="18" r="2.5"/><circle cx="17" cy="16" r="2.5"/><path d="M8.5 18V5l11-2v13"/><path d="M8.5 8.5l11-2"/></svg>';
|
|||
|
|
choirBtn = moduleApi.header.addButton({ icon: CHOIR_ICON, title: 'Choir', onClick() { api('/choir', { method: 'POST' }); } });
|
|||
|
|
moduleApi.fetch('/state').then((r) => r.json()).then((d) => { state = d.state; render(); }).catch(() => {});
|
|||
|
|
stream = moduleApi.sse('/stream', {
|
|||
|
|
error() { reportStatus(); },
|
|||
|
|
events: {
|
|||
|
|
state(e) {
|
|||
|
|
try { state = JSON.parse(e.data); } catch { return; }
|
|||
|
|
// While editing, don't yank a rename prompt out from under the user:
|
|||
|
|
// re-render the editor only (state carries board + library).
|
|||
|
|
render();
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onResize() {},
|
|||
|
|
stop() {
|
|||
|
|
if (stream) { stream.close(); stream = null; }
|
|||
|
|
stopConfetti();
|
|||
|
|
stopParallax();
|
|||
|
|
stopDragAutoScroll();
|
|||
|
|
root.innerHTML = '';
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|