[priority: 4] Recreate Attunements Tab #86

New Issue

2026-05-19T10:45:24+02:00

Anexim commented

2026-05-19 10:45:24 +02:00

Summary

Recreate the Attunements tab that was deleted in commit fe0f2a0. This tab should display all attunements the player has, their functions, levels, and XP progress.

Context

Attunement definitions exist in src/lib/game/data/attunements.ts (3 attunements: Enchanter, Invoker, Fabricator)
Attunement state lives in attunementStore.ts (attunements: Record<string, AttunementState>)
AttunementState has: id, active, level, experience, title
AttunementDef has: id, name, desc, slot, icon, color, primaryManaType, rawManaRegen, conversionRate, unlocked, unlockCondition, capabilities, skillCategories
MAX_ATTUNEMENT_LEVEL = 10
XP curve is handled by getAttunementXPForLevel() in data/attunements.ts
The existing AttunementStatus.tsx component in the left panel shows a compact view — this tab should be the detailed version

Requirements

Create src/components/game/tabs/AttunementsTab.tsx
Show all attunements (locked and unlocked) with their icons, names, and descriptions
For unlocked attunements, show:
- Current level and XP progress bar toward next level
- Slot location (rightHand, chest, leftHand, etc.)
- Primary mana type and conversion rate
- Capabilities list
- Active/inactive status with toggle
For locked attunements, show unlock conditions
Use shared UI components from src/components/ui/
Use Tailwind CSS from the global design token system (no SCSS)
Add to src/components/game/tabs/index.ts barrel export
Add tab trigger and content to src/app/page.tsx with lazy loading pattern
Add DebugName wrapper
Write tests

Architecture Notes

Follow the existing lazy-loaded tab pattern
Use Zustand store selectors
Keep under 400 lines; split into sub-components if needed

## Summary Recreate the Attunements tab that was deleted in commit `fe0f2a0`. This tab should display all attunements the player has, their functions, levels, and XP progress. ## Context - Attunement definitions exist in `src/lib/game/data/attunements.ts` (3 attunements: Enchanter, Invoker, Fabricator) - Attunement state lives in `attunementStore.ts` (`attunements: Record<string, AttunementState>`) - `AttunementState` has: `id`, `active`, `level`, `experience`, `title` - `AttunementDef` has: `id`, `name`, `desc`, `slot`, `icon`, `color`, `primaryManaType`, `rawManaRegen`, `conversionRate`, `unlocked`, `unlockCondition`, `capabilities`, `skillCategories` - `MAX_ATTUNEMENT_LEVEL = 10` - XP curve is handled by `getAttunementXPForLevel()` in `data/attunements.ts` - The existing `AttunementStatus.tsx` component in the left panel shows a compact view — this tab should be the detailed version ## Requirements - Create `src/components/game/tabs/AttunementsTab.tsx` - Show all attunements (locked and unlocked) with their icons, names, and descriptions - For unlocked attunements, show: - Current level and XP progress bar toward next level - Slot location (rightHand, chest, leftHand, etc.) - Primary mana type and conversion rate - Capabilities list - Active/inactive status with toggle - For locked attunements, show unlock conditions - Use shared UI components from `src/components/ui/` - Use Tailwind CSS from the global design token system (no SCSS) - Add to `src/components/game/tabs/index.ts` barrel export - Add tab trigger and content to `src/app/page.tsx` with lazy loading pattern - Add `DebugName` wrapper - Write tests ## Architecture Notes - Follow the existing lazy-loaded tab pattern - Use Zustand store selectors - Keep under 400 lines; split into sub-components if needed

Anexim added the ai:blocked label 2026-05-19 10:45:24 +02:00

n8n-gitea was assigned by Anexim

2026-05-19 10:45:24 +02:00

Anexim added ai:todo and removed ai:blocked labels 2026-05-19 15:07:30 +02:00

Anexim closed this issue

2026-05-19 18:30:04 +02:00

Anexim commented

2026-05-19 18:30:04 +02:00

✅ Attunements tab recreated and deployed.

Files created/modified:

src/components/game/tabs/AttunementsTab.tsx (222 lines) — main tab component with attunement cards showing level, XP progress, slot, mana type, conversion rate, capabilities, skill categories, and lock status
src/components/game/tabs/AttunementsTab.test.ts (146 lines) — 17 tests covering exports, data integrity, XP curve, store interactions, slot names, and file size
src/components/game/tabs/index.ts — added AttunementsTab barrel export
src/app/page.tsx — added lazy-loaded AttunementsTab + ⚗️ Attunements tab trigger

All 62 tests passing (45 existing + 17 new). Pre-commit checks passed (file sizes, dependency graph, project structure).

Commit: 5643a4c — pushed to master.

✅ Attunements tab recreated and deployed. **Files created/modified:** - `src/components/game/tabs/AttunementsTab.tsx` (222 lines) — main tab component with attunement cards showing level, XP progress, slot, mana type, conversion rate, capabilities, skill categories, and lock status - `src/components/game/tabs/AttunementsTab.test.ts` (146 lines) — 17 tests covering exports, data integrity, XP curve, store interactions, slot names, and file size - `src/components/game/tabs/index.ts` — added AttunementsTab barrel export - `src/app/page.tsx` — added lazy-loaded AttunementsTab + ⚗️ Attunements tab trigger **All 62 tests passing** (45 existing + 17 new). Pre-commit checks passed (file sizes, dependency graph, project structure). Commit: `5643a4c` — pushed to master.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#86