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.2 KiB

Raw Blame History

Sub-task 2: Enhance ManaDisplay Component

Scope

Refactor the ManaDisplay component to use the new design system primitives and improve visual presentation.

Key Deliverables:

Update ManaDisplay to use GameCard, ManaBar, StatRow, and ValueDisplay primitives
Apply proper mana type colors using --mana-* CSS variables
Add subtle animations (300ms ease-out transitions)
Ensure component renders correctly with new design system

Acceptance Criteria

ManaDisplay uses GameCard wrapper with appropriate variant
Mana bars use the ManaBar primitive component
Stats use StatRow primitive with proper highlighting
Values use ValueDisplay for numeric displays
No raw hex values - all colors use CSS variables
Hover states have 100ms ease transitions
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

1.2 KiB Raw Blame History