Gabriel Franco
8bb0c79659
Wires the Matchmaking menu section's Find Match button to the real queue:join/queue:leave flow: a searching state with cancel, the queue:banned countdown (banBanner.ts) with Find Match hidden until it expires, a brief assigned-mode reveal on match:found, and the handoff into MultiplayerMatch's two-phase init once round:start is known. After a match ends (round:reveal + result dismissal, local quit, or opponent quit via room:closed) the flow returns to the matchmaking menu without re-queuing. Also adds a shared GameClient singleton (net/client.ts) so every UI flow that talks to the server reuses one connection. Note: backend/src/matchmaking/queue.js actually sends round:start before match:found (the reverse of PROTOCOL.md's documented order), discovered via live two-tab testing against the real backend; matchmakingFlow.ts tracks both messages independently so either arrival order works.
214 lines
9.1 KiB
HTML
214 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Theme Guess — Pixel Palette</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="brand-swatches">
|
|
<i style="background:#fb4934"></i><i style="background:#b8bb26"></i>
|
|
<i style="background:#fabd2f"></i><i style="background:#83a598"></i>
|
|
</span>
|
|
<h1>Theme<span>Guess</span></h1>
|
|
</div>
|
|
|
|
<div id="solo-timer-mount"></div>
|
|
<button id="help-btn" class="theme-badge" title="Change theme / how to play">
|
|
🎮 <strong id="theme-name-badge">Gruvbox Dark</strong>
|
|
</button>
|
|
<div class="topbar-actions">
|
|
<button id="mute-btn" class="icon-btn" title="Mute sound" aria-label="Mute sound">🔊</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="progress-wrap">
|
|
<div class="progress-track"><div id="progress-fill" class="progress-fill"></div></div>
|
|
<span id="progress-label">0 / 12 TOKEN KINDS THEMED</span>
|
|
</div>
|
|
|
|
<div class="match-hud-row">
|
|
<div id="match-timer-hud" class="hidden"></div>
|
|
<button id="match-quit-btn" class="btn danger small hidden" title="Quit this match">✕ Quit</button>
|
|
</div>
|
|
<div id="match-timer-warning" class="hidden"></div>
|
|
|
|
<main class="board">
|
|
<div class="canvas-wrap">
|
|
<canvas id="code-canvas"></canvas>
|
|
|
|
<div id="picker-popover" class="popover hidden">
|
|
<div class="popover-arrow"></div>
|
|
<div class="popover-label" id="popover-label">Keyword</div>
|
|
<div class="popover-row">
|
|
<input type="color" id="popover-color" value="#ffffff" />
|
|
<input type="text" id="popover-hex" maxlength="7" spellcheck="false" autocomplete="off" />
|
|
</div>
|
|
<div class="popover-actions">
|
|
<button id="popover-cancel" class="btn ghost small">Cancel</button>
|
|
<button id="popover-apply" class="btn primary small">Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="panel-col" aria-label="Token kinds">
|
|
<div id="category-panel" class="panel"></div>
|
|
<div class="panel-actions">
|
|
<button id="reset-btn" class="btn ghost">↺ RESET COLORS</button>
|
|
<button id="reveal-btn" class="btn reveal" disabled>REVEAL MATCH ✨</button>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<section id="split-view" class="split-view hidden" aria-label="Match progress">
|
|
<div class="split-pane">
|
|
<div class="split-pane-label">Yours</div>
|
|
<div class="canvas-wrap split-canvas-wrap">
|
|
<canvas id="split-your-canvas" class="split-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="split-pane">
|
|
<div class="split-pane-label">Opponent</div>
|
|
<div class="canvas-wrap split-canvas-wrap">
|
|
<canvas id="opponent-canvas" class="split-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="intro-modal" class="modal-overlay">
|
|
<div class="modal menu-modal">
|
|
<h2>🕹️ THEME GUESS</h2>
|
|
<p>A snippet of code is hiding a classic color theme. Pick how you want to play.</p>
|
|
|
|
<div class="menu-sections">
|
|
<section id="menu-solo" class="menu-section" aria-label="Solo">
|
|
<h3>🧑💻 SOLO</h3>
|
|
<p class="menu-section-desc">Click any word to color it, then reveal how close your palette lands to the real theme.</p>
|
|
|
|
<div class="solo-config-group">
|
|
<p class="solo-config-label">⏱ TIME</p>
|
|
<div class="solo-radio-row">
|
|
<label class="solo-radio"><input type="radio" name="solo-time-mode" value="1min" checked />1 MIN</label>
|
|
<label class="solo-radio"><input type="radio" name="solo-time-mode" value="2min" />2 MIN</label>
|
|
<label class="solo-radio"><input type="radio" name="solo-time-mode" value="none" />NO LIMIT</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solo-config-group">
|
|
<p class="solo-config-label">🎨 THEME</p>
|
|
<div class="solo-radio-row">
|
|
<label class="solo-radio"><input type="radio" name="solo-theme-mode" value="random" checked />RANDOM</label>
|
|
<label class="solo-radio"><input type="radio" name="solo-theme-mode" value="choose" />CHOOSE</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="solo-theme-picker" class="hidden">
|
|
<p class="pick-theme-label">▼ PICK A THEME ▼</p>
|
|
<div id="theme-grid" class="theme-grid"></div>
|
|
</div>
|
|
|
|
<div class="solo-config-group">
|
|
<p class="solo-config-label">🤖 OPPONENT</p>
|
|
<div class="solo-radio-row">
|
|
<label class="solo-radio"><input type="radio" name="solo-opponent-mode" value="alone" checked />ALONE</label>
|
|
<label class="solo-radio"><input type="radio" name="solo-opponent-mode" value="bot" />VS BOT</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="solo-bot-difficulty" class="hidden">
|
|
<p class="solo-config-label">DIFFICULTY</p>
|
|
<div class="solo-radio-row">
|
|
<label class="solo-radio"><input type="radio" name="solo-bot-difficulty" value="easy" checked />EASY</label>
|
|
<label class="solo-radio"><input type="radio" name="solo-bot-difficulty" value="medium" />MEDIUM</label>
|
|
<label class="solo-radio"><input type="radio" name="solo-bot-difficulty" value="hard" />HARD</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-section-actions">
|
|
<button id="start-btn" class="btn primary">▶ PLAY</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="menu-private" class="menu-section" aria-label="Private">
|
|
<h3>🔒 PRIVATE</h3>
|
|
<p class="menu-section-desc">Play with friends in a private room, by invite code or a fresh room.</p>
|
|
<div class="menu-section-actions">
|
|
<button id="enter-code-btn" class="btn ghost">Enter Code</button>
|
|
<button id="create-room-btn" class="btn ghost">Create Room</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="menu-matchmaking" class="menu-section" aria-label="Matchmaking">
|
|
<h3>🌐 MATCHMAKING</h3>
|
|
<p class="menu-section-desc">Get paired with another player looking for a match right now.</p>
|
|
<div class="menu-section-actions">
|
|
<button id="find-match-btn" class="btn primary">Find Match</button>
|
|
</div>
|
|
<div id="matchmaking-status" class="hidden"></div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="result-modal" class="modal-overlay hidden">
|
|
<div class="modal result-modal">
|
|
<h2>MATCH RESULT</h2>
|
|
<div class="score-meter-wrap" id="solo-score-meter-wrap">
|
|
<div class="score-meter-number" id="score-number">0%</div>
|
|
<div class="score-meter-track" id="score-meter"></div>
|
|
</div>
|
|
<div id="score-verdict" class="verdict"></div>
|
|
<div id="score-breakdown" class="breakdown"></div>
|
|
<div class="compare-toggle" id="compare-toggle">
|
|
<button data-mode="yours" class="toggle-btn active">Your Palette</button>
|
|
<button data-mode="original" class="toggle-btn">Original</button>
|
|
</div>
|
|
<div id="mp-scoreboard" class="mp-scoreboard hidden">
|
|
<div id="mp-winner-banner" class="mp-winner-banner"></div>
|
|
<div class="mp-columns">
|
|
<div class="mp-column">
|
|
<div class="mp-column-label">You</div>
|
|
<div class="score-meter-wrap">
|
|
<div class="score-meter-number" id="mp-you-number">0%</div>
|
|
<div class="score-meter-track" id="mp-you-meter"></div>
|
|
</div>
|
|
<div class="breakdown" id="mp-you-breakdown"></div>
|
|
</div>
|
|
<div class="mp-column">
|
|
<div class="mp-column-label">Opponent</div>
|
|
<div class="score-meter-wrap">
|
|
<div class="score-meter-number" id="mp-opponent-number">0%</div>
|
|
<div class="score-meter-track" id="mp-opponent-meter"></div>
|
|
</div>
|
|
<div class="breakdown" id="mp-opponent-breakdown"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="close-result-btn" class="btn ghost">Keep Comparing</button>
|
|
<button id="change-theme-btn" class="btn ghost">🔄 Change Theme</button>
|
|
<button id="play-again-btn" class="btn primary">Play Again</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="preview-overlay" class="modal-overlay hidden">
|
|
<div class="preview-box">
|
|
<div class="preview-countdown" id="preview-countdown">5</div>
|
|
<div class="preview-caption" id="preview-caption">MEMORIZE THE VIBE...</div>
|
|
<div class="preview-canvas-wrap">
|
|
<canvas id="preview-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|