5c335b4b3c
Introduce the HubScreen as the main interface for managing resources, units, and mission selection, integrating with the GameStateManager for dynamic data binding. Implement the MissionBoard component to display and select available missions, enhancing user interaction with mission details and selection logic. Update the GameStateManager to handle transitions between game states, ensuring a seamless experience for players. Add tests for HubScreen and MissionBoard to validate functionality and integration with the overall game architecture.
116 lines
4.6 KiB
Markdown
116 lines
4.6 KiB
Markdown
---
|
|
description: Character Sheet UI component - the Explorer's dossier combining stats, inventory, and skill tree
|
|
globs: src/ui/components/CharacterSheet.js, src/ui/components/CharacterSheet.ts, src/types/CharacterSheet.ts
|
|
alwaysApply: false
|
|
---
|
|
|
|
# **Character Sheet Rule**
|
|
|
|
The Character Sheet is a 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)**
|
|
|
|
```typescript
|
|
// 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. Implementation Requirements**
|
|
|
|
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
|
|
|