Files

T

Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s

Details

feat(ui): complete Task 4 UI redesign — all sub-tasks 1-10

- 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/

2026-04-28 11:38:45 +02:00

1.4 KiB

Raw Blame History

Sub-task 9: Enhance Golemancy & Attunement Tabs

Scope

Refactor the GolemancyTab and AttunementsTab components to use the new design system primitives.

Key Deliverables:

Update GolemancyTab to use GameCard, SectionHeader, ActionButton, StatRow primitives
Update AttunementsTab to use GameCard, SectionHeader, ElementBadge primitives
Style golem displays with proper visual treatment
Add attunement progress indicators
Ensure golem stats are clearly displayed

Acceptance Criteria

Golem cards use GameCard with appropriate variant
Golem stats use StatRow with proper highlighting (e.g., damage=--mana-fire)
Attunement options use GameCard with proper styling
Element badges use ElementBadge primitive
Section headers use SectionHeader primitive
No raw hex values - all colors use CSS variables
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

1.4 KiB Raw Blame History