Files
claudePySnake/CLAUDE.md
Vladyslav Doloman ec8e9cd5fb Add web client with WebSocket support
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>
2025-10-04 14:39:13 +03:00

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 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

# 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 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