[priority: 4] Recreate Guardian Pacts Tab (Invoker Attunement) #89

Closed
opened 2026-05-19 10:45:24 +02:00 by Anexim · 2 comments
Owner

Summary

Recreate the Guardian Pacts tab that was deleted in commit fe0f2a0. This tab is for Invokers and shows which guardian pacts are available, signed, and their benefits.

Context

  • Guardian definitions exist in src/lib/game/constants/guardians.ts (9 guardians at floors 10, 20, 30, 40, 50, 60, 80, 90, 100)
  • GuardianDef has: name, element, hp, pact, color, boons[], pactCost, pactTime, uniquePerk, armor, power, effects[], signingCost, unlocksMana, damageMultiplier, insightMultiplier
  • GuardianBoon has: type (maxMana, manaRegen, castingSpeed, elementalDamage, rawDamage, critChance, critDamage, spellEfficiency, manaGain, insightGain, studySpeed, prestigeInsight), value, desc
  • Pact state lives in prestigeStore.ts: defeatedGuardians, signedPacts, signedPactDetails, pactRitualFloor, pactRitualProgress
  • Pact slots are limited by pactSlots in the prestige store
  • The existing PactStatusSection.tsx in StatsTab/ shows a compact view

Requirements

  • Create src/components/game/tabs/GuardianPactsTab.tsx
  • Show all guardians organized by floor tier
  • For each guardian display:
    • Name, element, and floor where they appear
    • HP, armor, and power stats
    • Boons list with descriptions and values
    • Unique perk
    • Pact cost (mana + time)
    • Signing cost
    • Status: Undefeated / Defeated (pact available) / Pact Signed
  • Allow the player to start a pact ritual with a defeated guardian
  • Show pact ritual progress
  • Show active pacts and their cumulative boon effects
  • Show remaining pact slots
  • 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
  • This tab is primarily for the Invoker attunement but should be visible to all (showing locked/available state)
## Summary Recreate the Guardian Pacts tab that was deleted in commit `fe0f2a0`. This tab is for Invokers and shows which guardian pacts are available, signed, and their benefits. ## Context - Guardian definitions exist in `src/lib/game/constants/guardians.ts` (9 guardians at floors 10, 20, 30, 40, 50, 60, 80, 90, 100) - `GuardianDef` has: `name`, `element`, `hp`, `pact`, `color`, `boons[]`, `pactCost`, `pactTime`, `uniquePerk`, `armor`, `power`, `effects[]`, `signingCost`, `unlocksMana`, `damageMultiplier`, `insightMultiplier` - `GuardianBoon` has: `type` (maxMana, manaRegen, castingSpeed, elementalDamage, rawDamage, critChance, critDamage, spellEfficiency, manaGain, insightGain, studySpeed, prestigeInsight), `value`, `desc` - Pact state lives in `prestigeStore.ts`: `defeatedGuardians`, `signedPacts`, `signedPactDetails`, `pactRitualFloor`, `pactRitualProgress` - Pact slots are limited by `pactSlots` in the prestige store - The existing `PactStatusSection.tsx` in `StatsTab/` shows a compact view ## Requirements - Create `src/components/game/tabs/GuardianPactsTab.tsx` - Show all guardians organized by floor tier - For each guardian display: - Name, element, and floor where they appear - HP, armor, and power stats - Boons list with descriptions and values - Unique perk - Pact cost (mana + time) - Signing cost - Status: Undefeated / Defeated (pact available) / Pact Signed - Allow the player to start a pact ritual with a defeated guardian - Show pact ritual progress - Show active pacts and their cumulative boon effects - Show remaining pact slots - 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 - This tab is primarily for the Invoker attunement but should be visible to all (showing locked/available state)
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:25 +02:00
Anexim added ai:todo and removed ai:blocked labels 2026-05-19 22:27:57 +02:00
Author
Owner

Starting work on Guardian Pacts Tab. Plan:

  1. Create GuardianPactsTab.tsx with guardian cards organized by floor tier, pact ritual functionality, active pacts display
  2. Add to barrel export in tabs/index.ts
  3. Add lazy loading + tab trigger to page.tsx
  4. Write tests
  5. Build, commit, and push
Starting work on Guardian Pacts Tab. Plan: 1. Create GuardianPactsTab.tsx with guardian cards organized by floor tier, pact ritual functionality, active pacts display 2. Add to barrel export in tabs/index.ts 3. Add lazy loading + tab trigger to page.tsx 4. Write tests 5. Build, commit, and push
Author
Owner

Guardian Pacts Tab completed and pushed.

What was built:

  • src/components/game/tabs/GuardianPactsTab.tsx (392 lines) — full tab with:
    • Guardian cards organized by floor tier (Early 10-40, Mid 50-60, Late 80-100)
    • Each card shows: name, element, floor, HP/armor/power stats, boons list, unique perk, pact cost & time
    • Status badges: Undefeated / Pact Available / Pact Signed
    • "Begin Pact Ritual" button for defeated guardians (checks mana + slot availability)
    • Ritual progress bar with completion indicator
    • Summary header with pact slot count, signed count, defeated count
    • Cumulative boon effects from all signed pacts
    • Tier filter buttons
    • DebugName wrapper
  • Added to src/components/game/tabs/index.ts barrel export
  • Added lazy loading + "📜 Pacts" tab trigger to src/app/page.tsx
  • src/components/game/tabs/GuardianPactsTab.test.ts — 13 tests all passing
  • All pre-commit checks passed (file sizes, no new circular deps)
✅ Guardian Pacts Tab completed and pushed. **What was built:** - `src/components/game/tabs/GuardianPactsTab.tsx` (392 lines) — full tab with: - Guardian cards organized by floor tier (Early 10-40, Mid 50-60, Late 80-100) - Each card shows: name, element, floor, HP/armor/power stats, boons list, unique perk, pact cost & time - Status badges: Undefeated / Pact Available / Pact Signed - "Begin Pact Ritual" button for defeated guardians (checks mana + slot availability) - Ritual progress bar with completion indicator - Summary header with pact slot count, signed count, defeated count - Cumulative boon effects from all signed pacts - Tier filter buttons - DebugName wrapper - Added to `src/components/game/tabs/index.ts` barrel export - Added lazy loading + "📜 Pacts" tab trigger to `src/app/page.tsx` - `src/components/game/tabs/GuardianPactsTab.test.ts` — 13 tests all passing - All pre-commit checks passed (file sizes, no new circular deps)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#89