No description
Find a file
Gabriel Franco 8bb0c79659 feat(frontend): add matchmaking UI flow (Find Match)
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.
2026-09-10 14:07:00 -03:00
backend feat(backend): add private-room theme-voting flow 2026-09-10 12:40:44 -03:00
frontend feat(frontend): add matchmaking UI flow (Find Match) 2026-09-10 14:07:00 -03:00
.gitignore refactor(frontend): move to frontend/, port to Vite + TypeScript 2026-09-10 10:37:44 -03:00
AGENTS.md docs: rename trunk branch references from master to main 2026-09-10 10:41:42 -03:00
README.md feat(backend): scaffold matchmaking server project 2026-09-10 10:37:52 -03:00

Theme Guess

A browser game about syntax-highlighting themes. A snippet of code is rendered with every token type (keywords, strings, functions, variables, comments, ...) in a neutral color. You click a token, every token of that same kind lights up together, and you pick a color for it — repeat until the whole file is themed. Reveal shows how close your from-scratch palette landed to a real theme (Gruvbox, Tokyo Night, VS Code Dark+, GitHub Dark, Dracula, Catppuccin), token kind by token kind.

The project is moving from a single-player-only page toward supporting multiplayer matchmaking (race another player to the closest match on the same theme/snippet). This repo is split into a frontend game client and a backend matchmaking/realtime server so that work can land independently.

Layout

frontend/   Canvas game client: Vite + TypeScript, no UI framework.
backend/    Matchmaking + realtime session server: Node, HTTP + WebSocket.

Each package has its own package.json, dependencies, and scripts — see frontend/README.md-equivalent notes below and backend/src/*/README.md for what's reserved but not implemented yet.

Running the frontend

cd frontend
npm install
npm run dev       # Vite dev server with HMR
npm run build     # type-check + production bundle to dist/
npm run typecheck # tsc --noEmit only

Running the backend

cd backend
npm install
npm start         # node src/index.js
npm run dev       # same, with --watch

Boots a plain HTTP server (with a /health check) and attaches a WebSocket server to it. Matchmaking and room/session logic are not implemented yet — see backend/src/matchmaking/README.md and backend/src/rooms/README.md.

Status

Single-player game: playable. Multiplayer: backend is a bare HTTP+WS scaffold with no matchmaking logic yet; frontend has no multiplayer UI yet. See AGENTS.md for architecture notes and contribution conventions.