Gabriel Franco
f0d08f3b50
- frontend/src/ui/privateRoomFlow.ts: create-room sub-flow (time/theme mode form, large shareable code, copy-to-clipboard with graceful no-op fallback, waiting-for-opponent state) and enter-code sub-flow (numeric input + inline room:error retry, no dead end). Handles room:joined for both themeMode:'random' (straight into the live match) and 'chosen' (vote-wait placeholder, TODO(#16) for the real vote modal). Listens for round:nextMatch to show a brief 'Match N of 5' transition, and room:closed to show the reason and return to the main menu. A room with no active session yet (waiting alone, or mid-vote) is abandoned via a socket disconnect/reconnect cycle, since player:quit is a no-op server-side without a session to attach to. - frontend/src/game/multiplayerMatch.ts: MultiplayerMatch now owns #split-view visibility (shown in startRound, hidden in teardownRound), mirroring botMatch.ts's existing convention — nothing previously made the opponent pane visible for a real multiplayer match. - frontend/src/net/client.ts: exports a shared `client` GameClient singleton (connects on import) so private rooms and matchmaking use one socket instead of each constructing their own. - frontend/index.html: adds the #private-room-mount overlay container. - frontend/src/style.css: private-room-* styles for the code display, join form, and error/status text. - frontend/src/main.ts: replaces only the enterCodeBtn/createRoomBtn TODO stubs with real privateRoomFlow wiring; findMatchBtn line untouched. |
||
|---|---|---|
| backend | ||
| frontend | ||
| .gitignore | ||
| AGENTS.md | ||
| README.md | ||
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.