# Tetris Battle Royale

A multiplayer Tetris Battle Royale game built with HTML, CSS, JavaScript, and Node.js.

## Features

- **2-8 Player Multiplayer**: Real-time battles via WebSocket
- **Battle Royale Mechanics**: Clear rows to send garbage to opponents
- **Classic Tetris Gameplay**: All 7 tetrominoes with standard rotation
- **Retro Visuals**: CRT scanlines, pixel art font, classic colors
- **Multiple Boards View**: See all players' boards simultaneously

## How It Works

When you clear rows, garbage rows are sent to random opponents:
- 2 lines cleared → 1 garbage row sent
- 3 lines cleared → 2 garbage rows sent
- 4 lines (Tetris) → 4 garbage rows sent

### Garbage & Elimination

When you receive garbage, your current piece is pushed upward. Pieces can temporarily exist **above the visible board** (negative Y) — you're not eliminated yet! The piece will drop back down naturally.

**You're only eliminated when:**
- A piece locks (is placed) with blocks in the top 2 rows (rows 0-1)
- This happens if too much garbage accumulates and you can't clear rows fast enough

The last player standing wins!

## Setup

1. Install dependencies:
   ```bash
   cd server
   npm install
   ```

2. Start the server:
   ```bash
   node index.js
   ```

3. Open `http://localhost:3000` in 2-8 browser tabs

4. Enter a room name and your name, then join

5. Click "READY" when all players are ready

## Testing

Run the test suite:
```bash
cd server && npm test
```

Run with coverage:
```bash
cd server && npm run test:coverage
```

The test suite includes 57 tests covering:
- Unit tests for pure game logic functions
- Integration tests for garbage system
- Socket.io integration tests for multiplayer flow

## Controls

- **Arrow Left/Right**: Move piece
- **Arrow Up**: Rotate piece
- **Arrow Down**: Soft drop
- **Space**: Hard drop

## Game Flow

1. **Lobby**: Players join a room and wait
2. **Ready**: All players click READY to start
3. **Game**: Play Tetris, clear rows to attack opponents
4. **Elimination**: Players are eliminated when pieces stack to the top
5. **Victory**: Last player standing wins

## File Structure

```
tetris-battle-royale/
├── server/
│   ├── index.js              # Node.js + Socket.io server
│   ├── game-logic.js         # Pure game logic functions (testable)
│   ├── __tests__/            # Jest test suite
│   │   ├── game-logic.test.js
│   │   ├── garbage-system.test.js
│   │   └── socket-integration.test.js
│   └── package.json
├── public/
│   ├── index.html        # Main HTML
│   ├── css/
│   │   └── style.css     # Retro styling with CRT effects
│   └── js/
│       ├── game.js       # Tetris game logic
│       ├── renderer.js   # Canvas rendering
│       ├── network.js    # Socket.io client
│       ├── ui.js         # UI management
│       └── app.js        # Main application
└── README.md
```

## Technology Stack

- **Frontend**: Vanilla JavaScript, HTML5 Canvas, CSS3
- **Backend**: Node.js, Express, Socket.io
- **No frameworks** - pure vanilla implementation

## Troubleshooting

- **Port already in use**: Change PORT in `server/index.js`
- **Can't connect**: Make sure server is running on port 3000
- **Game not starting**: Need at least 2 players ready
