// RetroVoting.jsx — the active retro board with tabs + dot voting. const { useState: useStateRV, useMemo: useMemoRV } = React; // ───────────────────────────────────────────────────────────── // Author badge — initials avatar // ───────────────────────────────────────────────────────────── function RVAuthor({ author, size = 22 }) { return (
{author.initials}
); } // ───────────────────────────────────────────────────────────── // Vote-count meter — dots showing base + player // ───────────────────────────────────────────────────────────── function RVVoteMeter({ baseVotes, playerVoted, colDef }) { // Show baseVotes filled dots + 1 if player voted, max display 6 const totalShown = Math.min(baseVotes + (playerVoted ? 1 : 0), 6); const dots = Array.from({ length: 6 }); return (
{dots.map((_, i) => { const filledBase = i < baseVotes; const filledPlayer = !filledBase && i === baseVotes && playerVoted; return ( ); })} {baseVotes + (playerVoted ? 1 : 0)}
); } // ───────────────────────────────────────────────────────────── // Single sticky note // ───────────────────────────────────────────────────────────── function RVStickyNote({ item, colDef, playerVoted, locked, canVote, onToggle }) { const disabled = locked || (!playerVoted && !canVote); return ( ); } // ───────────────────────────────────────────────────────────── // Tab switcher // ───────────────────────────────────────────────────────────── function RVTabs({ active, onChange, items, votesByCol }) { return (
{window.RETRO_COLUMNS.map((col) => { const isActive = col.id === active; const itemCount = (items[col.id] || []).length; const playerVotes = votesByCol[col.id] || 0; return ( ); })}
); } // ───────────────────────────────────────────────────────────── // Dots-remaining pill + sprint goal // ───────────────────────────────────────────────────────────── function RVHeader({ sgGoal, dotsLeft, dotsTotal, onBack }) { return (
Process review
{sgGoal}
{Array.from({ length: dotsTotal }).map((_, i) => ( ))} {dotsLeft} left
); } // ───────────────────────────────────────────────────────────── // Main board // ───────────────────────────────────────────────────────────── function RetroVoting({ items, sgGoal, onLock, onBack }) { const [activeTab, setActiveTab] = useStateRV("not_well"); const [votes, setVotes] = useStateRV({}); // { itemId: true } const [toast, setToast] = useStateRV(null); const totalVotes = window.RETRO_TOTAL_VOTES; const dotsSpent = Object.values(votes).filter(Boolean).length; const dotsLeft = totalVotes - dotsSpent; const votesByCol = useMemoRV(() => { const out = { went_well: 0, not_well: 0, actions: 0 }; window.RETRO_COLUMNS.forEach((col) => { out[col.id] = (items[col.id] || []).filter((it) => votes[it.id]).length; }); return out; }, [items, votes]); const flashToast = (text) => { setToast(text); setTimeout(() => setToast(null), 1600); }; const onToggle = (itemId) => { const already = votes[itemId]; if (!already && dotsLeft <= 0) { flashToast("All filed — tap a filed one to swap."); return; } setVotes((v) => { const next = { ...v }; if (already) delete next[itemId]; else next[itemId] = true; return next; }); }; const activeCol = window.RETRO_COLUMN_BY_ID[activeTab]; const visibleItems = useMemoRV(() => { const arr = [...(items[activeTab] || [])]; arr.sort((a, b) => { const aV = a.baseVotes + (votes[a.id] ? 1 : 0); const bV = b.baseVotes + (votes[b.id] ? 1 : 0); return bV - aV; }); return arr; }, [items, activeTab, votes]); const canLock = dotsSpent > 0; return (
{activeCol.sub}. Tap the observation to file it.
{visibleItems.map((item) => ( 0} onToggle={onToggle} /> ))}
{toast || (dotsLeft <= 0 ? "All filed. Lock it in, or swap one out." : `${dotsLeft} of ${totalVotes} to file — pick what to continue, start or stop.`)}
); } Object.assign(window, { RetroVoting });