Skill trees now render the way the source does: each class has three named
subtrees (e.g. Swordmaster: The Blade / The Will / The Way), each with its
own 3-col or 5-col grid, sized in 72px cells. Extractor parses subtrees
separately so the per-tree row/col coordinates are correct (previously all
22 nodes were stacked on one combined grid and overlapped). Connector
edges are mapped per-subtree too.
Loadout: new global 3-ability + 3-technique slot row at the bottom of the
Skill Trees panel. The cap is global across all 5 classes (matches the
source HTML which has `id=active-Ability-N` / `id=active-Technique-N`
without per-tree scope). Click a slot to pick from any allocated Ability
or Spice (for Ability slots) or any allocated Perk (for Technique slots);
right-click clears. Slot backgrounds use the local ability.png /
technique.png artwork copied into /icons.
Label overlap fix: constrained the name label under each node to the node
width (72px) and bumped the vertical gap from 44 to 60px so 2-3 line names
have room without bleeding into the row below.
Existing saved builds migrate cleanly — loadout normalizes to length-3
slot arrays if absent or malformed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
extract.py now also copies every referenced icon webp from sample-data into
character-builder/frontend/public/icons/ so Vite bundles them with the SPA
(serves at /icons/<filename>.webp). 154 icons (91 skill + 63 perk) end up
in the build, ~668 KB total.
SkillTree nodes show the skill's icon centered in the node instead of the
name text (name moves below the node as a label). Hovered / allocated /
maxed states change icon brightness and saturation, with a sand-colored
drop-shadow on maxed nodes.
XpProgressCard renders the perk icon to the left of each perk's text.
Locked perks desaturate the icon. The grid grows from 2 columns to 3 to
accommodate.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
