[art] No mission thumbnails — 4 named missions render as text-only entries on title screen #12

New issue

Closed

opened 2026-09-23 14:33:44 +00:00 by Mark · 1 comment

Mark commented

2026-09-23 14:33:44 +00:00

Owner

Asset gap.

web/js/maps.js defines 4 missions (Sector 7 Underworks, Rooftop Relay, The Foundry, Supply Cache) with detailed map definitions (MW × MH grid + rows + walls + doors + props). The title screen shows the 4 missions in a vertical list as text only — no preview art.

What's missing:

Per-mission thumbnail (suggested: 320×180, 16:9, top-down map preview)
Could be: rendered preview from maps.js data at small scale, OR a hand-drawn mission thumbnail

Acceptance:

Title screen CAMPAIGN panel shows a thumbnail alongside each mission name
Locked missions show a dimmed/grey thumbnail or "LOCKED" overlay

Refs: web/js/maps.js map definitions, web/index.html CAMPAIGN section.

**Asset gap.** `web/js/maps.js` defines 4 missions (Sector 7 Underworks, Rooftop Relay, The Foundry, Supply Cache) with detailed map definitions (`MW × MH` grid + `rows` + `walls` + `doors` + `props`). The title screen shows the 4 missions in a vertical list as text only — no preview art. **What's missing:** - Per-mission thumbnail (suggested: 320×180, 16:9, top-down map preview) - Could be: rendered preview from `maps.js` data at small scale, OR a hand-drawn mission thumbnail **Acceptance:** - Title screen CAMPAIGN panel shows a thumbnail alongside each mission name - Locked missions show a dimmed/grey thumbnail or "LOCKED" overlay Refs: `web/js/maps.js` map definitions, `web/index.html` CAMPAIGN section.

Mark

2026-09-24 15:14:07 +00:00

closed this issue
added the
triage-approved
label

Mark commented

2026-09-24 15:23:47 +00:00

Author

Owner

Fixed in commit 0cc0b0c on main.

Added renderMissionThumb(canvas, map, locked) in web/js/ui.js that paints a 320x180 top-down map preview per mission from the same rows/scenery/squad/enemies data the gameplay uses (no extra asset files). showTitle() injects one canvas per mission entry and paints after innerHTML is set.

Locked missions render a dim variant with a centred LOCKED badge band (CSS adds grayscale(0.4) as a secondary cue). The .mission button is now a flex row with the thumbnail on the left, name and objective on the right.

Playwright smoke grew three new assertions: one canvas per mission button, all canvases 320x180 with painted pixels, locked missions render the LOCKED overlay band. Verified live: 4/4 thumbs painted 320x180, 304 non-bg pixels in the locked-overlay centre row.

make ci: 7 node smokes + gdlint + Playwright + Godot import — all PASS.

Fixed in commit 0cc0b0c on main. Added renderMissionThumb(canvas, map, locked) in web/js/ui.js that paints a 320x180 top-down map preview per mission from the same rows/scenery/squad/enemies data the gameplay uses (no extra asset files). showTitle() injects one canvas per mission entry and paints after innerHTML is set. Locked missions render a dim variant with a centred LOCKED badge band (CSS adds grayscale(0.4) as a secondary cue). The .mission button is now a flex row with the thumbnail on the left, name and objective on the right. Playwright smoke grew three new assertions: one canvas per mission button, all canvases 320x180 with painted pixels, locked missions render the LOCKED overlay band. Verified live: 4/4 thumbs painted 320x180, 304 non-bg pixels in the locked-overlay centre row. make ci: 7 node smokes + gdlint + Playwright + Godot import — all PASS.