Party Games
Next.js multiplayer game platform with QR-code room access, animal avatars, and WebSocket-driven spinning wheel mechanic.
A real-time multiplayer party game platform where players scan QR codes to join rooms, select procedurally-generated animal avatars, and participate in a synchronized spinning-wheel game. Authenticated via BCrypt tokens, backed by MySQL, and driven by WebSocket updates.
- Next.js 15
- React 19
- TypeScript (via Next.js config)
- TailwindCSS 3
- MySQL 2
- WebSocket (native)
- BCryptJS
- animal-avatar-generator
- QRCode.js
- Axios
- unique-names-generator
The frontend is a Next.js app that generates unique animal avatars for each player using the animal-avatar-generator library, keyed to usernames or custom seeds. Players enter a username on join and receive an SVG-based avatar rendered inline. The homepage displays a QR code pointing to a room URL (e.g., /1234), which anyone can scan to enter. Once in a room, players connect via WebSocket to a backend API server (configured in .env as WS_SERVER_API) and authenticate with a token returned after joining.
The core mechanic is an interactive spinning wheel built on HTML5 Canvas. When a user clicks Spin, the wheel accelerates (phase 1), maintains constant velocity (phase 2), and decelerates to a stop (phase 3) over 4 seconds, landing randomly within the chosen segment. The animation uses requestAnimationFrame for smooth 60fps rendering and calculates segment centers dynamically. A WebSocket message broadcasts the spin result to all connected players in the room, keeping the game in sync.
Authentication uses BCryptJS for password hashing (pepper: 'party_4ever') and MySQL login_sessions table to track active tokens. The backend validates tokens before allowing room access. The UI is styled with Tailwind CSS and features dark mode support. The project includes utility scripts for scaffolding React components and generating project documentation. With just 1 commit on Jan 30, 2025, this is an active, early-stage prototype.
- QR-code-driven room access: generated client-side with qrcode library; players scan to join without manual URL entry.
- Procedurally-generated animal avatars: rendered as base64-encoded SVG, tied to username or custom seed via animal-avatar-generator.
- 3-phase spinning-wheel animation: Canvas-based physics with variable acceleration/deceleration over 4 seconds; lands randomly within segments.
- WebSocket multiplayer sync: messages broadcast player joins, avatar data, and spin results to all connected clients in real-time.
- BCryptJS authentication with token-based sessions: hashed passwords stored in MySQL with pepper-based security.