# Tetris Attack — art spec

All art is **optional and drop-in**. The game ships fully playable on procedural
fallbacks; paint a sheet, drop it at the path below, set that `path` in
`data/tetrisattack-artwork.json`, and reload — no code changes needed. Any sheet
left `path: null` keeps rendering procedurally.

Style target: bright, crisp 16-bit **Super NES** look (no CRT/scanline overlay).
UI text uses the `m6x11` pixel font (already loaded).

---

## 1. Panels — `assets/images/tetrisattack/tetrisattack-panels.png`

`frameWidth: 48, frameHeight: 48` (a grid of 48×48 cells, left→right, top→bottom).

Six panel colors, in this fixed order (index = color):

| frame | color  |
|-------|--------|
| 0     | red    |
| 1     | yellow |
| 2     | green  |
| 3     | cyan   |
| 4     | purple |
| 5     | blue   |

- **Row 0 (frames 0–5)** — the normal resting panel for each color. Give each a
  distinct icon/shape as well as a distinct hue (the original uses heart, circle,
  up-triangle, diamond, star, inverted-triangle) so colorblind players can read
  the board by shape. The procedural fallback already draws these six shapes.
- **Row 1 (frames 6–11)** *(optional)* — the "face / flashing" state shown while a
  matched group is popping, same color order. If absent, the game tints/flashes
  the row-0 frame instead.

No "garbage block" art is needed — garbage panels are a versus-only mechanic and
this is a 1-player build.

---

## 2. Characters — `assets/images/tetrisattack/tetrisattack-characters.png`

`frameWidth: 200, frameHeight: 280` (portrait cells, left→right, top→bottom).

Six characters, **3 poses each** = 18 frames. Character order (rows), pose order
(columns within a row):

| row | character | frames (neutral, happy, worried) |
|-----|-----------|----------------------------------|
| 0   | Beth      | 0, 1, 2                          |
| 1   | Jerry     | 3, 4, 5                          |
| 2   | Michael   | 6, 7, 8                          |
| 3   | Steve     | 9, 10, 11                        |
| 4   | Victor    | 12, 13, 14                       |
| 5   | Klaxon    | 15, 16, 17                       |

The six characters are **friends you are helping**, not opponents — they watch
you dig their board out and react to how it's going:

- **neutral** — used in the Stage Clear intro cutscene and as the idle friend.
- **happy** — you just pulled off a chain/combo, or cleared their round (they cheer).
- **worried** — the stack is near the top, or you just topped out (they fret *with* you).

Until this sheet is supplied, characters fall back to their existing round
portraits from the shared `opponents.png` sheet (Beth 18, Jerry 10, Michael 15,
Steve 17, Victor 2, Klaxon 29).

To re-theme, re-order, or swap which friends appear, edit
`data/tetrisattack.json` → `stageClear.rounds` (each round's `characterId`,
`spriteIndex`, and its `introLines` / `winLines` / `loseLines` arrays —
`introLines` plays in order, one line per keypress, so write as many beats as you
like; win/lose lines are picked at random). The
character↔frame mapping above is by round order, so keep the sheet rows in sync
with that array.

## 3. Backgrounds — `assets/images/tetrisattack/background-{characterId}-r{1..5}.png`

One 1920×1080 image per friend per stage (`-r1`..`-r5`). These are lazy-loaded as
that friend's round begins, are shown behind their stage, and **one of them is
picked at random as the backdrop of their intro cutscene**.