Add in-app pixel editor for sprites in admin UI

Build a dependency-free Canvas2D pixel editor integrated into the admin
Sprites tab. Each sprite card gains an EDIT button that opens a full-screen
editor for the sprite at its native 500x333 resolution.

Tools: pencil (1-8px brush, Bresenham interpolation), eraser, color picker
(palette + native input + pick-from-canvas), fill bucket (flood fill), pan.
Features: cursor-centered zoom, space-drag pan, undo/redo (snapshot per
stroke), pixel grid overlay, transparency checkerboard, load existing sprite,
and keyboard shortcuts (B/E/I/F, Space, +/-/0, Ctrl+Z/Y, G, Esc).

Export reuses the existing POST /api/admin/sprites/{type} upload endpoint via
srcCanvas.toBlob, so no server changes are required.

Closes #5

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
root
2026-06-08 15:39:31 -07:00
parent 38043d7d1f
commit 214ee8dd90
5 changed files with 973 additions and 0 deletions
+5
View File
@@ -48,6 +48,11 @@ Access at http://localhost:{web_port} (configured in config.json)
- **admin/** - Admin panel (login + tabbed settings UI)
- Theme management: rename display names, upload per-direction background PNGs, create new themes
- Display names stored in `config.json` `theme_names` map (folder name -> display name)
- **pixel-editor.js** - In-app Canvas2D pixel editor (Sprites tab "EDIT" button)
- Edits sprites at native 500x333; tools: pencil, eraser, color picker, fill bucket, pan
- Zoom/pan, undo/redo (snapshot-per-stroke), grid overlay, retro palette + native color input
- Exports a 500x333 PNG via `srcCanvas.toBlob` and POSTs to the existing `/api/admin/sprites/{type}` upload endpoint (no new server route)
- Keyboard: B/E/I/F tools, Space=pan, +/-/0 zoom, Ctrl+Z/Y undo/redo, G grid, Esc close
- **setup/** - First-run setup wizard (multi-step configuration)