# Character Creation — Implementation Status

**Last updated:** 2026-04-25
**Source design:** `from_design/` (React/HTML/CSS prototype produced by Claude Design)
**Implementation:** [Theriapolis.Game/Screens/CharacterCreationScreen.cs](../../Theriapolis.Game/Screens/CharacterCreationScreen.cs)
**Helpers:** [Theriapolis.Game/UI/CodexCopy.cs](../../Theriapolis.Game/UI/CodexCopy.cs) (skill / language / item / class-clade copy)

The React prototype in `from_design/` is the canonical design reference.
Keep it intact as a snapshot; this document records what the C# / Myra port
preserves, adapts, and defers.

## Faithful ports ✓

- **7-step wizard structure** — Clade → Species → Calling → History →
  Abilities → Skills → Sign. Matches the design's `STEPS` array in `app.jsx`.
- **Stepper at top with locked / active / completed states** — uses ✓ / ✕
  / Roman numerals as visual marks. Locked steps are disabled buttons; the
  user can always click backward to revisit completed folios.
- **Aside summary panel on the right** — name, lineage, calling+history,
  abilities (with mods applied), skills counter. Updates live as the player
  builds the character.
- **Validation contract** — every step has `ValidateStep(int) → string?`;
  Next is disabled while the current step is invalid; Confirm is disabled
  unless every step is valid. Messages match the design's vocabulary.
- **All four content collections** — clades, species, classes, backgrounds —
  rendered from the same JSON the design used. Filtering rules (species
  filtered to selected clade, skills filtered to class options) match.
- **Class↔clade recommendations** — the "★ Suits Clade" badge on the Calling
  cards uses the same lookup table from the design's `CLASS_CLADE_REC`.
  Informational only; doesn't gate selection.
- **Standard Array vs 4d6-drop-lowest** — both methods supported. The roll
  seed formula `worldSeed ^ RNG_STAT_ROLL ^ msSinceGameStart` (locked by the
  Phase 5 plan §4.2 / DESIGN_INTENT.md) is preserved; tests inject `msOverride`.
- **Auto-assign + Clear** — match the design's affordances. Auto-assign
  honours already-pinned abilities and fills the rest from the pool by
  class-primary priority.
- **Roll history** — last 3 prior rolls displayed when in roll mode (just
  like the React prototype's "Previous rolls:" line).
- **Skills grouped by ability** — same layout. Background-sealed skills
  are pre-checked and locked; class-pickable skills show a counter
  ("N / required chosen"); skills not on the class's offered list are
  disabled with `[—]` markers.
- **Review step** — name input + summary blocks for lineage, calling+history,
  final abilities, skills, starting kit. Each block has an "Edit ›" link
  back to the relevant earlier step. Starting kit reads from
  `ClassDef.StartingKit` (same as M3).

## Adapted (not 1:1, but functionally equivalent)

- **Drag-and-drop stat assignment → click-pick-then-click-place.** Myra
  doesn't ship native drag-drop. The pool shows clickable value buttons; a
  selected value is bracketed (`[15]`); the next ability slot click consumes
  it. Click a filled slot to return its value to the pool. Same end state
  as drag-drop; one extra click per assignment.
- **Hover popovers → "Selected" detail panel.** Trait/skill/feature
  descriptions surface in the bottom of the aside panel when the relevant
  card is clicked, instead of on hover. Myra has no rich tooltip system;
  building one would mean a custom popup widget. Click-to-show is a
  reasonable substitute for keyboard-and-controller futures too.
- **Card grid with wrapping → fixed-width buttons in rows of 2 or 3.**
  Myra has no native flex-wrap container, so each step's grid is hand-laid
  with `HorizontalStackPanel`s of fixed-width `TextButton`s. Each card
  is a multi-line button (name on line 1, mods/stats on line 2,
  features/traits on line 3). Less pretty than the design's framed cards
  but information-equivalent.
- **Predator/prey clade grouping** — kept as section headers between
  rows ("── Predators ──", "── Prey ──") instead of separately styled
  groups, since Myra has no rich section-divider widget.
- **Folio numerals + "Codex of Becoming" header** — preserved as text
  ("Folio I of VII — Clade") even without serif fonts to render it
  ceremonial. The aesthetic gap is the next item.

## Deferred (visual / aesthetic gap)

The React prototype's "illuminated codex" art direction —
parchment-paper background, gilded accents (`--gild`, `--seal`), serif
display fonts (Cormorant Garamond, Cinzel), monospace tags (JetBrains Mono),
section rules with ornament glyphs — is not portable to Myra without
custom theming work.

Myra theming requires:
1. A `theme.json` declaring colors + brushes
2. Custom `SpriteFont` builds for the serif/display fonts
3. Optional 9-slice background brushes for card frames
4. A `Stylesheet` instance the Desktop loads at startup

For M5 ship-point, the C# wizard uses Myra's default fonts + a
semi-transparent dark panel (`Color(15, 15, 25, 220)`). The visual polish
is M6+ theming work — when we tackle it, the design's `index.html`
`<style>` block (font choices, color variables, density tokens) is the
source of truth.

Specific gaps worth tracking:
- **No portrait component** (the design has a placeholder silhouette/heraldry
  panel in the aside).
- **No "scent aura" highlight** behind selected cards.
- **No bonus pill with sourced popover** — bonus tags currently render as
  text "(+1 from clade+species)" instead of clickable chips.
- **No language hover chips** — language list shows as a plain comma-
  separated string.
- **No fonts that match the codex tone** — Myra default font only.

## Out of scope (matches the design's "Known caveats")

- **No save/load mid-creation** — wizard is in-memory; close before
  confirm = start over. Same as the React prototype.
- **No subclass selection** — both implementations defer this to a level-up
  flow; subclass features are filtered out of the displayed level-1 feature
  list.
- **No tool/weapon proficiency display** — present in data, not surfaced.
- **No equipment substitution** — the starting kit is what the class config
  says it is; player can't swap items at creation time.

## How to refresh this comparison

1. If Claude Design ships an updated prototype: replace the contents of
   `from_design/` with the new zip, then update this file and the matching
   sections of `IMPLEMENTATION_STATUS.md`.
2. If the C# implementation gains a feature from the "Deferred" list, move
   that bullet up to "Faithful ports" or "Adapted".
3. If the underlying schema changes (e.g. a new field on `ClassDef`), refresh
   the snapshot in `MANIFEST.md`'s file list and re-run the bundled refresh
   command.