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>
Character XP has no Rewards column, but every level grants skill points
and/or intel points. Synthesize a "Level Reward" perk per level (e.g.
"+1 Skill Point · +10 Intel Points") so the Character card uses the same
unlocked-perks UI as the spec cards. The card header reads "Level Rewards"
instead of "Perks Unlocked" via a new perksLabel prop.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Skill trees:
- Class is no longer a single choice. The class panel is now tabs inside the
Skill Trees section that switch which tree is viewed; allocations from every
tree share one global skill-point pool sourced from character level.
- Switching tabs preserves allocations (previously cleared them).
- New "Skill Summary" panel lists every allocated skill grouped by class.
- Tree-local "spent" badge appears on each class tab; tree header now shows
both per-tree and global totals, and turns red if over-budget.
Spec perks:
- Extractor now parses the Rewards column of each spec track HTML (name, cost,
description, effect, bonus, icon). All 5 specs have 41 perks each.
- Spec cards display a scrollable perk list: unlocked perks highlighted, and a
"Show all" toggle reveals locked/upcoming perks dimmed. A "Next: X at L Y"
hint always points at the next unlock.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
