Refactoring Agent
47c71e6f54
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/
40 lines
1.4 KiB
Markdown
40 lines
1.4 KiB
Markdown
# Sub-task 9: Enhance Golemancy & Attunement Tabs
|
|
|
|
## Scope
|
|
|
|
Refactor the `GolemancyTab` and `AttunementsTab` components to use the new design system primitives.
|
|
|
|
### Key Deliverables:
|
|
1. Update `GolemancyTab` to use `GameCard`, `SectionHeader`, `ActionButton`, `StatRow` primitives
|
|
2. Update `AttunementsTab` to use `GameCard`, `SectionHeader`, `ElementBadge` primitives
|
|
3. Style golem displays with proper visual treatment
|
|
4. Add attunement progress indicators
|
|
5. Ensure golem stats are clearly displayed
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. Golem cards use `GameCard` with appropriate variant
|
|
2. Golem stats use `StatRow` with proper highlighting (e.g., damage=--mana-fire)
|
|
3. Attunement options use `GameCard` with proper styling
|
|
4. Element badges use `ElementBadge` primitive
|
|
5. Section headers use `SectionHeader` primitive
|
|
6. No raw hex values - all colors use CSS variables
|
|
7. Golem HP bars animate smoothly (300ms ease-out)
|
|
|
|
## Dependencies
|
|
|
|
- **ST1 (Sub-task 1)** - Must be completed first (design system must exist)
|
|
|
|
## Status
|
|
|
|
🟡 **PENDING** - Waiting for ST1 completion
|
|
|
|
## Notes
|
|
|
|
- GolemancyTab location: `src/components/game/tabs/GolemancyTab.tsx`
|
|
- AttunementsTab location: `src/components/game/tabs/AttunementsTab.tsx`
|
|
- Golemancy has multiple golem types (Earth, Steel, Crystal, etc.)
|
|
- Attunements: Enchanter, Invoker, Fabricator
|
|
- Golem maintenance costs need clear display
|
|
- Attunement leveling shows XP progress
|