/* eslint-disable -- a gadget source is a frame script, not a module: the shell supplies React and its hooks as globals and calls Gadget itself. */ // Crowdsweeper: minesweeper for a crowd. Everyone picks cells at once; every // pick opens together when the turn timer runs out. The rules run on the // server (the moves' guards); this frame only draws the state and sends moves. function Gadget({ state, userId, surface, viewport }) { const MOVE = { join: 'QljGve9X9sXoPV5bjIQCC', start: 'JSLSRAWf6KkZYB9Toynr7', pick: 'CMWRAKhkFdrEvezeZxRBr', flag: 'hoRVdxgDNHKEZRQ5lrHW8', again: 'Xe9M-lSiDSchBn2kuF5pn', }; const N = 10; const { Button, Face, GameOverCard, Segmented, StatusLine } = window.GadgetKit; const kitClock = window.GadgetKit && window.GadgetKit.clock; const serverNow = () => (kitClock && kitClock.now ? kitClock.now() : Date.now()); const s = (state && state.shared) || {}; const phase = s.phase || 'lobby'; const board = Array.isArray(s.board) && s.board.length === N * N ? s.board : Array(N * N).fill(''); const players = Array.isArray(s.players) ? s.players.filter((p) => p && p.id) : []; const stats = (s.stats && typeof s.stats === 'object' && s.stats) || {}; const sel = (s.sel && typeof s.sel === 'object' && s.sel) || {}; const myFlags = (s.flags && s.flags[userId]) || {}; const joined = players.some((p) => p.id === userId); const me = stats[userId] || {}; const lives = typeof s.lives === 'number' ? s.lives : 3; const cellsLeft = typeof s.cellsLeft === 'number' ? s.cellsLeft : 85; const turnNo = Number(s.turnNo) || 0; const over = phase === 'won' || phase === 'lost'; const key = (i) => 'r' + (Math.floor(i / N) + 1) + 'c' + ((i % N) + 1); // ── Picks: everyone's, counted per cell; mine shown at once, then confirmed ── const [pending, setPending] = useState({}); // cell → true (picking) | null (taking back) const counts = useMemo(() => { const c = {}; for (const pid of Object.keys(sel)) { const m = sel[pid] || {}; for (const k of Object.keys(m)) if (m[k]) c[k] = (c[k] || 0) + 1; } return c; }, [s.sel]); const mineSel = sel[userId] || {}; useEffect(() => { // Drop a pending pick once the state agrees with it. setPending((p) => { const next = {}; let changed = false; for (const k of Object.keys(p)) { if (!!mineSel[k] === (p[k] === true)) changed = true; else next[k] = p[k]; } return changed ? next : p; }); }, [s.sel]); useEffect(() => { if (phase !== 'voting') setPending({}); }, [phase]); const isMyPick = (k) => (k in pending ? pending[k] === true : !!mineSel[k]); const myPickCount = Array.from(new Set(Object.keys(mineSel).concat(Object.keys(pending)))).filter(isMyPick).length; // ── Time: the server's clock, redrawn while something counts down ── const [, setTick] = useState(0); const jailUntil = Number(me.jailedUntil) || 0; const voteEndsAt = Number(s.voteEndsAt) || 0; const voteStartedAt = Number(s.voteStartedAt) || 0; const resultsEndsAt = Number(s.resultsEndsAt) || 0; const t = serverNow(); const counting = (phase === 'voting' && voteEndsAt > t) || jailUntil > t || (phase === 'results' && resultsEndsAt > t); useEffect(() => { if (!counting) return undefined; // A display timer for the countdowns on screen; the state itself never polls. const id = setInterval(() => setTick((n) => n + 1), 100); return () => clearInterval(id); }, [counting]); const jailed = jailUntil > t; const jailLeft = jailed ? Math.ceil((jailUntil - t) / 1000) : 0; // ── People: faces and names from the app, never ids ── const [people, setPeople] = useState({}); const ids = players.map((p) => p.id).concat(userId && !joined ? [userId] : []); const idsKey = ids.join(','); useEffect(() => { const g = window.gadget; if (!g || !g.people) return undefined; const missing = ids.filter((id) => !people[id]); if (!missing.length) return undefined; let live = true; g.people(missing).then((list) => { if (!live || !Array.isArray(list)) return; setPeople((prev) => { const next = { ...prev }; list.forEach((x) => { if (x && x.id) next[x.id] = x; }); return next; }); }); return () => { live = false; }; }, [idsKey]); const nameOf = (id) => (people[id] && people[id].name) || 'Player'; const faceOf = (id, size) => { const p = people[id] || {}; const shape = p.kind === 'agent' ? 'hex' : p.kind === 'buddy' ? 'squircle' : 'pebble'; return ( ); }; // ── Moves ── const [say, setSay] = useState(''); useEffect(() => { if (!say) return undefined; const id = setTimeout(() => setSay(''), 3500); return () => clearTimeout(id); }, [say]); const dispatch = (id, input) => window.gadget && window.gadget.state ? window.gadget.state.dispatch(id, input || {}) : Promise.resolve({ ok: false }); const refused = (r) => r && r.ok === false && r.code !== 'timeout'; const joinFirst = async () => { if (joined) return true; const r = await dispatch(MOVE.join); if (refused(r)) { setSay(r.reason || 'Could not join.'); return false; } return true; }; const [mode, setMode] = useState('pick'); const pick = async (i) => { if (phase !== 'voting' || board[i] || jailed) return; const k = key(i); const on = !isMyPick(k); setPending((p) => ({ ...p, [k]: on ? true : null })); const undo = () => setPending((p) => { const n = { ...p }; delete n[k]; return n; }); if (!(await joinFirst())) return undo(); const r = await dispatch(MOVE.pick, { row: Math.floor(i / N) + 1, col: (i % N) + 1 }); if (refused(r)) { undo(); setSay(r.reason || 'That pick didn’t go through.'); } }; const [flagPending, setFlagPending] = useState({}); const hasFlag = (k) => (k in flagPending ? flagPending[k] : !!myFlags[k]); useEffect(() => setFlagPending({}), [s.flags]); const flag = async (i) => { if (board[i] || !(phase === 'voting' || phase === 'results')) return; const k = key(i); setFlagPending((p) => ({ ...p, [k]: !hasFlag(k) })); if (!(await joinFirst())) return; const r = await dispatch(MOVE.flag, { row: Math.floor(i / N) + 1, col: (i % N) + 1 }); if (refused(r)) { setFlagPending((p) => { const n = { ...p }; delete n[k]; return n; }); setSay(r.reason || 'That flag didn’t go through.'); } }; const start = async () => { if (!(await joinFirst())) return; const r = await dispatch(MOVE.start); if (refused(r)) setSay(r.reason); }; const again = async () => { const r = await dispatch(MOVE.again); if (refused(r)) setSay(r.reason); }; const press = useRef(null); const onDown = (i) => { clearTimeout(press.current && press.current.t); press.current = { i, long: false, t: setTimeout(() => ((press.current.long = true), flag(i)), 450) }; }; const onUp = (i) => { const p = press.current; if (!p) return; clearTimeout(p.t); press.current = null; if (p.long || p.i !== i) return; if (mode === 'flag') flag(i); else pick(i); }; // ── The reveal: cells opened by the last turn pop in, once, when it lands ── const last = s.lastTurn || null; const seenTurn = useRef(last ? last.n : 0); const [animTurn, setAnimTurn] = useState(0); useEffect(() => { if (last && last.n !== seenTurn.current) { seenTurn.current = last.n; setAnimTurn(last.n); if (phase === 'won' && window.GadgetKit.confetti) window.GadgetKit.confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } }); } }, [last && last.n]); const revealOrder = useMemo(() => { if (!last || !last.cells) return {}; const picks = Object.keys(last.cells).filter((k) => last.cells[k] !== 'open'); const pos = (k) => { const m = /^r(\d+)c(\d+)$/.exec(k); return m ? [+m[1], +m[2]] : [0, 0]; }; const out = {}; for (const k of Object.keys(last.cells)) { const [r, c] = pos(k); let d = 99; for (const p of picks) { const [pr, pc] = pos(p); d = Math.min(d, Math.max(Math.abs(pr - r), Math.abs(pc - c))); } out[k] = picks.length ? d : 0; } return out; }, [last && last.n]); // ── Words ── const tLeft = voteEndsAt > t ? Math.max(0, voteEndsAt - t) : 0; const pickers = Object.keys(sel).filter((pid) => Object.values(sel[pid] || {}).some(Boolean)).length; let status, live = false, yours = false; if (phase === 'lobby') status = joined ? 'Ready when you are' : 'Join to play'; else if (phase === 'voting' && !voteEndsAt) { status = jailed ? 'In jail' : 'Pick cells to open'; yours = !jailed; live = true; } else if (phase === 'voting') { status = voteEndsAt > t ? 'Revealing in ' + Math.ceil(tLeft / 1000) + ' s' : 'Revealing…'; live = true; } else if (phase === 'results') status = 'Next turn in ' + Math.max(1, Math.ceil((resultsEndsAt - t) / 1000)) + ' s'; else if (phase === 'won') status = 'Board cleared'; else status = 'Out of lives'; let line = say; if (!line) { if (phase === 'lobby') line = 'Everyone picks at once. Every pick opens together.'; else if (phase === 'voting' && !voteEndsAt) line = jailed ? 'You hit a mine. Back in ' + jailLeft + ' s.' : 'The first pick starts an 8 second timer.'; else if (phase === 'voting') line = pickers + (pickers === 1 ? ' player' : ' players') + ' picking · ' + Object.keys(counts).length + (Object.keys(counts).length === 1 ? ' cell' : ' cells'); else line = s.note || ''; } const frac = phase === 'voting' && voteEndsAt && voteEndsAt > voteStartedAt ? Math.max(0, Math.min(1, tLeft / (voteEndsAt - voteStartedAt))) : phase === 'voting' ? 1 : 0; // ── Leaderboard ── const ranked = players .map((p) => ({ id: p.id, ...(stats[p.id] || {}) })) .sort((a, b) => (b.score || 0) - (a.score || 0) || (a.id < b.id ? -1 : 1)); const myRank = ranked.findIndex((p) => p.id === userId) + 1; const endKey = phase + ':' + turnNo; const [dismissed, setDismissed] = useState(null); const compact = viewport === 'compact' || viewport === 'mobile'; const css = ` .cs { --cs-gap: 3px; color: var(--gadget-text); font-family: inherit; } .cs-board { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; background: var(--gadget-surface-2); padding: 6px; box-sizing: border-box; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .cs-grid { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: var(--cs-gap); width: 100%; height: 100%; } .cs-cell { position: relative; border: 0; padding: 0; margin: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; font: 700 clamp(11px, 3.4vw, 17px)/1 ui-rounded, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; } .cs-closed { background: var(--gadget-surface-0); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); cursor: pointer; } .cs-closed:hover { filter: brightness(0.96); } .cs-closed[aria-disabled='true'] { cursor: default; } .cs-mine-pick { background: var(--gadget-accent-wash); box-shadow: inset 0 0 0 2px var(--gadget-accent); } .cs-open { background: transparent; cursor: default; } .cs-boom { background: #e5484d; } .cs-lost { background: var(--gadget-surface-1); } .cs-heat { position: absolute; right: 2px; bottom: 2px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px; background: var(--gadget-text); color: var(--gadget-surface-0); font: 600 9px/14px system-ui, sans-serif; text-align: center; } .cs-pop { animation: cspop 380ms cubic-bezier(.2,1.4,.4,1) both; } @keyframes cspop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .cs-shake { animation: csshake 520ms ease both; } @keyframes csshake { 0%,100% { transform: none; } 20% { transform: translateX(-3px) scale(1.1); } 40% { transform: translateX(3px) scale(1.1); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } .cs-bar { height: 6px; border-radius: 3px; background: var(--gadget-surface-2); overflow: hidden; } .cs-bar > div { height: 100%; background: var(--gadget-accent); transform-origin: left center; } .cs-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-list { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; align-content: start; } .cs-row { display: flex; align-items: center; gap: 8px; min-width: 0; height: 28px; } .cs-overlay { position: absolute; inset: 0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(12,13,16,.42); text-align: center; padding: 16px; } .cs-overlay > div { background: var(--gadget-surface-0); border-radius: 12px; padding: 20px 24px; max-width: 280px; box-shadow: var(--gadget-shadow); display: flex; flex-direction: column; gap: 8px; align-items: center; } html[data-thumbnail] .cs-below { display: none; } @media (prefers-reduced-motion: reduce) { .cs-pop, .cs-shake { animation: none !important; } } `; const DIGIT = ['', '#2f5fd6', '#2fa36b', '#e5484d', '#6e3fc4', '#a8430f', '#0f8a8a', '#1f2229', '#7a7a7a']; const mineIcon = (fill) => ( ); const flagIcon = (size) => ( ); const cellView = (i) => { const v = board[i]; const k = key(i); const anim = animTurn && last && last.n === animTurn && last.cells && last.cells[k]; const delay = anim ? Math.min(900, (revealOrder[k] || 0) * 70) + 'ms' : undefined; const label = 'Row ' + (Math.floor(i / N) + 1) + ', column ' + ((i % N) + 1); if (v === '') { const mine = isMyPick(k); const heat = counts[k] || 0; const shownHeat = heat + (mine && !mineSel[k] ? 1 : 0) - (!mine && mineSel[k] ? 1 : 0); const open = phase === 'voting' && !jailed; return ( ); } let cls = 'cs-cell cs-open'; let body = null; if (v === 'boom') { cls = 'cs-cell cs-boom'; body = mineIcon('#1f2229'); } else if (v === 'mine') { cls = 'cs-cell cs-lost'; body = mineIcon('var(--gadget-text)'); } else if (v === 'flag') { cls = 'cs-cell cs-lost'; body = flagIcon('62%'); } else { const n = Number(v) || 0; body = n ? {n} : null; } if (anim) cls += v === 'boom' ? ' cs-shake' : ' cs-pop'; return (

{body}

); }; // ── In a chat card: the board at a glance; it opens the game ── if (surface === 'message') { const open = () => window.gadget && window.gadget.open && window.gadget.open(); const S = 9; return (

); } const heart = (on, i) => ( ); const myScore = Number(me.score) || 0; const streak = Number(me.streak) || 0; const meAction = phase === 'lobby' ? null : !joined ? ( ) : over ? ( dismissed === endKey ? ( ) : null ) : jailed ? ( In jail · {jailLeft} s ) : ( ); return (

{status}. {line}

{/* Lives, the state of play, the turn: one fixed row */}

{[0, 1, 2].map((i) => heart(i < lives, i))}

{phase === 'lobby' ? '' : 'Turn ' + Math.max(1, turnNo + (phase === 'voting' ? 1 : 0)) + ' · ' + cellsLeft + ' left'}

{/* The turn timer: full when a turn waits for its first pick, draining to the reveal */}

{board.map((_, i) => cellView(i))}

{phase === 'lobby' ? (

Minesweeper for a crowd

Pick the cells you think are safe. Every pick opens at once when the timer runs out. Three shared lives.

{!joined ? ( ) : null}

{players.length} joined

) : null} {over && dismissed !== endKey ? ( setDismissed(endKey)} action={{ label: 'Play again', onAction: again }} /> ) : null}

{/* What just happened, or why a move was refused */}

{line}

{/* You: score, streak, and what you can do */}

{faceOf(userId, 32)}

{joined ? myScore + ' points' : 'Watching'} {joined ? (myRank ? '#' + myRank + ' of ' + ranked.length : '') + (streak > 1 ? ' · streak ' + streak : '') + (phase === 'voting' && myPickCount ? ' · ' + myPickCount + ' picked' : '') : 'Join to pick cells'}

{meAction}

{/* Everyone, best first */}

{ranked.length} {ranked.length === 1 ? 'player' : 'players'}

{ranked.map((p, n) => { const inJail = (Number(p.jailedUntil) || 0) > t; const picking = Object.values(sel[p.id] || {}).some(Boolean); return (

{n + 1} {faceOf(p.id, 20)} {nameOf(p.id)} {inJail ? ' · jail' : picking && phase === 'voting' ? ' · picking' : ''} {p.score || 0}

); })}

); }

Crowdsweeper

How to play