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>
4.7 KiB
4.7 KiB
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 beaconsrc/client/- Pygame desktop client with discovery and server selection UIweb/- Browser-based web client (HTML/CSS/JavaScript)tests/- Test files using pytest
Setup Commands
# 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
# 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
# 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 utilitiessrc/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 handlersrc/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 connectionsrc/client/renderer.py- Pygame renderingsrc/client/server_discovery.py- Multicast discoverysrc/client/server_selector.py- Server selection UI
Web Client Components:
web/index.html- Main HTML interfaceweb/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:
- Server starts TCP (8888), WebSocket (8889), HTTP (8000), and broadcasts on multicast (9999)
- Desktop clients discover via multicast; web clients use auto-detected WebSocket URL
- Clients connect and receive WELCOME with player_id
- Any player presses SPACE to send START_GAME
- Server creates snakes and spawns food
- Server loop: update → check collisions → broadcast state (protocol-agnostic)
- 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-httpflag - Use nginx/Apache to serve
web/directory - Proxy WebSocket connections to port 8889
- See
web/README.mdfor configuration examples