107 líneas
3.2 KiB
Markdown
107 líneas
3.2 KiB
Markdown
# Dominoes Online
|
|
|
|
A modern, real-time multiplayer dominoes game built with Next.js, TypeScript, Canvas, and Socket.IO.
|
|
|
|
## Features
|
|
|
|
- 🎮 **Real-time Multiplayer** - Play with friends online using WebSocket connections
|
|
- 🤖 **AI Opponent** - Play against an intelligent AI when no other players are available
|
|
- 🎨 **Beautiful UI** - Modern, responsive design with smooth animations
|
|
- 🎯 **Canvas Rendering** - Domino tiles rendered using HTML5 Canvas
|
|
- 📱 **Responsive** - Works great on desktop and mobile devices
|
|
- ⚡ **Fast & Real-time** - Instant updates for all players
|
|
|
|
## How to Play
|
|
|
|
1. **Create a Room** - Start a new game and share the room code with friends
|
|
2. **Join a Room** - Enter a room code to join an existing game
|
|
3. **Play vs AI** - Practice against an AI opponent
|
|
4. **Match Tiles** - Place tiles that match the numbers on the board ends
|
|
5. **Win** - First player to use all tiles wins!
|
|
|
|
## Game Rules
|
|
|
|
- Each player starts with 7 domino tiles
|
|
- Players take turns placing tiles that match the numbers on either end of the board
|
|
- If you can't play, draw a tile from the boneyard
|
|
- The game ends when a player uses all their tiles or when no one can move
|
|
- Lowest total value wins if the game is blocked
|
|
|
|
## Tech Stack
|
|
|
|
- **Next.js 16** - React framework for production
|
|
- **TypeScript** - Type-safe JavaScript
|
|
- **Socket.IO** - Real-time bidirectional communication
|
|
- **Zustand** - State management
|
|
- **Framer Motion** - Smooth animations
|
|
- **Tailwind CSS** - Utility-first CSS framework
|
|
- **HTML5 Canvas** - Tile rendering
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 18+ installed
|
|
- npm or yarn package manager
|
|
|
|
### Installation
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Run the custom server with Socket.IO:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Open [http://localhost:3000](http://localhost:3000) in your browser
|
|
|
|
**Note:** This project uses a custom Next.js server (`server.mjs`) to integrate Socket.IO for real-time multiplayer functionality.
|
|
|
|
## Development
|
|
|
|
### Project Structure
|
|
|
|
```
|
|
domino/
|
|
├── app/ # Next.js app directory
|
|
│ ├── api/socket/ # Socket.IO API route
|
|
│ ├── page.tsx # Main game page
|
|
│ └── layout.tsx # Root layout
|
|
├── components/ # React components
|
|
│ ├── DominoCanvas.tsx
|
|
│ ├── GameBoard.tsx
|
|
│ ├── PlayerHand.tsx
|
|
│ ├── Lobby.tsx
|
|
│ ├── WaitingRoom.tsx
|
|
│ └── GameOver.tsx
|
|
├── lib/ # Core game logic
|
|
│ ├── types.ts # TypeScript interfaces
|
|
│ ├── gameLogic.ts # Game mechanics
|
|
│ ├── aiLogic.ts # AI opponent
|
|
│ ├── store.ts # Zustand store
|
|
│ └── socket-server.ts # Socket.IO server
|
|
└── public/ # Static assets
|
|
```
|
|
|
|
### Available Scripts
|
|
|
|
- `npm run dev` - Start custom development server with Socket.IO
|
|
- `npm run build` - Build for production
|
|
- `npm start` - Start production server with Socket.IO
|
|
- `npm run lint` - Run ESLint
|
|
|
|
## Contributing
|
|
|
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
|
|
## License
|
|
|
|
MIT License - feel free to use this project for learning or personal use.
|
|
|
|
---
|
|
|
|
Enjoy playing dominoes online! 🎲
|