From bf88a340d6f6befc274ecde8a64ee77893383b04 Mon Sep 17 00:00:00 2001 From: Gabriel Franco Date: Thu, 10 Sep 2026 14:23:44 -0300 Subject: [PATCH] feat(frontend): add theme-voting modal (countdown, live picks, settle) --- frontend/src/style.css | 42 +++++++++ frontend/src/ui/privateRoomFlow.ts | 60 ++++++++++-- frontend/src/ui/themeVote.ts | 147 +++++++++++++++++++++++++++++ 3 files changed, 241 insertions(+), 8 deletions(-) create mode 100644 frontend/src/ui/themeVote.ts diff --git a/frontend/src/style.css b/frontend/src/style.css index 952cd10..a7314ce 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -815,3 +815,45 @@ body { .private-room-error.hidden { display: none; } .private-room-transition h2 { color: var(--green); } + +/* ---------- theme-vote modal (#16: 10s countdown, live opponent pick, settle) ---------- */ + +.theme-vote-modal { text-align: center; } +.theme-vote-countdown { + font-family: var(--pixel); + font-size: 20px; + color: var(--yellow); + margin: 6px 0 14px; +} +.theme-vote-grid.theme-grid { margin: 0 0 14px; } +.theme-vote-opponent { + font-size: 12px; + color: var(--fg-dim); + margin: 0; +} + +.theme-vote-spin-name { + font-family: var(--pixel); + font-size: 22px; + color: var(--cyan); + margin: 18px 0; +} +.theme-vote-spin-name-final { color: var(--yellow); animation: pop .4s steps(4); } + +.theme-vote-agree { animation: agreeGlow 1.6s ease-out; } +.theme-vote-agree-banner { + font-size: 20px; + color: var(--green); + animation: pop .4s steps(4); +} +.theme-vote-settled-name { + font-family: var(--pixel); + font-size: 18px; + color: var(--yellow); + margin: 14px 0 0; +} +@keyframes agreeGlow { + 0% { box-shadow: 8px 8px 0 var(--ink), 0 0 0 0 rgba(95,215,95,.7); } + 40% { box-shadow: 8px 8px 0 var(--ink), 0 0 0 18px rgba(95,215,95,0); } + 100% { box-shadow: 8px 8px 0 var(--ink), 0 0 0 0 rgba(95,215,95,0); } +} diff --git a/frontend/src/ui/privateRoomFlow.ts b/frontend/src/ui/privateRoomFlow.ts index daaee87..bef4689 100644 --- a/frontend/src/ui/privateRoomFlow.ts +++ b/frontend/src/ui/privateRoomFlow.ts @@ -57,6 +57,7 @@ import type { import { MultiplayerMatch } from '../game/multiplayerMatch'; import { OpponentView } from '../game/opponentView'; import { ThemeGuessGame } from '../game/ThemeGuessGame'; +import { openThemeVote, type ThemeVoteHandle } from './themeVote'; export interface PrivateRoomFlowElements { /** Empty `.modal-overlay` mount (`#private-room-mount` in index.html) @@ -136,6 +137,16 @@ export function createPrivateRoomFlow( let match: MultiplayerMatch | null = null; const splitView = requireEl('split-view'); + let activeVoteHandle: ThemeVoteHandle | null = null; + // Set while the local theme-vote settle animation (spin/"YOU AGREE!") + // is still playing. `round:start` for the settled match can arrive + // from the server before that animation finishes (the backend fires + // it right after `vote:settled`) — in that case the payload is + // buffered here and `enterRound` runs once the animation completes, + // so the vote's own reveal is never cut short. + let voteAnimationPending = false; + let bufferedRoundStart: RoundStartMessage | null = null; + function clearTransitionTimeout(): void { if (transitionTimeoutId !== null) { window.clearTimeout(transitionTimeoutId); @@ -271,10 +282,11 @@ export function createPrivateRoomFlow( break; case 'vote-wait': - // TODO(#16): replace with real theme-vote modal (pick from - // `vote:start.themeIds`, live opponent-choice indicator via - // `vote:opponentChoice`). This ticket only needs to not hang — - // `round:start` (below) always follows `vote:settled`. + // Transient placeholder for the brief gap between `room:joined` + // and the server's `vote:start` (sent synchronously right + // after) — `client.on('vote:start', ...)` below replaces this + // mount content with the real `ui/themeVote.ts` modal as soon + // as it arrives. mount.innerHTML = `

🗳 Theme Vote

@@ -340,6 +352,16 @@ export function createPrivateRoomFlow( return match; } + /** Common tail of both `round:start` handling paths (immediate, or + * deferred until a theme-vote settle animation finishes): hides this + * flow's own overlay, shows the board, and starts/reuses the match. */ + function enterRound(payload: RoundStartMessage): void { + render({ kind: 'hidden' }); + callbacks.hideMenu(); + themeNameBadge.textContent = THEMES[payload.themeId].name; + ensureMatch(payload).startRound(payload); + } + client.on('room:created', (msg) => { render({ kind: 'create-waiting', code: msg.code }); }); @@ -358,6 +380,20 @@ export function createPrivateRoomFlow( } }); + client.on('vote:start', (msg) => { + if (!roomActive) return; + voteAnimationPending = true; + activeVoteHandle = openThemeVote(client, mount, msg, () => { + activeVoteHandle = null; + voteAnimationPending = false; + if (bufferedRoundStart) { + const payload = bufferedRoundStart; + bufferedRoundStart = null; + enterRound(payload); + } + }); + }); + client.on('round:nextMatch', (msg: RoundNextMatchMessage) => { if (!roomActive) return; render({ kind: 'match-transition', match: msg.match }); @@ -365,14 +401,22 @@ export function createPrivateRoomFlow( client.on('round:start', (payload) => { if (!roomActive) return; - render({ kind: 'hidden' }); - callbacks.hideMenu(); - themeNameBadge.textContent = THEMES[payload.themeId].name; - ensureMatch(payload).startRound(payload); + if (voteAnimationPending) { + // The settled theme's `round:start` beat the local vote-modal + // reveal animation (see `voteAnimationPending`'s declaration) — + // hold it until the animation's settle callback fires. + bufferedRoundStart = payload; + return; + } + enterRound(payload); }); client.on('room:closed', (msg) => { roomActive = false; + activeVoteHandle?.destroy(); + activeVoteHandle = null; + voteAnimationPending = false; + bufferedRoundStart = null; // The opponent's own `MultiplayerMatch.teardownRound()` never ran // for this abandoned round (only the quitter's local instance tore // its round down) — hide the stale split-view pane here so it diff --git a/frontend/src/ui/themeVote.ts b/frontend/src/ui/themeVote.ts new file mode 100644 index 0000000..0146bc7 --- /dev/null +++ b/frontend/src/ui/themeVote.ts @@ -0,0 +1,147 @@ +// Theme-voting modal for private rooms with `themeMode: 'chosen'` (ticket +// #16). Opened by `ui/privateRoomFlow.ts` when a `vote:start` message +// arrives (see backend/src/rooms/themeVote.js / PROTOCOL.md "Theme +// voting"): both players get 10 seconds to pick a theme via the reused +// `ui/themeGrid.ts` grid, see a live "opponent's current pick" indicator, +// and only react to the final theme once `vote:settled` arrives — never +// earlier, even if both picks already match before the countdown ends. +// +// This module owns a single mount element for its own lifetime (fully +// replaces its `innerHTML` once, on open, then patches small pieces of it +// directly — unlike `privateRoomFlow.ts`'s per-state full-`innerHTML` +// pattern — because the live countdown tick and opponent-pick updates +// need to mutate DOM without tearing down and rebuilding the theme grid +// on every tick). + +import { createThemeGrid } from './themeGrid'; +import type { GameClient } from '../net/client'; +import type { VoteSettledMessage, VoteStartMessage } from '../net/messages'; +import type { ThemeId } from '../types'; +import { THEMES } from '../data/themes'; + +/** How long the post-settle reveal animation (spin-between-picks, or the + * "YOU AGREE!" celebration) plays before `onSettled` fires and the modal + * tears itself down. Kept well under the 10s vote window so it never + * overlaps a *second* vote's `vote:start` in the (currently impossible, + * since a room only votes once per PROTOCOL.md) case of back-to-back + * votes. */ +const SETTLE_ANIMATION_MS = 1600; + +export interface ThemeVoteHandle { + /** Tears down the modal and its listeners/timers immediately, without + * playing the settle animation or calling `onSettled` — for when the + * room closes (opponent quit/disconnect) mid-vote. */ + destroy(): void; +} + +function themeLabel(id: ThemeId): string { + return THEMES[id].name; +} + +function countdownText(msRemaining: number): string { + const seconds = Math.max(0, Math.ceil(msRemaining / 1000)); + return `${seconds}s`; +} + +/** Opens the vote modal into `mount` (a `.modal-overlay` element the + * caller owns) for the given `vote:start` payload. Calls `onSettled` + * exactly once, after the reveal animation completes, with the final + * theme and whether both players agreed — the caller (`privateRoomFlow`) + * uses this to know when it's safe to hand off to the match view, even + * if `round:start` already arrived while the animation was still + * playing. */ +export function openThemeVote( + client: GameClient, + mount: HTMLElement, + msg: VoteStartMessage, + onSettled: (themeId: ThemeId, agreed: boolean) => void, +): ThemeVoteHandle { + let settled = false; + let myPick: ThemeId | null = null; + + mount.innerHTML = ` +
+

🗳 Pick a Theme

+

${countdownText(msg.endsAt - Date.now())}

+
+

Opponent is choosing…

+
`; + + const countdownEl = mount.querySelector('[data-el="countdown"]')!; + const gridEl = mount.querySelector('[data-el="grid"]')!; + const opponentEl = mount.querySelector('[data-el="opponent"]')!; + + createThemeGrid(gridEl, msg.themeIds[0], (id) => { + myPick = id; + client.send({ type: 'vote:cast', themeId: id }); + }); + + let countdownFrame = 0; + function tickCountdown(): void { + const remaining = msg.endsAt - Date.now(); + countdownEl.textContent = countdownText(remaining); + if (remaining > 0) countdownFrame = requestAnimationFrame(tickCountdown); + } + tickCountdown(); + + const unsubOpponent = client.on('vote:opponentChoice', (opp) => { + opponentEl.textContent = `Opponent picked ${themeLabel(opp.themeId)}`; + }); + + function cleanupListeners(): void { + cancelAnimationFrame(countdownFrame); + unsubOpponent(); + unsubSettled(); + } + + function playSettleAnimation(settledMsg: VoteSettledMessage): void { + countdownEl.textContent = ''; + if (settledMsg.agreed) { + mount.innerHTML = ` +
+

🎉 YOU AGREE! 🎉

+

${themeLabel(settledMsg.themeId)}

+
`; + } else { + mount.innerHTML = ` +
+

Settling…

+

${myPick ? themeLabel(myPick) : ''}

+
`; + // A brief "spinning between the two picks" flourish: alternate the + // displayed name a few times before landing on the real result. + const spinEl = mount.querySelector('[data-el="spin-name"]')!; + const candidates = [myPick, settledMsg.themeId].filter((id): id is ThemeId => id !== null); + let i = 0; + const spinInterval = window.setInterval(() => { + i += 1; + spinEl.textContent = themeLabel(candidates[i % candidates.length] ?? settledMsg.themeId); + }, 180); + window.setTimeout(() => { + window.clearInterval(spinInterval); + spinEl.textContent = themeLabel(settledMsg.themeId); + spinEl.classList.add('theme-vote-spin-name-final'); + }, SETTLE_ANIMATION_MS - 300); + } + window.setTimeout(() => { + onSettled(settledMsg.themeId, settledMsg.agreed); + }, SETTLE_ANIMATION_MS); + } + + const unsubSettled = client.on('vote:settled', (settledMsg) => { + if (settled) return; + settled = true; + cancelAnimationFrame(countdownFrame); + unsubOpponent(); + unsubSettled(); + playSettleAnimation(settledMsg); + }); + + return { + destroy(): void { + if (settled) return; + settled = true; + cleanupListeners(); + }, + }; +}