feat: implement competitive clicker MVP with Colyseus.js
- Add real-time multiplayer game server with Colyseus - Implement unique player naming system with auto-increment - Create lobby system with automatic matchmaking - Build 10-minute competitive clicking game rooms (max 2 players) - Add admin dashboard for game management (pause/resume/restart/kick) - Implement Vue 3 client with professional UI - Add WebSocket communication with state synchronization - Include TypeScript throughout with proper typing - Create REST API for admin operations - Add reconnection support and error handling
This commit is contained in:
85
QUICKSTART.md
Normal file
85
QUICKSTART.md
Normal file
@@ -0,0 +1,85 @@
|
||||
# Quick Start Guide
|
||||
|
||||
## 🚀 Running the Project
|
||||
|
||||
The project is now ready to run! Both server and client are configured and running.
|
||||
|
||||
### Current Status:
|
||||
- ✅ **Server**: Running on http://localhost:3000
|
||||
- ✅ **Client**: Running on http://localhost:5173
|
||||
- ✅ **WebSocket**: ws://localhost:3000
|
||||
- ✅ **Admin Monitor**: http://localhost:3000/colyseus
|
||||
- ✅ **Admin Dashboard**: http://localhost:5173/dashboard
|
||||
|
||||
## 📝 How to Use
|
||||
|
||||
### For Players:
|
||||
1. Open http://localhost:5173 in your browser
|
||||
2. Enter your desired username
|
||||
3. Click "Quick Play" to join a game
|
||||
4. Click as fast as you can when the game starts!
|
||||
5. Games last 10 minutes, winner is the one with most clicks
|
||||
|
||||
### For Admins:
|
||||
1. Open http://localhost:5173/dashboard to access the admin panel
|
||||
2. Monitor all active games and players
|
||||
3. Control games: pause, resume, restart, or kick players
|
||||
4. View real-time statistics
|
||||
|
||||
## 🛠️ Development Commands
|
||||
|
||||
If you need to restart the services:
|
||||
|
||||
```bash
|
||||
# Kill existing processes
|
||||
pkill -f "ts-node"
|
||||
pkill -f "vite"
|
||||
|
||||
# Start server (from server directory)
|
||||
cd server
|
||||
npx ts-node src/index.ts
|
||||
|
||||
# Start client (from client directory - in another terminal)
|
||||
cd client
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 🎮 Game Flow
|
||||
|
||||
1. **Lobby**: Players join and set their names
|
||||
2. **Matchmaking**: Automatic pairing when 2 players are ready
|
||||
3. **Battle**: 10-minute clicking competition
|
||||
4. **Results**: Winner announced, new game starts automatically
|
||||
|
||||
## 📊 Monitoring
|
||||
|
||||
- **Colyseus Monitor**: http://localhost:3000/colyseus - Built-in room monitoring
|
||||
- **Admin Dashboard**: http://localhost:5173/dashboard - Custom admin interface
|
||||
- **API Health**: http://localhost:3000/health - Server health check
|
||||
|
||||
## 🔍 Troubleshooting
|
||||
|
||||
If you encounter issues:
|
||||
|
||||
1. Check server is running: `curl http://localhost:3000/health`
|
||||
2. Check client is accessible: Open http://localhost:5173
|
||||
3. Check console for WebSocket connection errors
|
||||
4. Ensure ports 3000 and 5173 are not in use by other applications
|
||||
|
||||
## 🎯 Next Steps
|
||||
|
||||
The MVP is complete with:
|
||||
- ✅ Real-time multiplayer gameplay
|
||||
- ✅ Automatic matchmaking
|
||||
- ✅ Unique player naming system
|
||||
- ✅ Admin controls
|
||||
- ✅ Professional UI with animations
|
||||
- ✅ WebSocket communication
|
||||
- ✅ TypeScript throughout
|
||||
|
||||
You can now:
|
||||
- Test the game with multiple browser tabs
|
||||
- Customize the UI styles
|
||||
- Add sound effects
|
||||
- Implement additional game modes
|
||||
- Deploy to production
|
||||
Reference in New Issue
Block a user