# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Multiplayer Tetris Battle Royale game with 2-8 player real-time battles via WebSocket. Players clear rows to send garbage to opponents; last player standing wins.

## Commands

```bash
# Install dependencies
cd server && npm install

# Start server
cd server && npm start
# or
cd server && node index.js

# Server runs on http://localhost:3000 (or PORT env variable)
```

## Architecture

### Server-Client Model

- **Server** (`server/index.js`): Express + Socket.io handles all game logic authoritatively
  - Manages single global lobby with `lobby.players` Map
  - Game tick runs at 50ms intervals via `gameTick()`
  - Broadcasts state updates to all connected clients via `broadcastState()`
  - Tetromino definitions and board constants are duplicated on server

- **Client** (`public/js/`): Vanilla JavaScript with module pattern
  - `network.js`: Socket.io client wrapper, manages player/game state caching
  - `game.js`: `TetrisGame` class for local game state (mirrors server)
  - `renderer.js`: `TetrisRenderer` class - Canvas rendering for all player boards
  - `ui.js`: `UIManager` class - screen transitions, DOM manipulation
  - `app.js`: Entry point, ties modules together, game loop via `requestAnimationFrame`

### Game Flow

1. **Lobby**: Players join global lobby via `join-lobby` socket event
2. **Ready**: All players click READY; game starts when all ready (2-8 players)
3. **Game**: Server authoritative - client inputs sent via socket, server broadcasts state
4. **Elimination**: Player eliminated when piece locks at top or garbage fills board
5. **Victory**: Game ends when 1 active player remains

### Key Constants

- `BOARD_WIDTH = 10`, `BOARD_HEIGHT = 20`, `CELL_SIZE = 24`
- `LOBBY_ROOM = 'global-lobby'` - Socket.io room for all players
- Garbage rules: 2 lines cleared -> 1 garbage row, 3 -> 2, 4 (Tetris) -> 4 rows

### Socket Events

| Event | Direction | Payload |
|-------|-----------|---------|
| `join-lobby` | Client->Server | `{ playerName }` |
| `ready` | Client->Server | - |
| `player-move` | Client->Server | `{ playerId, direction }` |
| `player-rotate` | Client->Server | `{ playerId }` |
| `player-drop` | Client->Server | `{ playerId, hard }` |
| `player-joined` | Server->Client | `{ player, players }` |
| `player-left` | Server->Client | `{ playerId, players }` |
| `game-started` | Server->Client | `{ players, states }` |
| `state-update` | Server->Client | `states[]` |
| `game-over` | Server->Client | `{ states }` |

### Rendering

- Each player gets a dynamically created board with canvas + info divs
- `renderer.setActivePlayer()` marks current player's board as `.main`, others as `.spectator`
- Battle grid layout classes: `.single-player`, `.two-players`, `.multi-player`