# Chess Game Viewer

A single-file, self-contained HTML chess game viewer. One game per file. To make a new game, copy the file and swap the PGN block.

## What's in the box

- `chess-game.html` / `index.html` — the viewer with the **Opera Game** (Morphy 1858) loaded.
- `example2-kasparov-topalov.html` — a second copy with **Kasparov–Topalov 1999** loaded, demonstrating duplication.
- `_template.html` — the canonical template. Has `__PIECE_DEFS__` and `__PGN_HERE__` placeholders.
- `_build.py` — small builder: `python3 _build.py _opera.pgn chess-game.html` injects a PGN into the template.
- `_opera.pgn`, `_kasparov.pgn` — sample PGN sources.

## What you get on the page

- **8×8 board** with Cburnett SVG pieces and algebraic-notation labels on all four sides.
- **Last-move highlight** + **arrow** from origin → destination on the active move.
- **Captured material strip** above and below the board, with running material balance (e.g. `+3` for White).
- **Vertical evaluation bar** on the left of the board (only shown if your PGN has `[%eval ...]` markers).
- **Eval sparkline** under the board summarising the whole game's eval curve.
- **Move list** that wraps inline (PGN-style). Click any move to jump to that position. Annotated moves get a red `•` dot.
- **Commentary panel** under the move list always shows the current move's comment.
- **Auto-set page title, meta description, and Open Graph tags** from the PGN headers — great for sharing the link.
- **Controls:** Start · Prev · Play/Pause · Next · End · Flip · **Link** (copies a `?ply=N` URL to your clipboard).
- **Keyboard:** `←` `→` step · `Space` play/pause · `Home` `End` jump · `F` flip.
- **Deep links:** open `chess-game.html?ply=12` and the viewer boots at ply 12.

## PGN annotations supported

Inside `<script type="text/plain" id="pgn">…</script>`:

| Syntax            | Result                                                                 |
|-------------------|-------------------------------------------------------------------------|
| `{ comment }`     | Per-move commentary. Shown inline under the move and in the commentary panel. |
| `!`, `?`, `!!`, `??`, `!?`, `?!` | Move annotations (NAGs). Shown next to the move in the list. |
| `$1`..`$6`        | Numeric NAGs. Mapped to `!`, `?`, `!!`, `??`, `!?`, `?!`. |
| `[%eval 0.34]`    | Evaluation in pawns. Drives the eval bar + sparkline. |
| `[%eval #-3]`     | Forced-mate in N (negative = Black mates). Bar shows `M-3`. |

Lichess and Chess.com PGN exports use this exact format — paste directly.

## To make a new game

**Quick way (recommended):** save your PGN as `mygame.pgn`, then:

```
python3 _build.py mygame.pgn my-new-game.html
```

The builder reads `_template.html`, injects your PGN, and writes the standalone HTML.

**Manual way:** `cp chess-game.html my-new-game.html`, open in editor, replace the contents of the `<script type="text/plain" id="pgn">…</script>` block with your PGN. The seven-tag header (Event, Site, Date, Round, White, Black, Result) is read for the header above the board.

## Per-game styling (THEME block)

Near the top of the file (or `_template.html`) there's a `THEME` block in `:root`. Change these 5 variables for per-game colour:

```css
:root {
  --accent:    #c0392b;   /* button outline, eval marker, commentary border */
  --highlight: #f6d04d;   /* last-move square highlight */
  --arrow:     #4a86e8;   /* move arrow from origin → destination */
  --ink:       #1a1a1a;   /* main text */
  --paper:     #f4f1ea;   /* page background */
}
```

A few extra knobs (board light/dark squares, surface, muted text) live in the same block — change them too if you want a fully bespoke look per game.

## Hosting

- **Your own site:** upload as an `.html` file, link to it from a blog post or page.
- **GitHub Pages / Netlify / S3 / Cloudflare Pages:** drop the file in, done.
- **No iframe required** — but it'll embed cleanly in one if you ever need to.

## Tech credits

- [chess.js](https://github.com/jhlywa/chess.js) v1.4.0 (BSD-2) — PGN parsing and move generation.
- [Cburnett chess pieces](https://commons.wikimedia.org/wiki/File:Chess_Pieces_Sprite.svg) (CC-BY-SA 3.0) — the SVG piece set.