# CLAUDE.md

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

## Project Overview

A novel visualization map for "大唐双龙传" (The Twin Dragons of Tang Dynasty), showing faction territories, character routes, and key events across 40 volumes. Built with Vue 3 + Vite + Leaflet.

## Commands

All commands run from the `frontend/` directory:

```bash
npm run dev       # Dev server at http://localhost:5173
npm run build     # Production build → ../dist
npm run preview   # Preview production build
```

No test or lint tooling is configured. Before adding either, propose the approach (Vitest for unit tests, Playwright for E2E).

## Architecture

### Data Flow

1. `frontend/App.vue` loads all `data/vol01.json`–`data/vol40.json` in parallel on mount
2. A volume slider (1–40) drives reactive computed properties that **merge** data from vol01 up to the selected volume
3. Leaflet layers redraw whenever merged data or the current volume changes

The Vite dev server has custom middleware (`vite.config.js`) to serve `/data` from `../data/`. The build also copies the data directory to `../dist`.

### Key Files

- `frontend/App.vue` — 875-line single-component app; handles all map state, data loading, and visualization logic
- `frontend/vite.config.js` — custom middleware for `/data` serving; build output to `../dist`
- `data/volXX.json` — structured data extracted from the novel (40 files)
- `content/卷XX.txt` — original novel source text (read-only, used only for data extraction)

### Data Schema (`data/volXX.json`)

```json
{
  "volume": "卷X",
  "chapters": ["第01章 标题", "..."],
  "locations": [{"id", "name", "type", "lat", "lng", "description"}],
  "factions": [{"id", "name", "type", "color", "leader", "territory"}],
  "character_routes": [{"character", "color", "route": [...]}],
  "key_events": [{"chapter", "location", "event"}]
}
```

### Special Logic in App.vue

- **Volumes 1–20**: Character routes for 寇仲 and 徐子陵 are merged into a single "寇仲 & 徐子陵" route
- **Volumes 21+**: Their routes are shown separately
- Faction territories, locations, and routes are cumulatively merged across all volumes up to `currentVol`

### Leaflet Setup

- Basemap: CartoDB Dark Matter
- Layer groups: territories, locations, routes, events
- Custom `div` icons for markers and labels
- Map interactions: click on markers to fly to location

## Code Style

- Vue 3 Composition API with `<script setup>` syntax
- Named imports only (no default imports except Vue/Leaflet internals)
- `camelCase` for functions, `UPPER_SNAKE_CASE` for constants, `kebab-case` for filenames
- Dark theme UI with `#c9a96e` gold accents

## Agents

Two sub-agents are defined in `.claude/agents/`:

- **novel-extractor** (Haiku): Reads `content/卷XX.txt`, extracts structured data, writes `data/volXX.json`
- **frontend-engineer** (Sonnet): Maintains the Vue 3 + Vite + Leaflet frontend