Skip to content

@tank/party-game-dev

1.2.0

Build Jackbox-style multiplayer party games with TypeScript. Covers host-player architecture, VIP role, Socket.IO networking, game state machines, room/lobby management, content safety, voting/scoring, and BDD testing. Triggers: party game, jackbox, multiplayer game, VIP, kick player, game room, socket.io game, game state machine, voting game, drawing game, trivia game, quiplash, host screen, player controller, content moderation, profanity filter, multiplayer testing


name: "@tank/party-game-dev" description: | Build real-time multiplayer party games (Jackbox-style) with full-stack TypeScript. Covers host-player architecture (TV + phones), VIP role (player with elevated control), Socket.IO networking, game state machines, room/lobby management, voting and scoring systems, content safety (profanity filtering, family mode, VIP censoring), and BDD testing with multiple browser contexts. Synthesizes patterns from Jackbox Games, Drawphone, Rocketcrab, Fishbowl, Socket.IO docs, and Playwright multi-context testing.

Trigger phrases: "party game", "jackbox", "multiplayer game", "real-time game", "game room", "lobby system", "room code", "socket.io game", "websocket game", "game state machine", "voting game", "drawing game", "trivia game", "quiplash", "drawful", "host screen", "player controller", "VIP", "game VIP", "room owner", "kick player", "ban player", "multiplayer testing", "game server", "party game backend", "prompt and response game", "audience voting", "game lobby", "turn-based multiplayer", "phone controller game", "content moderation", "profanity filter", "family friendly", "test multiplayer", "BDD game testing"

Party Game Development

Build Jackbox-style party games: one shared screen (TV/projector) runs the host display, each player uses their phone as a controller. The first player to join becomes the VIP — a player with elevated control (start game, kick players, censor content). The VIP is NOT the host. The host is the TV. All connected via WebSockets with server-authoritative state.

Core Philosophy

  1. Server owns the truth — All game state lives on the server. Clients send inputs, server validates, broadcasts results. No cheating possible.
  2. Rooms are ephemeral — In-memory state, 4-character room codes, auto-cleanup. No database needed for the game itself.
  3. Phones are dumb controllers — Player devices submit inputs and render state. Zero game logic on the client.
  4. VIP controls the game — First player to join gets elevated privileges (start, kick, censor, settings). Transfers automatically on disconnect.
  5. Test with real players — BDD tests spawn multiple browser contexts. No mocks. Real WebSocket connections. Real game flow.
  6. Ship the simplest game first — Prompt-response (Quiplash pattern) is the easiest to build. Start there, add complexity later.

Quick-Start

"I want to build a party game from scratch"

StepActionReference
1Choose game type (prompt-response recommended for first game)references/game-types-and-mechanics.md
2Scaffold project structure (monorepo: server + host + player)references/game-architecture.md
3Set up Socket.IO server with room managementreferences/multiplayer-networking.md
4Implement VIP role, kick/ban, room settingsreferences/vip-and-room-authority.md
5Implement game state machine (phases, rounds, timers)references/game-state-machines.md
6Add content safety (profanity filter, moderation)references/content-safety-and-moderation.md
7Build host screen (TV display) and player controller (phone)references/frontend-patterns.md
8Write BDD tests with multiple browser contextsreferences/bdd-multiplayer-testing.md
9Deploy with WebSocket supportreferences/deployment-and-ops.md

"I want to add a new game type to an existing project"

StepAction
1Pick game type blueprint from references/game-types-and-mechanics.md
2Define data models (prompts, answers, votes, scores)
3Implement round loop phases in game state machine
4Build game-specific UI components for host and player screens
5Write BDD feature files for the new game flow

"I need to test multiplayer interactions"

StepAction
1Set up playwright-bdd with .bdd/ directory structure
2Create multi-player fixtures (2-8 browser contexts)
3Write Gherkin with persona-based steps (Given Player "Alice"...)
4Implement page objects: LobbyPage, GamePage, ResultsPage
5Use Promise.all() for cross-player assertions
6Adapt assets/test-multiplayer-example.ts for quick Socket.IO smoke tests

Development Workflow

Phase 1: Lobby + VIP

Build room creation, room codes, player joining, VIP assignment, player list. Test: 3 players join, first player is VIP, VIP badge visible.

Phase 2: Game Loop

Implement phase transitions: Lobby -> Round Start -> Input -> Reveal -> Score. Test: VIP starts the game, a complete round flows from prompt to scoring.

Phase 3: Player Interaction

Add answer submission, voting, timer countdown, content filtering. Test: Players submit answers, vote, scores update correctly. Profanity filtered.

Phase 4: Moderation + Edge Cases

VIP kick/ban, content censoring, disconnect/reconnect, VIP migration. Test: VIP kicks player. Player disconnects and reconnects mid-game.

Phase 5: Polish

Animations, sound effects, haptic feedback, accessibility, mobile UX hardening.

Phase 6: Deploy

Docker + Fly.io (or Railway). Redis adapter if scaling beyond one server.

Decision Trees

Which Game Type to Build First?

If you want...BuildComplexity
Easiest to implementPrompt-response (Quiplash)Low
Visual/creativeDrawing game (Drawful)Medium
Knowledge-basedTrivia/quizMedium
Social deductionWord association / WavelengthHigh

Tech Stack

ComponentDefault ChoiceAlternative
ServerExpress + Socket.IOFastify + Socket.IO
FrontendReact + ViteSvelte, Vue
StylingTailwind CSSCSS Modules
AnimationFramer MotionCSS transitions
State machinePlain TypeScriptXState (complex games)
Testingplaywright-bdd@cucumber/cucumber + Playwright
HostingFly.ioRailway, Render

When to Add a Database?

ScenarioRecommendation
Game state during playIn-memory only
Player accounts / historyAdd PostgreSQL
Leaderboards across sessionsAdd PostgreSQL
Custom prompt packsJSON files or PostgreSQL
Analytics / game statsAdd PostgreSQL

VIP vs Host — When to Use Which?

ConceptRoleWho Controls It
HostThe TV/projector displayThe physical device running the app
VIPFirst player to joinA player on their phone with elevated privileges
PlayerParticipantsEveryone else on their phone

See references/vip-and-room-authority.md for full VIP implementation guide.

Content Safety Level

AudienceFilter LevelModeration
Private friendsoffNone
Mixed group / defaultmoderateProfanity filter
Family / streaming / workstrict + familyFriendlyHuman moderation queue

See references/content-safety-and-moderation.md for implementation.

Anti-Patterns

Don'tDo InsteadWhy
Client-side game logicServer-authoritative statePrevents cheating
Polling for game stateWebSocket pushReal-time updates
Use isHost for VIPUse isVIP for the controlling playerHost = TV, VIP = player
Trust client for VIP actionsValidate isVIP server-side on every actionSecurity
Skip content filteringAdd profanity filter at moderate minimumPublic safety
Shared browser context in testsSeparate BrowserContext per playerIsolated sessions
Fixed delays in testswaitForSelector / event-based waitsReliable timing
Database for live game stateIn-memory Map/ObjectSpeed, simplicity
Mocking WebSocket in testsReal Socket.IO connectionsTests what ships
Complex room code schemes4-char alphanumeric (exclude 0/O/1/I)Easy to read aloud

Assets (Examples)

FilePurpose
assets/test-multiplayer-example.tsSpawn N Socket.IO clients, simulate a game round. Adapt to your event names.
assets/lobby.featureGherkin feature for lobby creation and joining
assets/game-round.featureGherkin feature for a complete game round
assets/edge-cases.featureGherkin feature for disconnect/reconnect scenarios
assets/protocol-envelope.tsEvent envelope with dedup, version gating, and phase guarding
assets/audio-unlock-howler.tsxiOS audio unlock + preloader React provider (Howler.js)
assets/room-timeline.tsStructured room event log for post-game forensics and debugging
assets/loadtest-socketio.tsLoad test harness: spawn virtual players, measure p50/p95/p99 latency
assets/prompt-pack.schema.tsPrompt pack schema, validator, loader, and CLI validation runner

Reference Files

FileContents
references/game-architecture.mdHost-player model, project structure, tech stack, data flow, server setup
references/multiplayer-networking.mdSocket.IO setup, room management, event protocols, state sync, reconnection, scaling
references/game-state-machines.mdGame phases, round loops, timers, player state, game configuration, complete Game class
references/game-types-and-mechanics.mdPrompt-response, drawing, trivia, voting systems, scoring, data models per game type
references/vip-and-room-authority.mdVIP role (vs host), assignment, transfer, disconnect, kick/ban, room settings, bot replacement
references/content-safety-and-moderation.mdProfanity filtering, moderation queues, family mode, censoring, accessibility, mobile UX hardening
references/frontend-patterns.mdHost screen (TV), player controller (phone), React components, socket hooks, responsive design
references/bdd-multiplayer-testing.mdMulti-client Playwright fixtures, Gherkin multi-actor patterns, page objects, edge case testing
references/deployment-and-ops.mdWebSocket hosting, Docker, Redis scaling, sticky sessions, room cleanup, production checklist

Command Palette

Search skills, docs, and navigate Tank