Add complete Hanabi multiplayer web app with GitHub Pages deployment

[risingwolf21]

Summary

Full multiplayer Hanabi implementation + CI/CD to GitHub Pages.

• React 18 + TypeScript + Vite + Tailwind CSS v4 + Firebase Firestore
• Join via 6-character room code, Firebase Anonymous Auth (no signup)
• Real-time state via Firestore onSnapshot
• All 4 official multicolor variants selectable at room creation
• GitHub Actions builds on push to main, injects Firebase config from repo secrets, deploys to https://risingwolf21.github.io/hanabi/

Before merging — required setup

1. Enable GitHub Pages

Settings → Pages → Source → GitHub Actions

2. Add Firebase secrets

Settings → Secrets and variables → Actions → New repository secret

Add all 6 secrets (values from your Firebase project's web app config):

Secret name	Where to find it
VITE_FIREBASE_API_KEY	Firebase Console → Project Settings → Your apps
VITE_FIREBASE_AUTH_DOMAIN	same
VITE_FIREBASE_PROJECT_ID	same
VITE_FIREBASE_STORAGE_BUCKET	same
VITE_FIREBASE_MESSAGING_SENDER_ID	same
VITE_FIREBASE_APP_ID	same

3. Firebase project setup (if not done yet)

1. console.firebase.google.com → Create project
2. Firestore: Build → Firestore Database → Create → test mode
3. Auth: Authentication → Sign-in method → Anonymous → Enable

Architecture

Layer	Files
Types	src/lib/types.ts
Game logic (pure)	src/lib/gameEngine.ts
Firebase service	src/lib/firebase.ts, src/lib/firestore.ts
Hooks	src/hooks/useAuth.ts, src/hooks/useGame.ts
Lobby	src/components/lobby/
Game UI	src/components/game/ (9 components)
Routing	src/App.tsx — HashRouter for GitHub Pages compatibility

Test plan

• Add the 6 Firebase secrets to repo settings
• Enable GitHub Pages (Actions source)
• Merge → workflow triggers → check Actions tab for green build
• Visit https://risingwolf21.github.io/hanabi/ — lobby loads
• Open two tabs → create game in tab 1, join with code in tab 2
• Start game → each player sees their own hand face-down
• Give a clue → hint badges appear, token decrements in both tabs
• Play incorrect card → fuse increments; play correct card → firework advances
• Complete firework value 5 → hint token restores
• Burn 3 fuses → instant loss screen
• Complete all fireworks → confetti + "Legendary" win screen
• Refresh mid-game at /hanabi/#/game/ABCDEF → reconnects correctly (HashRouter)
• Test each multicolor variant option in room creation

https://claude.ai/code/session_01NjQtiaF6QdQc9KWj1N8xUW

---

Generated by Claude Code