[priority: 4] Recreate Achievements Tab #85

New Issue

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

Anexim commented

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

Summary

Recreate the Achievements tab that was deleted in commit fe0f2a0. This tab should display all achievements the player has earned, organized by category, with progress tracking for incomplete ones.

Context

Achievement definitions already exist in src/lib/game/data/achievements.ts (22 achievements across 5 categories: combat, damage, progression/pacts, magic/spells, mana, crafting, special)
Achievement state (unlocked/progress) lives in the combat store (combatStore.ts → achievementState: { unlocked: string[], progress: Record<string, number> })
Category colors are defined in data/achievements.ts via ACHIEVEMENT_CATEGORY_COLORS
Reward types: insight, manaBonus, damageBonus, regenBonus, title, unlockEffect
Some achievements are hidden (hidden: true) and should only be revealed when the player is close to unlocking them

Requirements

Create src/components/game/tabs/AchievementsTab.tsx
Organize achievements by category with collapsible sections
Show unlocked achievements with their rewards and unlock date/time
Show locked achievements with progress bars toward their requirements
Hidden achievements should show as "???" until the player is within 50% of the requirement
Use shared UI components from src/components/ui/ (card, badge, progress, scroll-area, etc.)
Use Tailwind CSS classes from the global design token system (no SCSS — project uses Tailwind v4)
Add the tab to src/components/game/tabs/index.ts barrel export
Add the tab trigger and content to src/app/page.tsx with lazy loading via React.lazy() + Suspense + ErrorBoundary, following the same pattern as existing tabs
Add a DebugName wrapper for debug mode support
Write tests in src/lib/game/components-tests/achievements-tab.test.ts (or similar)

Architecture Notes

Follow the existing tab pattern: lazy-loaded, wrapped in ErrorBoundary + Suspense
Use Zustand store selectors (do not import the full store)
Keep the component under 400 lines (pre-commit hook enforces this)
If the component grows too large, split into sub-components in an AchievementsTab/ subdirectory

## Summary Recreate the Achievements tab that was deleted in commit `fe0f2a0`. This tab should display all achievements the player has earned, organized by category, with progress tracking for incomplete ones. ## Context - Achievement definitions already exist in `src/lib/game/data/achievements.ts` (22 achievements across 5 categories: combat, damage, progression/pacts, magic/spells, mana, crafting, special) - Achievement state (unlocked/progress) lives in the combat store (`combatStore.ts` → `achievementState: { unlocked: string[], progress: Record<string, number> }`) - Category colors are defined in `data/achievements.ts` via `ACHIEVEMENT_CATEGORY_COLORS` - Reward types: insight, manaBonus, damageBonus, regenBonus, title, unlockEffect - Some achievements are hidden (hidden: true) and should only be revealed when the player is close to unlocking them ## Requirements - Create `src/components/game/tabs/AchievementsTab.tsx` - Organize achievements by category with collapsible sections - Show unlocked achievements with their rewards and unlock date/time - Show locked achievements with progress bars toward their requirements - Hidden achievements should show as "???" until the player is within 50% of the requirement - Use shared UI components from `src/components/ui/` (card, badge, progress, scroll-area, etc.) - Use Tailwind CSS classes from the global design token system (no SCSS — project uses Tailwind v4) - Add the tab to `src/components/game/tabs/index.ts` barrel export - Add the tab trigger and content to `src/app/page.tsx` with lazy loading via `React.lazy()` + `Suspense` + `ErrorBoundary`, following the same pattern as existing tabs - Add a `DebugName` wrapper for debug mode support - Write tests in `src/lib/game/components-tests/achievements-tab.test.ts` (or similar) ## Architecture Notes - Follow the existing tab pattern: lazy-loaded, wrapped in ErrorBoundary + Suspense - Use Zustand store selectors (do not import the full store) - Keep the component under 400 lines (pre-commit hook enforces this) - If the component grows too large, split into sub-components in an `AchievementsTab/` subdirectory

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

n8n-gitea was assigned by Anexim

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

Anexim added ai:todo and removed ai:blocked labels 2026-05-19 14:04:51 +02:00

Anexim closed this issue

2026-05-19 14:46:27 +02:00

Anexim commented

2026-05-19 14:46:28 +02:00

✅ Achievements tab recreated and deployed.

What was done:

Created src/components/game/tabs/AchievementsTab.tsx (251 lines) — displays achievements organized by category with collapsible sections, progress bars, hidden achievement logic (shows "???" until 50% progress), and reward descriptions
Added AchievementsTab to src/components/game/tabs/index.ts barrel export
Added 🏆 Achievements tab trigger + lazy-loaded content with ErrorBoundary/Suspense to src/app/page.tsx
Wrote 14 tests in src/lib/game/__tests__/achievements.test.ts covering achievement definitions, category grouping, reveal logic, and reward validation
All 86 tests pass (8 test files), no new TypeScript errors introduced
Pre-commit hook passed (file size check, project structure update, dependency graph)
Committed and pushed: 639d396

✅ Achievements tab recreated and deployed. **What was done:** - Created `src/components/game/tabs/AchievementsTab.tsx` (251 lines) — displays achievements organized by category with collapsible sections, progress bars, hidden achievement logic (shows "???" until 50% progress), and reward descriptions - Added `AchievementsTab` to `src/components/game/tabs/index.ts` barrel export - Added 🏆 Achievements tab trigger + lazy-loaded content with ErrorBoundary/Suspense to `src/app/page.tsx` - Wrote 14 tests in `src/lib/game/__tests__/achievements.test.ts` covering achievement definitions, category grouping, reveal logic, and reward validation - All 86 tests pass (8 test files), no new TypeScript errors introduced - Pre-commit hook passed (file size check, project structure update, dependency graph) - Committed and pushed: `639d396`

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#85