- Skill tree panel now uses flex-wrap: nowrap so the 3 subtrees always sit
inline matching the source layout. If the panel column is narrower than
the trio (e.g. on mid-width screens with the summary sidebar visible),
the row scrolls horizontally rather than stacking.
- Wrap max-width grows from 1560 to 1680px to give the builder column more
room — the widest class layout (5+3+3 col subtrees) needs ~1160px of
horizontal space and now fits comfortably without scroll on common
desktop widths.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
The Build Ledger now uses a two-column grid: the builder UI stays on the
left, and a new sticky CharacterSummary panel on the right aggregates the
whole character at a glance — house, level, total XP, skill/intel point
pools (with POI bonus broken out), per-spec levels with cumulative XP and
perks unlocked, current faction tier and progress to next, skill
allocations grouped by class, and the six most recent perk unlocks across
character + specs.
The previous separate "Skill Summary" panel is subsumed by the sidebar.
Wrap width grows from 1240px to 1560px. Below 1180px the layout collapses
to one column and the summary becomes non-sticky.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Players can pick up intel from points of interest on the map beyond what
levelling grants. Add a "Bonus Intel" card alongside the Character XP card
with an editable input. The character totals strip now shows the combined
intel (levels + bonus) with a small "+N" badge when a bonus is present.
Existing builds without the field migrate cleanly via the existing
defaults-merge in store.ts.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Introduce body[data-house="atreides"] and body[data-house="harkonnen"]
CSS blocks that override --sand / --sand-2 / --spice / --ember and the
background gradient vars, so the whole UI (panels, progress bars, primary
CTA, totals, allocated/maxed skill borders) recolors when the house is
switched.
- Fix the previously-swapped house identity colors: Atreides is green,
Harkonnen is orange. Both house-pick cards now always display in their
identity color, so the unselected house remains visually tagged.
- App.vue applies the theme by setting document.body.dataset.house from a
reactive watcher.
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>
