112 lines
4.4 KiB
Markdown
112 lines
4.4 KiB
Markdown
|
# **Character Sheet Specification: The Explorer's Dossier**
|
||
|
|
|
||
|
|
This document defines the UI component used to view and manage an Explorer unit. It combines Stat visualization, Inventory management (Paper Doll), and Skill Tree progression into a single tabbed interface.
|
||
|
|
|
||
|
|
## **1. Visual Layout**
|
||
|
|
|
||
|
|
Style: High-tech/Fantasy hybrid. Dark semi-transparent backgrounds with voxel-style borders.
|
||
|
|
Container: Centered Modal (80% width/height).
|
||
|
|
|
||
|
|
### **A. Header (The Identity)**
|
||
|
|
|
||
|
|
- **Left:** Large 2D Portrait of the Unit.
|
||
|
|
- **Center:** Name, Class Title (e.g., "Vanguard"), and Level.
|
||
|
|
- **Bottom:** XP Bar (Gold progress fill). Displays "SP: [X]" badge if Skill Points are available.
|
||
|
|
- **Right:** "Close" button (X).
|
||
|
|
|
||
|
|
### **B. Left Panel: Attributes (The Data)**
|
||
|
|
|
||
|
|
- A vertical list of stats derived from getEffectiveStat().
|
||
|
|
- **Primary:** Health (Bar), AP (Icons).
|
||
|
|
- **Secondary:** Attack, Defense, Magic, Speed, Willpower, Tech.
|
||
|
|
- **Interaction:** Hovering a stat shows a Tooltip breaking down the value (Base + Gear + Buffs).
|
||
|
|
|
||
|
|
### **C. Center Panel: Paper Doll (The Gear)**
|
||
|
|
|
||
|
|
- **Visual:** The Unit's 3D model (or 2D silhouette) in the center.
|
||
|
|
- **Slots:** Four large square buttons arranged around the body:
|
||
|
|
- **Left:** Primary Weapon.
|
||
|
|
- **Right:** Off-hand / Relic.
|
||
|
|
- **Body:** Armor.
|
||
|
|
- **Accessory:** Utility Device.
|
||
|
|
- **Interaction:** Clicking a slot opens the "Inventory Side-Panel" filtering for that slot type.
|
||
|
|
|
||
|
|
### **D. Right Panel: Tabs (The Management)**
|
||
|
|
|
||
|
|
A tabbed container switching between:
|
||
|
|
|
||
|
|
1. **Inventory:** Grid of unequipped items in the squad's backpack.
|
||
|
|
2. **Skills:** Embeds the **Skill Tree** component (Vertical Scrolling).
|
||
|
|
3. **Mastery:** (Hub Only) Shows progress toward unlocking Tier 2 classes.
|
||
|
|
|
||
|
|
## **2. TypeScript Interfaces (Data Model)**
|
||
|
|
|
||
|
|
// src/types/CharacterSheet.ts
|
||
|
|
|
||
|
|
export interface CharacterSheetProps {
|
||
|
|
unitId: string;
|
||
|
|
readOnly: boolean; // True during enemy turn or restricted events
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface CharacterSheetState {
|
||
|
|
unit: Explorer; // The full object
|
||
|
|
activeTab: 'INVENTORY' | 'SKILLS' | 'MASTERY';
|
||
|
|
selectedSlot: 'WEAPON' | 'ARMOR' | 'RELIC' | 'UTILITY' | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface StatTooltip {
|
||
|
|
label: string; // "Attack"
|
||
|
|
total: number; // 15
|
||
|
|
breakdown: { source: string, value: number }[]; // [{s: "Base", v: 10}, {s: "Rusty Blade", v: 5}]
|
||
|
|
}
|
||
|
|
|
||
|
|
## **3. Conditions of Acceptance (CoA)**
|
||
|
|
|
||
|
|
**CoA 1: Stat Rendering**
|
||
|
|
|
||
|
|
- Stats must reflect the _effective_ value.
|
||
|
|
- If a unit has a "Weakness" debuff reducing Attack, the Attack number should appear Red. If buffed, Green.
|
||
|
|
|
||
|
|
**CoA 2: Equipment Swapping**
|
||
|
|
|
||
|
|
- Clicking an Equipment Slot toggles the Right Panel to "Inventory" mode, filtered by that slot type.
|
||
|
|
- Clicking an item in the Inventory immediately equips it, swapping the old item back to the bag.
|
||
|
|
- Stats must verify/update immediately upon equip.
|
||
|
|
|
||
|
|
**CoA 3: Skill Interaction**
|
||
|
|
|
||
|
|
- The Skill Tree tab must display the `SkillTreeUI` component we designed earlier.
|
||
|
|
- Spending an SP in the tree must subtract from the Unit's `skillPoints` and update the view immediately.
|
||
|
|
|
||
|
|
**CoA 4: Context Awareness**
|
||
|
|
|
||
|
|
- In **Dungeon Mode**, the "Inventory" tab acts as the "Run Inventory" (temp loot).
|
||
|
|
- In **Hub Mode**, the "Inventory" tab acts as the "Stash" (permanent items).
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## **4. Prompt for Coding Agent**
|
||
|
|
|
||
|
|
"Create `src/ui/components/CharacterSheet.js` as a LitElement.
|
||
|
|
|
||
|
|
1. **Layout:** Use CSS Grid to create the 3-column layout (Stats, Paper Doll, Tabs).
|
||
|
|
2. **Props:** Accept a `unit` object. Watch for changes to re-render stats.
|
||
|
|
3. **Stats Column:** Implement a helper `_renderStat(label, value, breakdown)` that creates a hoverable div with a tooltip.
|
||
|
|
4. **Paper Doll:** Render 4 button slots. If slot is empty, show a ghost icon. If full, show the Item Icon.
|
||
|
|
5. **Tabs:** Implement simple switching logic.
|
||
|
|
|
||
|
|
- _Inventory Tab:_ Render a grid of `item-card` elements.
|
||
|
|
- _Skills Tab:_ Embed `<skill-tree-ui .unit=${this.unit}></skill-tree-ui>`.
|
||
|
|
|
||
|
|
6. **Events:** Dispatch `equip-item` events when dragging/clicking inventory items."
|
||
|
|
|
||
|
|
## **5. Integration Strategy**
|
||
|
|
|
||
|
|
**Context:** The Character Sheet is a modal that sits above all other UI (CombatHUD, Hub, TeamBuilder). It should be mounted to the #ui-layer when triggered and removed when closed.
|
||
|
|
|
||
|
|
**Trigger Points:**
|
||
|
|
|
||
|
|
- **Combat:** Clicking the Unit Portrait in CombatHUD dispatches open-character-sheet.
|
||
|
|
- **Hub:** Clicking a unit card in the Barracks dispatches open-character-sheet.
|
||
|
|
- **Input:** Pressing 'C' (configured in InputManager) triggers it for the active unit.
|