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 6: Enhance Equipment & Crafting Tabs

Scope

Refactor the EquipmentTab and CraftingTab components to use the new design system primitives.

Key Deliverables:

Update EquipmentTab to use GameCard, SectionHeader, ElementBadge primitives
Update CraftingTab to use GameCard, ActionButton, Progress primitives
Style equipment slots with proper variants
Add ElementBadge for equipment element types
Ensure crafting progress uses proper animation (linear transition)

Acceptance Criteria

Equipment slots use GameCard with appropriate variant
Equipment elements display using ElementBadge primitive
Crafting progress uses Progress primitive (linear transition)
Action buttons use ActionButton primitive with correct variants
Section headers use SectionHeader primitive
No raw hex values - all colors use CSS variables

Dependencies

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

Status

🟡 PENDING - Waiting for ST1 completion

Notes

EquipmentTab location: src/components/game/tabs/EquipmentTab.tsx
CraftingTab location: src/components/game/tabs/CraftingTab.tsx
Equipment has multiple slots (mainHand, offHand, head, body, etc.)
Crafting has 3 stages: Design, Prepare, Apply
Show 2-handed weapon handling in UI

1.3 KiB Raw Blame History