Implemented browser-based web client alongside existing pygame desktop client with dual-protocol server architecture supporting both TCP and WebSocket. Backend Changes: - Refactored GameServer for dual-protocol support (TCP + WebSocket) - Added WebSocketHandler for handling WebSocket connections - Added HTTPServer using aiohttp for serving web client files - Updated protocol handling to work with both connection types - Server tracks clients with protocol metadata (TCP/WebSocket) - Protocol-agnostic message sending and broadcasting - Added WebSocket port (8889) and HTTP port (8000) configuration Web Client: - Complete HTML5/CSS/JavaScript implementation - Responsive dark-themed UI - HTML5 Canvas rendering matching pygame visual style - WebSocket connection with auto-detected server URL - Real-time multiplayer gameplay in browser - Player list with scores and status - Mobile-friendly responsive design Deployment Options: - Development: Built-in HTTP server for local testing - Production: Disable HTTP server, use nginx/Apache for static files - Flexible server configuration (--no-http, --no-websocket flags) - Comprehensive nginx/Apache deployment documentation New Files: - src/server/websocket_handler.py - WebSocket connection handler - src/server/http_server.py - Static file server - web/index.html - Web client interface - web/style.css - Responsive styling - web/protocol.js - Protocol implementation - web/game.js - Game client with Canvas rendering - web/README.md - Deployment documentation Updated Files: - requirements.txt - Added websockets and aiohttp dependencies - src/server/game_server.py - Dual-protocol support - src/shared/constants.py - WebSocket and HTTP port constants - run_server.py - Server options for web support - README.md - Web client documentation - CLAUDE.md - Architecture documentation Features: - Web and desktop clients can play together simultaneously - Same JSON protocol for both client types - Independent server components (disable what you don't need) - Production-ready with reverse proxy support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
133 lines
4.7 KiB
Markdown
133 lines
4.7 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
This is a **network multiplayer Snake game** built with Python 3.11, featuring both web and desktop clients with dual-protocol support (TCP + WebSocket).
|
|
|
|
**Project Structure:**
|
|
- `src/shared/` - Shared code (models, protocol, constants, discovery utilities)
|
|
- `src/server/` - Dual-protocol game server (TCP + WebSocket), HTTP server, multicast beacon
|
|
- `src/client/` - Pygame desktop client with discovery and server selection UI
|
|
- `web/` - Browser-based web client (HTML/CSS/JavaScript)
|
|
- `tests/` - Test files using pytest
|
|
|
|
## Setup Commands
|
|
|
|
```bash
|
|
# Create and activate virtual environment
|
|
python -m venv venv
|
|
venv\Scripts\activate # Windows
|
|
# source venv/bin/activate # Linux/Mac
|
|
|
|
# Install dependencies
|
|
pip install -r requirements.txt
|
|
|
|
# Install development dependencies
|
|
pip install -r requirements-dev.txt
|
|
```
|
|
|
|
## Running the Game
|
|
|
|
```bash
|
|
# Web Client (easiest - no installation needed)
|
|
python run_server.py --name "My Game"
|
|
# Open browser to http://localhost:8000
|
|
|
|
# Desktop Client (pygame)
|
|
python run_client.py --name Alice
|
|
# Auto-discovers server on local network
|
|
|
|
# Server Options:
|
|
# --host HOST Bind address (default: localhost)
|
|
# --port PORT TCP port for desktop clients (default: 8888)
|
|
# --ws-port PORT WebSocket port for web clients (default: 8889, 0=disable)
|
|
# --http-port PORT HTTP server port (default: 8000, 0=disable)
|
|
# --name NAME Server name for discovery
|
|
# --no-discovery Disable multicast beacon
|
|
# --no-websocket Disable WebSocket server (desktop clients only)
|
|
# --no-http Disable HTTP server (use nginx/Apache in production)
|
|
# --web-dir PATH Web files directory (default: web)
|
|
|
|
# Production Deployment:
|
|
python run_server.py --no-http --host 0.0.0.0
|
|
# Use nginx to serve web/ directory and proxy WebSocket to port 8889
|
|
# See web/README.md for nginx configuration examples
|
|
|
|
# Press SPACE to start the game, arrow keys/WASD to move
|
|
```
|
|
|
|
## Development Commands
|
|
|
|
```bash
|
|
# Run all tests
|
|
pytest
|
|
|
|
# Run tests with coverage
|
|
pytest --cov=src --cov-report=html
|
|
|
|
# Format code with black
|
|
black src/ tests/
|
|
|
|
# Lint code
|
|
flake8 src/ tests/
|
|
|
|
# Type check
|
|
mypy src/
|
|
```
|
|
|
|
## Architecture
|
|
|
|
**Dual-Protocol Client-Server Model:**
|
|
- Server runs authoritative game loop using asyncio
|
|
- **Desktop clients** connect via TCP (port 8888) with newline-delimited JSON
|
|
- **Web clients** connect via WebSocket (port 8889) with JSON frames
|
|
- Server broadcasts game state updates to all clients at 10 FPS
|
|
- Desktop clients render at 60 FPS with pygame
|
|
- Web clients render at 60 FPS with HTML5 Canvas
|
|
|
|
**Key Backend Components:**
|
|
- `src/shared/protocol.py` - JSON-based message protocol (same for TCP and WebSocket)
|
|
- `src/shared/models.py` - Data models with serialization (Snake, Position, Food, GameState)
|
|
- `src/shared/constants.py` - Configuration (grid, colors, tick rate, ports)
|
|
- `src/shared/discovery.py` - Multicast discovery utilities
|
|
- `src/server/game_server.py` - Dual-protocol game server (TCP + WebSocket)
|
|
- `src/server/game_logic.py` - Game rules (movement, collision, food)
|
|
- `src/server/websocket_handler.py` - WebSocket connection handler
|
|
- `src/server/http_server.py` - Static file server for web client (aiohttp)
|
|
- `src/server/server_beacon.py` - UDP multicast beacon
|
|
|
|
**Desktop Client Components:**
|
|
- `src/client/game_client.py` - pygame client with TCP connection
|
|
- `src/client/renderer.py` - Pygame rendering
|
|
- `src/client/server_discovery.py` - Multicast discovery
|
|
- `src/client/server_selector.py` - Server selection UI
|
|
|
|
**Web Client Components:**
|
|
- `web/index.html` - Main HTML interface
|
|
- `web/style.css` - Responsive styling (dark theme)
|
|
- `web/protocol.js` - Protocol implementation (JavaScript)
|
|
- `web/game.js` - Game client with Canvas rendering and WebSocket connection
|
|
|
|
**Game Flow:**
|
|
1. Server starts TCP (8888), WebSocket (8889), HTTP (8000), and broadcasts on multicast (9999)
|
|
2. Desktop clients discover via multicast; web clients use auto-detected WebSocket URL
|
|
3. Clients connect and receive WELCOME with player_id
|
|
4. Any player presses SPACE to send START_GAME
|
|
5. Server creates snakes and spawns food
|
|
6. Server loop: update → check collisions → broadcast state (protocol-agnostic)
|
|
7. Game ends when ≤1 snake alive
|
|
|
|
**Protocol Handling:**
|
|
- Server stores clients as `(connection, ClientType.TCP|WEBSOCKET)`
|
|
- `send_to_client()` detects type and sends via appropriate method
|
|
- TCP: newline-delimited JSON (`message\n`)
|
|
- WebSocket: JSON frames (native WebSocket message)
|
|
|
|
**Production Deployment:**
|
|
- Run server with `--no-http` flag
|
|
- Use nginx/Apache to serve `web/` directory
|
|
- Proxy WebSocket connections to port 8889
|
|
- See `web/README.md` for configuration examples
|