feat(ui): complete Task 4 UI redesign — all sub-tasks 1-10
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s
- Implemented complete design system with 40+ CSS custom properties - Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo) - Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug - Added toast notification system (GameToast) with success/warning/error/info types - Added confirmation dialogs for destructive actions - Removed all dev artifacts and component name labels - Added empty states to all tabs - Replaced emoji icons with Lucide React icons - Added enchantPower placeholder to StatsTab and EquipmentTab - Mobile audit passed at 375px viewport - Build passes with 0 errors, lint passes with 0 errors Sub-tasks completed: - ST1: Design System Implementation - ST2: Global Layout & Header - ST3: Left Panel (Mana Display & Action Area) - ST4: Skills Tab - ST5: Spire Tab & Spire Mode UI - ST6: Stats Tab - ST7: Equipment & Crafting Tabs - ST8: Attunements Tab - ST9: Remaining Tabs - ST10: Toast System & Confirmation Dialogs Documentation: 15+ files in docs/task4/
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
# Sub-task 2: Enhance ManaDisplay Component
|
||||
|
||||
## Scope
|
||||
|
||||
Refactor the `ManaDisplay` component to use the new design system primitives and improve visual presentation.
|
||||
|
||||
### Key Deliverables:
|
||||
1. Update `ManaDisplay` to use `GameCard`, `ManaBar`, `StatRow`, and `ValueDisplay` primitives
|
||||
2. Apply proper mana type colors using `--mana-*` CSS variables
|
||||
3. Add subtle animations (300ms ease-out transitions)
|
||||
4. Ensure component renders correctly with new design system
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
1. ManaDisplay uses `GameCard` wrapper with appropriate variant
|
||||
2. Mana bars use the `ManaBar` primitive component
|
||||
3. Stats use `StatRow` primitive with proper highlighting
|
||||
4. Values use `ValueDisplay` for numeric displays
|
||||
5. No raw hex values - all colors use CSS variables
|
||||
6. Hover states have 100ms ease transitions
|
||||
7. Mana bar fill uses 300ms ease-out transition
|
||||
|
||||
## Dependencies
|
||||
|
||||
- **ST1 (Sub-task 1)** - Must be completed first (design system must exist)
|
||||
|
||||
## Status
|
||||
|
||||
🟡 **PENDING** - Waiting for ST1 completion
|
||||
|
||||
## Notes
|
||||
|
||||
- Component location: `src/components/game/ManaDisplay.tsx`
|
||||
- Should show raw mana, max mana, regen rate
|
||||
- Should display all elemental mana types with appropriate colors
|
||||
- Include meditation bonus display
|
||||
- Click mana bonus display
|
||||
Reference in New Issue
Block a user