/* Brain Project - cinematic narration card + stepper (Systems & Learn).
Docked bottom-centre over the real 3D specimen. The structures named in
each stage glow on the actual brain; the chips select the true mesh. */
function sysAccent(sys) { return 'var(--c-' + (sys.cat || 'cortex') + ')'; }
/* lets the cinematic card be dragged anywhere by its header.
pos === null keeps the default docked position; once dragged we pin to px. */
function useDragCard(disabled) {
const ref = React.useRef(null);
const [pos, setPos] = React.useState(null);
const onPointerDown = (e) => {
if (disabled) return;
if (e.target.closest('button') || e.target.closest('input')) return;
const el = ref.current; if (!el) return;
const r = el.getBoundingClientRect();
const sx = e.clientX, sy = e.clientY, ox = r.left, oy = r.top, w = r.width, h = r.height;
setPos({ x: ox, y: oy });
const mv = (ev) => {
const nx = Math.max(8, Math.min(window.innerWidth - w - 8, ox + ev.clientX - sx));
const ny = Math.max(8, Math.min(window.innerHeight - 44, oy + ev.clientY - sy));
setPos({ x: nx, y: ny });
};
const up = () => { window.removeEventListener('pointermove', mv); window.removeEventListener('pointerup', up); };
window.addEventListener('pointermove', mv); window.addEventListener('pointerup', up);
};
// once moved, pin to fixed px (overrides the centred / docked defaults)
const override = pos ? { left: pos.x, top: pos.y, right: 'auto', bottom: 'auto', transform: 'none' } : null;
return { ref, override, onPointerDown, dragging: !!pos };
}
function StageChips({ stage, onSelectNode }) {
const NODES = window.SYS.NODES;
return (
{stage.nodes.map(k => {
const n = NODES[k]; if (!n) return null;
const id = window.SYS.repId(k);
const color = 'var(--c-' + n.cat + ')';
return (
);
})}
);
}
/* dot-line that doubles as a draggable scrubber */
function Stepper({ count, idx, setIdx }) {
const ref = React.useRef(null);
const scrub = (clientX) => {
const r = ref.current.getBoundingClientRect();
let t = (clientX - r.left) / r.width; t = Math.max(0, Math.min(1, t));
setIdx(Math.round(t * (count - 1)));
};
const down = (e) => { e.preventDefault(); scrub(e.clientX); const mv = (ev) => scrub(ev.clientX); const up = () => { window.removeEventListener('pointermove', mv); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', mv); window.addEventListener('pointerup', up); };
const pct = count > 1 ? (idx / (count - 1)) * 100 : 0;
return (
{Array.from({ length: count }).map((_, i) => {
const done = i <= idx;
return
);
}
function ControlBar({ count, idx, setIdx, playing, setPlaying, isLesson, onFinish }) {
const atEnd = idx >= count - 1;
const rbtn = (name, onClick, disabled, primary) => (
);
const next = () => { if (atEnd) { if (isLesson && onFinish) onFinish(); } else setIdx(idx + 1); };
return (
{rbtn('skipBack', () => setIdx(0), idx === 0)}
{rbtn('chevLeft', () => setIdx(Math.max(0, idx - 1)), idx === 0)}
{rbtn(playing ? 'pause' : 'play', () => setPlaying(p => !p), false, true)}
{String(idx + 1).padStart(2, '0')} / {String(count).padStart(2, '0')}
{isLesson && atEnd
?
: rbtn('chevRight', next, atEnd && !isLesson)}
);
}
function NarrationCard(props) {
const { sys, idx, setIdx, playing, setPlaying, onClose, onSelectNode, isLesson, onFinish, lessonTitle, mobile } = props;
const stage = sys.stages[idx];
const count = sys.stages.length;
const accent = sysAccent(sys);
const drag = useDragCard(mobile);
// autoplay
React.useEffect(() => {
if (!playing) return;
if (idx >= count - 1) { setPlaying(false); return; }
const t = setTimeout(() => setIdx(idx + 1), 5200);
return () => clearTimeout(t);
}, [playing, idx, count]);
// arrow-key stepping
React.useEffect(() => {
const h = (e) => {
if (e.target.tagName === 'INPUT') return;
if (e.key === 'ArrowRight') { setIdx(Math.min(count - 1, idx + 1)); }
else if (e.key === 'ArrowLeft') { setIdx(Math.max(0, idx - 1)); }
};
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, [idx, count]);
const header = (
{isLesson ? 'Lesson · ' + (lessonTitle || sys.label) : 'System · ' + sys.label}
{!mobile && }
);
const cardStyle = mobile
? { position: 'absolute', left: 8, right: 8, bottom: 8, zIndex: 40, padding: '14px 15px 16px' }
: { position: 'absolute', left: '50%', bottom: 22, transform: 'translateX(-50%)', width: 'min(660px, calc(100vw - 48px))', zIndex: 40, padding: '16px 20px 18px', ...(drag.override || {}) };
return (
{header}
{stage.title}
{stage.body}
{!mobile &&
}