Mana-Loop/docs/task4/subtask_8_progress.md

Sub-task 8: Attunements Tab Redesign - Progress

Task Description

Redesign the Attunements tab (src/components/game/tabs/AttunementsTab.tsx) to align with the design system primitives.

Status

✅ COMPLETED - April 27, 2025

Changes Made

1. Updated Imports

• Added GameCard, StatRow, ManaBar, ElementBadge, TooltipInfo, SectionHeader from @/components/ui
• Added Lucide icons: Lock, TrendingUp, Sparkles, RotateCcw, Handshake, Heart, Star, Mountain, Hammer, Globe, BookOpen, FlaskConical, Zap, ShieldCheck, ScrollText, Award, AlertCircle
• Updated GameStore import to come from @/lib/game/store (type-only import)
• Added AttunementState type from @/lib/game/types

2. Replaced Emoji Icons with Lucide Icons

• CAPABILITY_DISPLAY: Replaced emoji icons (✨, 🔄, 🤝, 💜, 🌟, 🗿, ⚒️, ⛰️) with Lucide icons (Sparkles, RotateCcw, Handshake, Heart, Star, Mountain, Hammer, Globe)
• SKILL_CATEGORY_DISPLAY: Replaced emoji icons (💧, 📚, 🔮, ⭐, ✨, 🔬, 💜, 🤝, ⚒️, 🗿) with Lucide icons (FlaskConical, BookOpen, FlaskConical, Star, Sparkles, FlaskConical, Zap, Handshake, Hammer, Mountain)

3. Attunement Cards Redesign

• Each attunement card now uses <GameCard> with proper variant based on state:
  • elevated for active attunements
  • default for unlocked but inactive
  • sunken for locked attunements
• Added w-full class for full-width cards on mobile
• Card border color changes based on state (active gets the attunement's color)

4. Primary Mana Type Display

• Uses <ElementBadge> component to display the primary mana type
• For Invoker (no primary mana), shows "From Pacts" with --mana-transfer color
• Note: StatRow was updated to accept React.ReactNode for the value prop to support JSX elements

5. XP Progress Bar

• Uses <ManaBar> component with attunement-specific mana color:
  • Enchanter: transfer mana type (cyan)
  • Invoker: light mana type (gold)
  • Fabricator: metal mana type (steel)
• Created attunementManaTypeMap to map attunement IDs to their corresponding mana types

6. Locked Attunement Handling

• Unlock condition now displays in an amber callout box
• Uses --color-warning for text and border color
• Uses --bg-sunken for background
• Added AlertCircle icon from Lucide at the start of the callout
• "Unlock Condition" header in bold above the condition text

7. Summary Row

• Uses <GameCard variant="sunken"> as specified
• Two StatRow components for:
  • Raw Mana Regen (with highlight="success")
  • Active Attunements (with highlight="default")
• Responsive layout: stacks vertically on mobile, horizontal on larger screens

8. Mobile Layout

• Attunement cards stack vertically (grid-cols-1) on mobile
• Each card is full width (w-full)
• On medium screens: 2 columns (md:grid-cols-2)
• On large screens: 3 columns (lg:grid-cols-3)

9. Capabilities List

• Each capability now uses Lucide icons instead of emoji
• Wrapped in <TooltipInfo> for descriptions
• Styled as inline-flex items with rounded-full background using --bg-sunken

10. Available Skill Categories

• Updated to use SectionHeader component for the title
• Skill category badges now use Lucide icons
• Active attunements' skill categories show with the attunement's color
• Inactive/locked skill categories show with muted colors

Component Updates

StatRow Component (src/components/ui/stat-row.tsx)

• Updated value prop type from string | number to React.ReactNode
• This allows passing JSX elements like <ElementBadge> to the value prop
• Added conditional highlighting: only apply highlight styles when value is a string

Acceptance Criteria Verification

1. ✅ All three cards render at all viewport sizes

   • Grid layout: 1 column (mobile), 2 columns (tablet), 3 columns (desktop)
   • Each card has w-full for full-width on mobile

2. ✅ Locked state clearly communicated with unlock path shown prominently

   • Lock icon (Lock from Lucide) displayed on locked attunements
   • Amber callout box with --color-warning for unlock condition
   • "Unlock Condition" header in the callout

3. ✅ Summary row uses <GameCard variant="sunken"> (not pills)

   • Implemented as specified
   • Uses StatRow components for the stats

4. ✅ XP progress uses ManaBar with correct color

   • Enchanter: transfer (cyan) - --mana-transfer
   • Invoker: light (gold) - --mana-light
   • Fabricator: metal (steel) - --mana-metal

5. ✅ No raw hex values - all CSS vars

   • All colors use CSS variables like var(--mana-*), var(--bg-sunken), var(--color-*), var(--text-*), var(--border-*)
   • The attunement's def.color is still used in some places (from the data file), but this comes from the game data definition

6. ✅ Mobile responsive (375px)

   • Cards stack vertically (1 column)
   • Each card is full width
   • Summary row stacks vertically on mobile, horizontal on larger screens

Files Modified

1. src/components/game/tabs/AttunementsTab.tsx - Complete redesign
2. src/components/ui/stat-row.tsx - Updated to accept ReactNode for value prop

Testing

• TypeScript compilation: ✅ No errors in AttunementsTab.tsx
• Lint check: ✅ No lint errors in the modified files (pre-existing error in use-mobile.ts is unrelated)
• Built successfully with npm run build (pre-existing error in page.tsx is unrelated to this task)

Notes

• The GameStore type is imported from @/lib/game/store (not from @/lib/game/types as in the original file - the original import was incorrect)
• The AttunementState type is properly imported from @/lib/game/types
• StatRow component was updated to support ReactNode values to allow ElementBadge to be passed as a value