InkEcho

Web-based party games often suffer from high friction (mandatory account creation, app downloads, complex lobby systems), brittle realtime networking (lost state on mobile tab switches or momentary drops), clunky canvas controls on touch devices, and dated user interfaces.

InkEcho delivers a zero-friction, ultra-responsive party game platform built with modern web standards: • Instant Join: 1-click room joining with ephemeral guest sessions or persistent user accounts. • Server-Authoritative Realtime Sync: Powered by Ably Pub/Sub with heartbeat presence, reconnection resilience, and optimistic client updates. • High-Performance Canvas: Mobile-optimized, touch-first HTML5 drawing canvas with quadratic Bézier smoothing, layered undo/redo history, brush sizes, and instant color palettes. • Cinematic Reveal Flow: Framer Motion-powered carousel and animated turn progression with community voting and exportable recaps.

The game loop flows seamlessly from Lobby configuration (timers, round count, player caps, profanity filters) to Round 1 (Write Initial Prompt), Round 2 (Draw Prompt), Round 3 (Describe Drawing), repeating until the full chain completes, culminating in a step-by-step presentation reveal and community vote.

The core game loop is governed by a server-authoritative finite state machine transitioning through: LOBBY → PROMPT_WRITE → DRAWING → DESCRIBING → REVEAL_CAROUSEL → VOTING_RECAP → RETURN_TO_LOBBY.

To ensure dynamic, collision-free gameplay, the turn rotation engine implements a mathematical assignment formula: Assigned Chain Index = (i + R) mod N where N is the number of players, i is the player index, and R is the active round index. This guarantees that in Round 0, Player i creates Chain i; in Round 1, Player i draws Chain (i+1) mod N; and no player ever receives their own submission during the match.

The engine also handles edge cases gracefully: if a player disconnects or lets the countdown timer expire, the server automatically submits placeholder content or the previous turn data to keep the multiplayer room moving without stalling.

Global multiplayer state synchronization operates with sub-100ms latency via Ably Realtime WebSockets structured into dedicated channels: • room:[roomId] — Lobby state, player readiness, settings mutations, host migrations, and room closures. • game:[gameId] — Phase transitions, synchronized countdown timers, turn submissions, and reveal progression. • chat:[roomId] — Ephemeral in-lobby and spectator text messaging.

Clients authenticate via /api/realtime/auth to receive signed TokenRequests before entering presence sets (playerId, name, role). Connection health is continuously monitored via presence heartbeats; if a client drops (e.g. mobile tab backgrounding), status transitions to RECONNECTING with a 30-second grace window, allowing seamless state recovery without kicking the player.

The HTML5 drawing canvas is built from the ground up for high responsiveness on mouse, touch, and stylus (Apple Pencil / S-Pen): • Smooth Bézier Interpolation: Pointer input events are smoothed using quadratic Bézier curves to eliminate jagged angles during high-speed strokes. • Coordinate Normalization: Normalizes coordinates (x_norm = x / width, y_norm = y / height) to guarantee visual parity across varying screen resolutions and aspect ratios. • Tooling Suite: Dynamic brush thickness (2px - 48px), matching eraser indicators, BFS flood fill on canvas ImageData, 16 curated vibrant/pastel color swatches, custom HEX color picker, and a 50-step undo/redo snapshot stack.

Upon turn completion, the canvas exports a compressed image/webp binary (0.85 quality) streamed directly to Cloudinary under inkecho/drawings. The resulting CDN URI and public_id are stored in the GameTurn document in MongoDB.

Comprehensive safety and moderation safeguards are embedded throughout the stack: • Strict Validation: Every API route and Server Action payload is validated with runtime Zod schemas. • Rate Limiting: Distributed token-bucket rate limiting via Upstash Redis REST API prevents DDoS and lobby spam. • Content Safety: Integrated profanity wordlist filtering sanitizes text prompts and user display names against harassment and XSS attacks. • Reporting Pipeline: In-game reporting tools allow players to flag toxic text or inappropriate drawings, immediately routing submissions to the moderation queue. • Admin Portal: Protected by Role-Based Access Control (RBAC), the /admin dashboard allows verified administrators to review reported content, ban abusive players, and curate starter prompt pools across FUNNY, OBJECT, ACTION, and POP_CULTURE categories.

InkEcho maintains rigorous quality assurance across all architectural layers: • Vitest: Unit tests for turn rotation math, state machine transitions, and countdown timer deadline calculators. • React Testing Library: Component integration tests for lobby controls, canvas toolbar interactions, and reveal carousels. • Playwright: Multi-browser end-to-end integration tests simulating 3-player concurrent room loops from lobby creation to voting recap.

Production infrastructure is hosted on Vercel with Serverless and Edge route optimization, MongoDB Atlas replica set clusters for transactional integrity, Ably Realtime edge network for WebSocket distribution, Cloudinary CDN for media delivery, and Vercel Cron jobs running /api/cron/cleanup every 10 minutes to prune stale rooms and expired guest records.

Shipped a production-grade realtime party game platform combining responsive drawing physics, robust server-authoritative turn sequencing, and seamless multiplayer synchronization deployed on Vercel with MongoDB Atlas and Ably Realtime.