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

Raw Blame History

Sub-task 5: Enhance SpireTab Component

Scope

Refactor the SpireTab component to use the new design system primitives for spire climbing UI.

Key Deliverables:

Update SpireTab to use GameCard, SectionHeader, ManaBar primitives
Apply proper cast bar animation (300ms ease-out)
Style floor display with appropriate visual treatment
Ensure combat log uses consistent styling

Acceptance Criteria

Floor display uses GameCard with appropriate variant
Cast bar uses ManaBar primitive with proper animation (300ms ease-out)
Enemy HP bar uses ManaBar with appropriate color
Section headers use SectionHeader primitive
No raw hex values - all colors use CSS variables
Spire combat cast bar animates smoothly

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/tabs/SpireTab.tsx
Has both normal mode and simple mode (SpireMode)
Shows current floor, enemy HP, cast progress
Floor element display should use ElementBadge primitive

1.1 KiB Raw Blame History