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

Raw Blame History

Sub-task 8: Enhance StatsTab & LabTab

Scope

Refactor the StatsTab and LabTab components to use the new design system primitives.

Key Deliverables:

Update StatsTab to use GameCard, SectionHeader, StatRow, ValueDisplay primitives
Update LabTab to use GameCard, SectionHeader, ActionButton primitives
Style stat displays with proper numeric formatting (tabular-nums)
Add ValueDisplay for DPS, mana values
Ensure all stats are clearly readable

Acceptance Criteria

Stat rows use StatRow primitive with appropriate highlighting
Numeric values use ValueDisplay with tabular-nums
Section headers use SectionHeader primitive
Stat cards use GameCard with appropriate variant
No raw hex values - all colors use CSS variables
All numbers use --font-mono and tabular-nums feature

Dependencies

ST1 (Sub-task 1) - Must be completed first (design system must exist)

Status

🟡 PENDING - Waiting for ST1 completion

Notes

StatsTab location: src/components/game/tabs/StatsTab.tsx
LabTab location: src/components/game/tabs/LabTab.tsx
StatsTab shows: mana stats, combat stats, prestige stats
LabTab handles: research, unlocking new features
DPS calculation display needs proper formatting
Include computed stats from equipment effects

1.3 KiB Raw Blame History