# CLAUDE.md

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

## Running the Game

Start a local web server (required for ES6 module loading):

```bash
# Linux/Mac
./start_web.sh
# or manually:
python3 -m http.server 8000
```

Then open `http://localhost:8000` in a browser.

No build step, bundler, or package manager is used. The game runs as plain ES6 modules in the browser.

## Tech Stack

- **Phaser 3** (HTML5 game framework, loaded via CDN or local file)
- **Vanilla JavaScript** with ES6 `import`/`export` — no transpilation
- **Tiled Map Editor** for level design (exports to `assets/tilesets/levels-a.json`)

## Project Architecture

This is a **pre-implementation project** — assets and specs exist, but no JavaScript or HTML source files have been created yet. The `software.md` file is the authoritative specification.

### Key Assets

- `assets/sprites/player.png` — 128×256px spritesheet; frame 0 = standing, frame 1 = walking
- `assets/sprites/platforms.png` — 1280×1280px spritesheet; 128×128 tiles in a 10×10 grid
- `assets/tilesets/levels-a.json` — Tiled JSON export for Level 1; 30×20 tiles at 128×128px each
- `assets/tilesets/platforms.tsx` — Tileset with tile property definitions (floor, solid, barrier, ladder, button, color)

### Game Mechanics (from software.md)

**Viewport:** 1600×900, scaled to user's viewport.

**Player:** Spawns at tile (3, 11) in Level 1. Three lives. Arrow keys for movement; up arrow jumps when not on a ladder; up/down arrows climb when on a ladder; player snaps to ladder center horizontally.

**Tile properties** (defined in `platforms.tsx`, embedded in map layers):
- `floor=true` — one-way collision; player can jump through from below but cannot fall through
- `solid=true` — impassable from all directions
- `ladder=true` — climbable; `top=true` marks the top rung (jumping is allowed from top)
- `button=true` + `color={red|yellow|blue|green}` + `pressed={true|false}` — player lands on top to press; only one button active at a time
- `barrier=true` + `color` — toggled solid/passable by matching button; only the color matching the pressed button is `solid=false`

**Button/Barrier color system:** Pressing a button sets all same-color barriers to passable and all other barriers to solid. Tile sprites update to reflect state.

### Intended Code Structure

Per `software.md`, the codebase should use modular ES6 classes:
- One HTML entry point that loads Phaser 3 and bootstraps the game
- Separate scene files for levels (framework must support multiple levels)
- Classes/modules for: Player, Level/TileMap, Button, Barrier, Ladder
- No web packager — all imports must be relative paths resolvable by the browser

### Sprite Tile ID Reference (platforms.png)

| Color  | Button unpressed | Button pressed | Barrier solid | Barrier passable |
|--------|-----------------|----------------|---------------|------------------|
| Red    | 8               | 18             | 20            | 21               |
| Blue   | 9               | 19             | 30            | 31               |
| Yellow | 28              | 38             | 40            | 41               |
| Green  | 29              | 39             | 50            | 51               |