/* board.jsx — Tableau de rétro : header, colonnes, contrôles animateur */
/* ---------------- Minuteur ---------------- */
function TimerPill({ timer, isAdmin, actions }) {
const [, force] = React.useState(0);
React.useEffect(() => {
if (!timer.running) return;
const i = setInterval(() => force(x => x + 1), 500);
return () => clearInterval(i);
}, [timer.running]);
let remaining = timer.running && timer.endsAt ? Math.max(0, timer.endsAt - Date.now()) : timer.durationMin * 60000;
const mm = Math.floor(remaining / 60000);
const ss = Math.floor((remaining % 60000) / 1000);
const expired = timer.running && remaining <= 0;
const urgent = timer.running && remaining > 0 && remaining < 30000;
return (
{expired ? "Temps !" : `${String(mm).padStart(2, "0")}:${String(ss).padStart(2, "0")}`}
{isAdmin && (
{!timer.running ? (
) : (
)}
}>
{[3, 5, 7, 10, 15].map(m => (
)}
);
}
/* ---------------- Header ---------------- */
function BoardHeader({ session, isAdmin, currentUser, colorsById, actions, hiddenCount, freshIds }) {
const phaseLabel = session.phase === "collecte" ? "Collecte en cours"
: session.phase === "clos" ? "Session terminée"
: "Révélation & discussion";
const phaseColor = session.phase === "collecte" ? "#E8A317" : session.phase === "clos" ? "#4A9E5C" : "#2E8B8B";
return (
);
}
/* Titre éditable */
function EditableTitle({ value, isAdmin, onChange }) {
const [editing, setEditing] = React.useState(false);
const [v, setV] = React.useState(value);
React.useEffect(() => setV(value), [value]);
if (editing && isAdmin) {
return (
setV(e.target.value)}
onBlur={() => { setEditing(false); onChange(v.trim() || value); }}
onKeyDown={e => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") { setV(value); setEditing(false); } }}
style={{ font: 'inherit', fontFamily: '"Bricolage Grotesque",sans-serif', fontWeight: 700, fontSize: "1.18rem",
border: "none", borderBottom: "2px solid var(--brand)", background: "transparent", color: "var(--ink)", outline: "none", width: 240 }} />
);
}
return (
isAdmin && setEditing(true)} title={isAdmin ? "Cliquer pour renommer" : ""}
style={{ fontSize: "1.18rem", cursor: isAdmin ? "text" : "default", lineHeight: 1.1,
whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "min(40vw, 360px)" }}>
{value}
);
}
/* ---------------- Colonne ---------------- */
function Column({ col, notes, session, isAdmin, currentUser, colorsById, actions,
draggingId, setDraggingId, dragOverCol, setDragOverCol }) {
const [adding, setAdding] = React.useState(false);
const canAdd = session.phase === "collecte" || (isAdmin && session.phase === "revue");
const hiddenN = notes.filter(n => !(n.revealed || n.authorId === currentUser.id)).length;
// notes regroupées : on affiche un cluster pour chaque groupId, sinon la note seule
const rendered = [];
const seenGroups = new Set();
notes.forEach(n => {
if (n.groupId) {
if (seenGroups.has(n.groupId)) return;
seenGroups.add(n.groupId);
rendered.push({ type: "group", groupId: n.groupId, notes: notes.filter(x => x.groupId === n.groupId) });
} else {
rendered.push({ type: "single", note: n });
}
});
const onColDrop = (e) => {
e.preventDefault();
setDragOverCol(null);
const id = e.dataTransfer.getData("text/plain");
if (id) actions.moveNote(id, col.id);
setDraggingId(null);
};
return (
{ if (isAdmin) { e.preventDefault(); setDragOverCol(col.id); } }}
onDragLeave={() => setDragOverCol(c => c === col.id ? null : c)}
onDrop={onColDrop}
style={{
flex: "1 1 0", minWidth: 300, display: "flex", flexDirection: "column",
background: dragOverCol === col.id ? "color-mix(in oklab, " + col.accent + " 10%, var(--board))" : "var(--board)",
borderRadius: 22, padding: 14,
boxShadow: "inset 0 0 0 1px var(--line)" + (dragOverCol === col.id ? ", 0 0 0 2px " + col.accent : ""),
transition: "background .15s, box-shadow .15s", minHeight: 0,
}}>
{/* En-tête de colonne */}
{col.emoji}
actions.renameColumn(col.id, name)} />
{notes.length}
{session.phase === "collecte" && hiddenN > 0 && (
{hiddenN}
)}
{isAdmin && session.columns.length > 1 && (
)}
{/* Liste */}
{canAdd && (
adding ? (
{ actions.addNote(col.id, text, colorId, anon); }}
onCancel={() => setAdding(false)} />
) : (
)
)}
{rendered.map(item => {
if (item.type === "single") {
const n = item.note;
const author = session.participants.find(u => u.id === n.authorId);
const canSee = n.revealed || n.authorId === currentUser.id;
return (
{ e.dataTransfer.setData("text/plain", note.id); setDraggingId(note.id); }}
dragging={draggingId === n.id}
onDropOnto={(target) => { if (draggingId && draggingId !== target.id) actions.groupNotes(draggingId, target.id); setDraggingId(null); }} />
);
}
// groupe
return (
);
})}
isAdmin && setEditing(true)} title={isAdmin ? "Cliquer pour renommer" : ""}
style={{ fontSize: "1.1rem", cursor: isAdmin ? "text" : "default" }}>{col.name}
;
}
/* ---------------- Groupe (cluster) ---------------- */
function GroupCluster({ groupId, notes, col, session, isAdmin, currentUser, colorsById, actions, draggingId, setDraggingId }) {
const totalVotes = notes.reduce((s, n) => s + n.votes.length, 0);
const [open, setOpen] = React.useState(true);
return (
{ if (isAdmin) e.preventDefault(); }}
onDrop={(e) => { e.preventDefault(); e.stopPropagation(); if (draggingId) { actions.addToGroup(draggingId, groupId); setDraggingId(null); } }}
style={{ borderRadius: 16, padding: 10, background: "color-mix(in oklab," + col.accent + " 9%, transparent)",
boxShadow: "inset 0 0 0 1.5px color-mix(in oklab," + col.accent + " 35%, transparent)" }}>
Groupe · {notes.length} notes
{totalVotes}
{isAdmin && (
)}
{notes.map(n => {
const author = session.participants.find(u => u.id === n.authorId);
const canSee = n.revealed || n.authorId === currentUser.id;
return (
{ e.dataTransfer.setData("text/plain", note.id); setDraggingId(note.id); }}
dragging={draggingId === n.id}
onDropOnto={(target) => { if (draggingId && draggingId !== target.id) actions.groupNotes(draggingId, target.id); setDraggingId(null); }} />
);
})}
{/* hint reveal */}
{isAdmin && session.phase === "collecte" && hiddenCount > 0 && (
Cliquez sur une note masquée pour la révéler une par une, ou « Tout révéler » dans le menu Animateur.
)}
{/* bandeau de clôture */}
{session.phase === "clos" && (
Session terminée — exportez le compte-rendu pour le tracer par mail.
)}
{session.columns.map(col => (
n.columnId === col.id)}
session={session} isAdmin={isAdmin} currentUser={currentUser} colorsById={colorsById}
actions={actions} draggingId={draggingId} setDraggingId={setDraggingId}
dragOverCol={dragOverCol} setDragOverCol={setDragOverCol} />
))}
{isAdmin && (
)}
);
}
Object.assign(window, { Board, BoardHeader, Column, GroupCluster, TimerPill, EditableTitle, ColTitle });