161 lines
6.6 KiB
Markdown
161 lines
6.6 KiB
Markdown
# View/Edit Mode Redesign — Design Spec
|
|
|
|
## Overview
|
|
|
|
Redesign the CharacterDetail modal with a view/edit mode split. View mode is a clean, read-only character sheet for gameplay. Edit mode enables full editing for character building and level-ups. The layout follows the "Modern Card Panels" design: header banner with vitals, three content panels below.
|
|
|
|
## 1. View Mode (Default)
|
|
|
|
### Header Banner
|
|
|
|
Full-width banner at top of modal:
|
|
|
|
- **Left side:** Character name + title, class/ancestry/level
|
|
- **Right side:** Three vital displays:
|
|
- **HP:** large number with +/- buttons (live-editable)
|
|
- **AC:** large number, display only (derived from gear)
|
|
- **XP:** number with +/- buttons (live-editable), shows threshold (e.g. "6 / 10")
|
|
|
|
### Three Panels
|
|
|
|
**Left Panel — Ability Scores + Attacks**
|
|
|
|
- Ability scores as a compact 2-column list: label + modifier (e.g. "STR +0"). Score value shown smaller. Space reserved on the right of each stat for a future dice roll button.
|
|
- Visual separator (line or spacing) between stats and attacks.
|
|
- Attacks section: auto-generated weapon lines (e.g. "SHORTSWORD: +0, 1d6"). Talent-based attack modifiers shown below as italic text. Space reserved on the right of each attack for a future dice roll button.
|
|
|
|
**Center Panel — Talents + Info**
|
|
|
|
- Talents list with name and description for each. Read-only (no add/remove buttons).
|
|
- Info section below talents:
|
|
- Background
|
|
- Deity
|
|
- Languages
|
|
- Alignment
|
|
- Notes (displayed as plain text, not a textarea)
|
|
|
|
**Right Panel — Gear + Currency**
|
|
|
|
- Gear list as a compact table. Each row shows:
|
|
- Item name
|
|
- Small type icon: sword (weapon), shield (armor), backpack (gear), sparkle (spell) — using unicode or simple CSS icons, not an icon library
|
|
- Slot count
|
|
- No delete buttons in view mode
|
|
- Slot counter in header: "Slots: 4 / 10" with color coding (green/yellow/red)
|
|
- Currency row with +/- buttons for GP, SP, CP (live-editable)
|
|
|
|
### View Mode Principles
|
|
|
|
- No input fields, dropdowns, or form elements (except HP/XP/currency quick controls)
|
|
- Everything is plain display text
|
|
- Clean, readable, looks like a proper character sheet
|
|
- Real-time sync still works — changes from other clients update the display
|
|
|
|
## 2. Edit Mode
|
|
|
|
### Toggle
|
|
|
|
- "Edit" button in the header bar, next to the close (X) button
|
|
- When in edit mode, button text changes to "Done"
|
|
- Clicking "Done" returns to view mode
|
|
|
|
### What Changes in Edit Mode
|
|
|
|
**Header:**
|
|
|
|
- Name and title become editable input fields
|
|
|
|
**Left Panel — Ability Scores + Attacks:**
|
|
|
|
- Ability scores get +/- buttons for incrementing/decrementing
|
|
- Attacks remain auto-generated (read-only) since they derive from gear + stats
|
|
|
|
**Center Panel — Talents + Info:**
|
|
|
|
- Talents get add (name + description form) and remove (X button) controls
|
|
- Class/ancestry/level/alignment fields appear as editable controls (these are displayed as read-only text in the header in view mode, and editable here in the Info panel in edit mode)
|
|
- Background, deity, languages become editable text inputs
|
|
- Alignment becomes a dropdown (Lawful/Neutral/Chaotic)
|
|
- Class becomes a dropdown (Fighter/Priest/Thief/Wizard)
|
|
- Ancestry becomes a dropdown (Human/Elf/Dwarf/Halfling/Goblin/Half-Orc)
|
|
- Level becomes a number input
|
|
- Notes becomes an editable textarea
|
|
|
|
**Right Panel — Gear:**
|
|
|
|
- "+ Add Gear" button appears with ItemPicker (searchable predefined item dropdown)
|
|
- Delete (X) buttons appear on each gear row
|
|
- Gear slots max becomes editable
|
|
- Currency fields become direct number inputs (replacing +/- buttons)
|
|
|
|
**Additional:**
|
|
|
|
- AC click-to-override becomes available
|
|
- "Delete Character" button appears at the bottom of the modal
|
|
|
|
### What Stays the Same in Both Modes
|
|
|
|
- HP +/- buttons (always available — core gameplay)
|
|
- XP +/- buttons (always available — awarded during play)
|
|
- Currency +/- buttons (always available — spending gold during play)
|
|
- Overall layout structure (header + 3 panels)
|
|
- Real-time sync (changes broadcast immediately in both modes)
|
|
- Modal behavior (click outside or X to close)
|
|
|
|
## 3. Component Architecture
|
|
|
|
Split the current monolithic CharacterDetail.tsx (~345 lines) into focused components:
|
|
|
|
- **CharacterDetail.tsx** — modal shell (overlay, close behavior), mode state (`'view' | 'edit'`), passes mode + handlers to CharacterSheet
|
|
- **CharacterSheet.tsx** — header banner + 3-panel grid layout, receives `mode` and all handler props, distributes to panels
|
|
- **StatsPanel.tsx** — left panel: ability scores + attacks. Shows +/- on stats only in edit mode. AttackBlock always shown. Reserves roll button space.
|
|
- **InfoPanel.tsx** — center panel: talents + character info fields. TalentList add/remove only in edit mode. Info fields editable only in edit mode.
|
|
- **GearPanel.tsx** — right panel: gear list + currency. Add/remove gear only in edit mode. Currency +/- always shown. Slot counter always shown.
|
|
|
|
Existing components reused:
|
|
|
|
- StatBlock — already has +/- buttons, just conditionally render them
|
|
- AttackBlock — read-only in both modes
|
|
- TalentList — conditionally show add/remove
|
|
- GearList — conditionally show add/remove
|
|
- AcDisplay — override only in edit mode
|
|
- CurrencyRow — always shown with +/- in view, direct input in edit
|
|
- ItemPicker — only rendered in edit mode
|
|
|
|
Each panel file stays under ~150 lines.
|
|
|
|
## 4. Gear Type Icons
|
|
|
|
Replace the colored text badges (WEAPON, ARMOR, GEAR, SPELL) with small unicode/CSS icons:
|
|
|
|
- Weapon: crossed swords or dagger unicode (e.g. `⚔` or `🗡`)
|
|
- Armor: shield unicode (e.g. `🛡`)
|
|
- Gear: backpack/bag (e.g. `🎒` or `⚙`)
|
|
- Spell: sparkle/star (e.g. `✨` or `⚡`)
|
|
|
|
Kept as plain unicode characters — no icon library dependency. Shown as small inline icons next to the item name in the gear list.
|
|
|
|
## 5. Future Dice Rolling Accommodation
|
|
|
|
Layout reserves space but does not implement rolling:
|
|
|
|
- Each ability score row has empty space on the right (~2.5rem) for a future "roll" button
|
|
- Each attack line has empty space on the right (~2.5rem) for a future "roll" button
|
|
- The attacks section header has room for a general roll area
|
|
|
|
## 6. Data Flow
|
|
|
|
No database or API changes. This is purely a frontend restructuring:
|
|
|
|
- Mode state (`'view' | 'edit'`) is local component state in CharacterDetail
|
|
- All existing mutation handlers (onUpdate, onStatChange, onAddGear, etc.) still work the same
|
|
- The only change is whether the UI renders input controls or display text
|
|
- Debounced text field updates still work in edit mode (same as current)
|
|
- HP/XP/currency handlers work in both modes
|
|
|
|
## Out of Scope
|
|
|
|
- Dice rolling (layout accommodates it)
|
|
- Predefined talent database
|
|
- New character fields or schema changes
|
|
- Authentication or permissions (edit mode is available to everyone)
|