aaron/darkwatch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
darkwatch/docs/specs/2026-04-09-view-edit-mode-design.md

6.6 KiB
Raw Blame History

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)