M008: Visual Asset Integration — wire spell, sigil, and condition icons into game UI #13

New issue

Closed

opened 2026-05-15 20:28:19 +00:00 by Mark · 1 comment

Mark commented

2026-05-15 20:28:19 +00:00

Owner

Summary

The game engine, data, and UI components exist for spells, sigils, conditions, and traps — but none of them render actual graphics. Spells show as plain text in the SpellHorizon and resolution overlay. Sigils are bare CSS circles with two-letter abbreviations. Conditions are colored text badges. We have 29 placeholder assets ready in public/ — they just aren't wired anywhere.

What's Missing

1. SpellDefinition needs `iconSrc`

File: src/engine/types.ts — add readonly iconSrc?: string to SpellDefinition
File: src/data/spells.ts — add iconSrc: "/spell-<id>.png" to each spell definition (the placeholder PNGs are already in public/)

2. SigilEntry needs `iconSrc`

File: src/data/symbols.ts — add readonly iconSrc?: string to SigilEntry
Add path references: /sigil-{seal,mask,current,snare,glint}.png (placeholders exist)

3. Render spell icons in SpellHorizon

File: src/components/SpellHorizon.tsx — currently shows spell name as text. Add the icon image beside the name using spell.iconSrc.

4. Render spell icons in resolution overlay

Files: src/pages/CasualDuel.tsx, RankedMatch.tsx, OnlineMatch.tsx, Campaign.tsx
The resolution overlay (Turn N Resolution) lists completed spells as bullet-point text. Add spell icon beside each name.

5. Wire sigil icons in ChainPane

File: inline in each page's renderSlot functions (6 files: CasualDuel, RankedMatch, OnlineMatch, Campaign, Tutorial, ReplayViewer)
Currently sigils render as styled CSS circles with two-letter text. Switch to use the sigil icon when available.

6. Wire condition icons in ConditionMarker

File: src/components/ConditionMarker.tsx — already has an optional iconSrc prop, but nothing ever passes it.
Pass the condition icon path from the condition type to icon mapping.

File: src/components/SpellHorizon.tsx — when a spell is expanded/hovered, show the spell art as a card image.

Slice Plan

S01 — Data Layer: Add iconSrc to types + data files

Add iconSrc to SpellDefinition (types.ts) and SigilEntry (symbols.ts)
Fill in paths in spells.ts and symbols.ts
Add condition to icon path mapping

S02 — Render Layer: Wire spell icons into UI

SpellHorizon: icon next to spell name
Resolution overlay (all 4 pages): icon next to completed spell
ConditionMarker: pass icon path from condition type

S03 — Sigil & Trap Icons

ChainPane/renderSlot: use sigil icon instead of CSS circle when available
TrapTellIndicator: wire icon display

Placeholder Assets Available

All generated as PNGs in public/:

19 spell-{id}.png (1264x848)
5 sigil-{id}.png (256x256)
5 condition-{id}.png (128x128)

Each has a large white monogram, thematic gradient background, "PH" watermark, and "PLACEHOLDER" stamp.

## Summary The game engine, data, and UI components exist for spells, sigils, conditions, and traps — but none of them render actual graphics. Spells show as plain text in the SpellHorizon and resolution overlay. Sigils are bare CSS circles with two-letter abbreviations. Conditions are colored text badges. We have 29 placeholder assets ready in `public/` — they just aren't wired anywhere. ## What's Missing ### 1. SpellDefinition needs `iconSrc` - **File:** `src/engine/types.ts` — add `readonly iconSrc?: string` to `SpellDefinition` - **File:** `src/data/spells.ts` — add `iconSrc: "/spell-<id>.png"` to each spell definition (the placeholder PNGs are already in `public/`) ### 2. SigilEntry needs `iconSrc` - **File:** `src/data/symbols.ts` — add `readonly iconSrc?: string` to `SigilEntry` - Add path references: `/sigil-{seal,mask,current,snare,glint}.png` (placeholders exist) ### 3. Render spell icons in SpellHorizon - **File:** `src/components/SpellHorizon.tsx` — currently shows spell name as text. Add the icon image beside the name using `spell.iconSrc`. ### 4. Render spell icons in resolution overlay - **Files:** `src/pages/CasualDuel.tsx`, `RankedMatch.tsx`, `OnlineMatch.tsx`, `Campaign.tsx` - The resolution overlay (Turn N Resolution) lists completed spells as bullet-point text. Add spell icon beside each name. ### 5. Wire sigil icons in ChainPane - **File:** inline in each page's `renderSlot` functions (6 files: CasualDuel, RankedMatch, OnlineMatch, Campaign, Tutorial, ReplayViewer) - Currently sigils render as styled CSS circles with two-letter text. Switch to use the sigil icon when available. ### 6. Wire condition icons in ConditionMarker - **File:** `src/components/ConditionMarker.tsx` — already has an optional `iconSrc` prop, but nothing ever passes it. - Pass the condition icon path from the condition type to icon mapping. ### 7. Spell art in SpellHorizon detail popup - **File:** `src/components/SpellHorizon.tsx` — when a spell is expanded/hovered, show the spell art as a card image. ## Slice Plan ### S01 — Data Layer: Add iconSrc to types + data files - Add `iconSrc` to `SpellDefinition` (types.ts) and `SigilEntry` (symbols.ts) - Fill in paths in `spells.ts` and `symbols.ts` - Add condition to icon path mapping ### S02 — Render Layer: Wire spell icons into UI - SpellHorizon: icon next to spell name - Resolution overlay (all 4 pages): icon next to completed spell - ConditionMarker: pass icon path from condition type ### S03 — Sigil & Trap Icons - ChainPane/`renderSlot`: use sigil icon instead of CSS circle when available - TrapTellIndicator: wire icon display ## Placeholder Assets Available All generated as PNGs in `public/`: - 19 `spell-{id}.png` (1264x848) - 5 `sigil-{id}.png` (256x256) - 5 `condition-{id}.png` (128x128) Each has a large white monogram, thematic gradient background, "PH" watermark, and "PLACEHOLDER" stamp.

Mark commented

2026-05-16 00:53:38 +00:00

Author

Owner

Pre-existing lint errors (29 across 12 files) have been fixed in 47dfc01. All ESLint and TypeScript checks now pass clean. Unblocking.

Fixed:

react-hooks/set-state-in-effect (10 instances)
react-hooks/immutability (12 instances)
@typescript-eslint/no-explicit-any (8 instances)
react-refresh/only-export-components (3 instances)
react-hooks/exhaustive-deps (1 instance)

Pre-existing lint errors (29 across 12 files) have been fixed in `47dfc01`. All ESLint and TypeScript checks now pass clean. Unblocking. Fixed: - react-hooks/set-state-in-effect (10 instances) - react-hooks/immutability (12 instances) - @typescript-eslint/no-explicit-any (8 instances) - react-refresh/only-export-components (3 instances) - react-hooks/exhaustive-deps (1 instance)