josedario87
a28bc286a1
- 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
100 lines
2.9 KiB
Markdown
100 lines
2.9 KiB
Markdown
# Snatch Game - Competitive Clicker
|
|
|
|
A real-time multiplayer competitive clicker game built with Colyseus.js and Vue 3.
|
|
|
|
## Features
|
|
|
|
- 🎮 Real-time multiplayer gameplay
|
|
- 🏆 10-minute competitive clicking battles
|
|
- 👥 2 players per room with automatic matchmaking
|
|
- 🎯 Unique player naming system with auto-increment
|
|
- 🎛️ Admin dashboard for game management
|
|
- 📊 Real-time statistics and monitoring
|
|
- 🔄 Automatic reconnection support
|
|
- ⏸️ Pause/Resume/Restart game controls
|
|
|
|
## Tech Stack
|
|
|
|
- **Backend**: Colyseus.js, Express, TypeScript
|
|
- **Frontend**: Vue 3, Vite, TypeScript
|
|
- **Real-time**: WebSockets
|
|
- **Styling**: Custom CSS
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
# Install all dependencies
|
|
npm run install:all
|
|
```
|
|
|
|
## Development
|
|
|
|
```bash
|
|
# Start both server and client in development mode
|
|
npm run dev
|
|
```
|
|
|
|
This will start:
|
|
- Server on http://localhost:3000
|
|
- Client on http://localhost:5173
|
|
|
|
## URLs
|
|
|
|
- **Game**: http://localhost:5173
|
|
- **Admin Dashboard**: http://localhost:5173/dashboard
|
|
- **Colyseus Monitor**: http://localhost:3000/colyseus
|
|
- **API Endpoints**: http://localhost:3000/api
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
snatchgame/
|
|
├── server/ # Backend Colyseus server
|
|
│ ├── src/
|
|
│ │ ├── rooms/ # Game and Lobby rooms
|
|
│ │ ├── schemas/ # State schemas
|
|
│ │ ├── utils/ # Utilities (name manager)
|
|
│ │ ├── adminApi.ts # Admin REST API
|
|
│ │ └── index.ts # Server entry point
|
|
│ └── package.json
|
|
│
|
|
├── client/ # Frontend Vue application
|
|
│ ├── src/
|
|
│ │ ├── views/ # Vue components (Lobby, Game, Dashboard)
|
|
│ │ ├── services/ # Colyseus client service
|
|
│ │ ├── router/ # Vue Router
|
|
│ │ └── main.ts # App entry point
|
|
│ └── package.json
|
|
│
|
|
└── shared/ # Shared types between client and server
|
|
└── types.ts
|
|
```
|
|
|
|
## Game Rules
|
|
|
|
1. Players enter the lobby and choose a username
|
|
2. Click "Quick Play" to join or create a game room
|
|
3. Game starts when 2 players join a room
|
|
4. Players have 10 minutes to click as fast as possible
|
|
5. The player with the most clicks wins
|
|
6. Games automatically restart after finishing
|
|
|
|
## Admin Dashboard
|
|
|
|
The admin dashboard provides:
|
|
- View all active rooms and their status
|
|
- Pause/Resume games in progress
|
|
- Restart games
|
|
- Kick players from rooms
|
|
- View real-time statistics
|
|
- Monitor server performance
|
|
|
|
## API Endpoints
|
|
|
|
- `GET /api/rooms` - List all active rooms
|
|
- `GET /api/rooms/:roomId/stats` - Get room statistics
|
|
- `POST /api/rooms/:roomId/pause` - Pause a game
|
|
- `POST /api/rooms/:roomId/resume` - Resume a game
|
|
- `POST /api/rooms/:roomId/restart` - Restart a game
|
|
- `POST /api/rooms/:roomId/kick/:playerId` - Kick a player
|
|
- `GET /api/stats` - Get global server statistics |