# Word Knight — Drawing Templates

Everything here is generated by `node scripts/make-item-templates.mjs`.
Re-run it any time; it overwrites this folder.

Download them from the running game at **<https://192.168.77.2:8443/templates/>**
(or the Parent Panel → Economy → *Drawing templates*).

---

## Canvas sizes — the only three that exist

| What | Size | Notes |
|---|---|---|
| **Item icon** (weapon, armour, accessory, potion…) | **16 × 16** | `BLANK-item-16x16.png` |
| **Knight overlay** (hair, beard, eyewear) | **16 × 18** | `BLANK-knight-overlay-16x18.png` — must line up with the knight body |
| **Monster** | **16 × 16** | `BLANK-monster-16x16.png` |

Nothing is ever drawn larger. The game scales these up with
`image-rendering: pixelated`, so a 16×16 icon is crisp at any size — draw at
**1×, never bigger**, or it will look soft next to everything else.

### Scene backgrounds (photographic / painted, not pixel-grid)

| What | Recommended size | Aspect | Notes |
|---|---|---|---|
| **Card background** | **512 × 640** | 4:5 | Behind the knight on the character card |
| **Camp / battle backdrop** | **1600 × 900** | 16:9 | Sits behind a dark scrim, so mid-tones work best |
| **Marketplace scene** | **1600 × 873** | ~1.83:1 | Shop hot-zones are positioned as % of the image |

Save scene art as PNG; the build step converts it to a sized JPEG.

---

## The palette keys

Item icons are drawn with **seven colour keys**, not fixed colours. The game
re-tints each key per item, which is how one `sword` grid becomes a rusty
shortsword *and* a glowing dragon fang.

| Key | Default | Means |
|---|---|---|
| `K` | `#15121f` | **outline** — the dark edge around the whole item |
| `A` | `#9aa0b0` | **body** — the main colour (this is what rarity/palette recolours) |
| `B` | `#5c3a18` | **secondary** — grip, strap, handle |
| `C` | `#d8dbe6` | **highlight** — the lit edge |
| `D` | `#3d2b1f` | **trim** — dark accent |
| `G` | `#7fd8ff` | **glow** — gems, enchantment, magic |
| `L` | `#ffffff` | **lustre** — the tiny specular dot |

Load `wordknight-palette.gpl` in Aseprite (*Palette → Load Palette*), or open
`PALETTE-swatches.png` and eyedrop from it. **Use only these seven colours** if
you want the item to recolour properly. Using an off-palette colour is allowed —
it just means that pixel is fixed and won't respond to the item's palette.

---

## Files

- `item-icons/*.png` — all 19 existing icons at exactly 16×16. Open one, edit,
  save as a new name. Fastest way to start.
- `BLANK-*.png` — empty canvases at each size.
- `REFERENCE-knight-base-16x18.png` — the knight body. **Open this as a bottom
  layer** when drawing hair/beard/eyewear so your overlay lines up.
- `REFERENCE-knight-base-8x.png` / `REFERENCE-overlay-example-8x.png` — zoomed
  reference showing how an overlay registers over the body.
- `SHEET-all-item-icons-8x.png` + `SHEET-order.txt` — every icon at 8× with a
  reading order.
- `wordknight-palette.gpl`, `PALETTE-swatches.png` — the palette.

---

## Getting a new item into the game

### If it reuses an existing shape (no drawing needed)

Add it to `content/custom-items.json` and pick an `icon_template`. Recolour it
with `palette`:

```json
{
  "key": "ember_axe",
  "name": "Ember Axe",
  "slot": "weapon",
  "rarity": "rare",
  "stats": { "attack": 9, "defense": 0, "magic": 2 },
  "icon_template": "axe",
  "palette": { "A": "#ff8a3a", "B": "#7a2020", "C": "#ffd166", "G": "#ffb03a" },
  "min_tier": 2,
  "flavor": "Still warm."
}
```

Then `./wk.sh seed`. Or use the Parent Panel → Economy → **＋ New item**, which
writes the same thing for you.

Available `icon_template` values:
`sword axe staff bow mace armor robe ring amulet hat boots feather crown acorn
potion powder scroll helm shield`

### If you drew a genuinely new shape

The grids live in `ITEM_ICONS` in `public/js/sprites.js`. They are character
grids, not image files — one letter per pixel:

```js
myshape: icon([
  '................',
  '.......KK.......',
  '......KAAK......',
  // ... 16 rows of 16 characters, '.' = transparent
]),
```

Add your grid there, add its name to `ICON_TEMPLATES` in
`server/item-templates.js`, and it becomes available to every item.

> **Honest limitation:** new **hair / beard / eyewear** styles need this code
> step — a JSON template alone cannot add a new overlay to the knight's body,
> because there is no grid for it to draw. Gear, hair *colours*, footwear, card
> frames, backdrops and titles are fully data-driven and need no code at all.