🎮 zonenop-game
Vietnamese board & card games you can play online with friends — no sign-up, no install, right in the browser.
Create a table, share the invite link, and play Tiến Lên, Mèo Nổ, Cờ Tỷ Phú and more in real time, on desktop or phone.
Table of contents
🃏 Games
| Game | Players | Highlights | Route |
|---|
| 🃏 | Tiến Lên Miền Nam | 2–4 | Chặt heo, tới trắng, configurable rank points, spectators & emoji | /tien-len |
| 😼 | Mèo Nổ (Exploding Kittens-style) | 2–7 | "Không!" chains, 6 expansion packs, 16 preset combos or custom picks, per-card guide | /meo-no |
| 🎩 | Cờ Tỷ Phú (Monopoly-style) | 2–6 | Vietnamese provinces, 3 map sizes, houses & rent, trading, quick rule presets, tokens that wear your site profile, full / minimal phone layout | /co-ty-phu |
| 💎 | Đá Quý (Splendor-style) | 2–4 | Illustrated cards, nobles and gem tokens | /splendor |
| 🤠 | Đấu Súng (Bang!-style) | 3–8 | Secret roles, 63 characters, 7 expansions | /bang |
| 🐴 | Cờ Cá Ngựa (Vietnamese ludo) | 2–4 | Dice, kicking opponents home, 6-step stable climb | /co-ca-ngua |
| 🪨 | Ô Ăn Quan | 2–4 | Traditional sowing game, quan non, 5- or 10-stone quan | /o-an-quan |
| 🔤 | Nối Chữ | 2–8 | Vietnamese word chain: two-syllable words, last syllable continues the next word, out when the clock runs out | /noi-chu |
| 🔫 | Contra | 1 | 8-bit side-scrolling shooter on <canvas>, fully offline | /contra |
Every online table lives at /<game>/<ROOM>; add ?watch=1 to join as a spectator.
✨ Features
Playing together
- Instant tables — create a room, copy the invite link, friends join from the link. Players sign in with a free account (username + password, self-registration) so scores follow the account.
- Real-time play over WebSockets, with automatic reconnect: a reload or a flaky phone connection keeps your seat (secret reconnect token kept in the browser's
localStorage, shared by its tabs).
- Spectator mode for every table, plus in-table chat and emoji reactions.
- Lobby & "open tables" panel listing waiting and in-progress tables of every game.
- All-time leaderboards per game.
Player experience
- One player profile (name, icon and colour) shared by every game.
- Mobile-first tables that fit one screen, including phones held sideways (
short: variant, ≥ 36 px tap targets, pinch-zoom on large boards).
- Keyboard shortcuts on desktop, shown as
<kbd> hints on the buttons they trigger.
- Turn indicators, move history, scoreboards and a win celebration at the end of each game.
- Respects the OS reduced-motion setting (game-state animations stay).
Engineering
- The UI is a thin, typed client over the be_game backend; rules are validated client-side from shared protocol copies.
- Light on the backend: lobby polling (10 s per game lobby, 20 s for the all-tables panel) pauses in background tabs, and identical requests are shared.
- Card-art pipeline (
sharp) that turns source sprite sheets into optimised WebP.
- Self-hosted with Docker (Next.js standalone image) and continuous deployment over Tailscale.
🏛️ Architecture
flowchart LR
B["Browser<br/>(zonenop-game, Next.js)"] -- "HTTP: /api/<game>/rooms, /leaderboard" --> G
B <-- "WebSocket: /api/<game>/ws<br/>commands ⇄ state views" --> G
subgraph G["be_game (separate repo)"]
H["RoomHub per game"] --> S[("Redis<br/>rooms · pub/sub · leaderboard")]
end
- This repo is frontend only — no database. Rooms, game state, timers, WebSockets, accounts, sessions, leaderboards and admin stats live in the separate be_game repo, reached via
NEXT_PUBLIC_TIENLEN_SERVER_URL. Players must sign in (/dang-nhap) to play; the session is kept in localStorage["games:session"] and sent as Authorization: Bearer. Lobbies show a per-account "Mùa này" leaderboard next to the old per-name one, and /admin (admins only) shows traffic, games played and a user table. The first admin is granted on the backend by user id (bootstrap-admin.ts; ADMIN_USERNAMES only reserves names), and OWNER_USERNAME there protects that account from other admins. See docs/GAMES_GUIDE.md §10.
- The server is authoritative: the client sends commands, the server answers with a per-player view of the state (your hand, never anyone else's).
src/lib/<game>/ holds client copies of be_game's rules and protocol, used to validate moves and render state. Keep them in sync with be_game when either side changes.- The hub (
/) and every game route share one shell (GamesShell): top bar with game tabs, player profile, open-tables panel and footer.
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
