[priority: 4] Recreate Spire Summary Tab (Outside Spire) #93

New Issue

2026-05-19T10:48:11+02:00

Anexim commented

2026-05-19 10:48:11 +02:00

Summary

Recreate the Spire Summary tab that was deleted in commit fe0f2a0. This tab shows spire progress and statistics when the player is NOT inside the spire (i.e., spireMode is false).

Context

Spire state lives in combatStore.ts: currentFloor, maxFloorReached, clearedFloors, spireMode
Floor HP system: floorHP, floorMaxHP calculated by getFloorMaxHP(floor) in floor-utils.ts
Guardian definitions in constants/guardians.ts (9 guardians at floors 10, 20, 30, 40, 50, 60, 80, 90, 100)
Room types: combat, puzzle, swarm, speed, guardian (defined in types/game.ts and constants/rooms.ts)
The existing LeftPanel.tsx has a "Climb the Spire" button that calls enterSpireMode()
Insight is accumulated per floor cleared (via calcInsight() in combat-utils.ts)

Requirements

Create src/components/game/tabs/SpireSummaryTab.tsx
Only shows when spireMode is false (when in spire mode, the Spire Combat page should show instead)
Display:
- Current maximum floor reached
- Total floors cleared
- List of defeated guardians with their elements and floors
- Insight earned from spire runs
- Next guardian encounter (floor number and element)
- Recommended preparation (what mana types/spells might help for upcoming floors)
Show a visual floor progress indicator (e.g., a vertical progress bar or floor map)
Show cleared floors vs uncleared floors up to max reached
Include a "Climb the Spire" button that enters spire mode
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 is the "at a glance" spire view — the detailed combat view is a separate issue (Spire Combat Page)

## Summary Recreate the Spire Summary tab that was deleted in commit `fe0f2a0`. This tab shows spire progress and statistics when the player is NOT inside the spire (i.e., `spireMode` is false). ## Context - Spire state lives in `combatStore.ts`: `currentFloor`, `maxFloorReached`, `clearedFloors`, `spireMode` - Floor HP system: `floorHP`, `floorMaxHP` calculated by `getFloorMaxHP(floor)` in `floor-utils.ts` - Guardian definitions in `constants/guardians.ts` (9 guardians at floors 10, 20, 30, 40, 50, 60, 80, 90, 100) - Room types: combat, puzzle, swarm, speed, guardian (defined in `types/game.ts` and `constants/rooms.ts`) - The existing `LeftPanel.tsx` has a "Climb the Spire" button that calls `enterSpireMode()` - Insight is accumulated per floor cleared (via `calcInsight()` in `combat-utils.ts`) ## Requirements - Create `src/components/game/tabs/SpireSummaryTab.tsx` - Only shows when `spireMode` is false (when in spire mode, the Spire Combat page should show instead) - Display: - Current maximum floor reached - Total floors cleared - List of defeated guardians with their elements and floors - Insight earned from spire runs - Next guardian encounter (floor number and element) - Recommended preparation (what mana types/spells might help for upcoming floors) - Show a visual floor progress indicator (e.g., a vertical progress bar or floor map) - Show cleared floors vs uncleared floors up to max reached - Include a "Climb the Spire" button that enters spire mode - 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 is the "at a glance" spire view — the detailed combat view is a separate issue (Spire Combat Page)

Anexim added the ai:blocked label 2026-05-19 10:48:12 +02:00

n8n-gitea was assigned by Anexim

2026-05-19 10:48:12 +02:00

Anexim added ai:todo and removed ai:blocked labels 2026-05-19 22:42:24 +02:00

Anexim commented

2026-05-19 22:43:19 +02:00

Starting work on Spire Summary Tab. Examining existing patterns and dependencies.

Anexim closed this issue

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

Anexim commented

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

Spire Summary Tab complete. Created SpireSummaryTab.tsx (357 lines) with:

Top stats row showing max floor, floors cleared, guardians defeated, insight earned
"Climb the Spire" button
Next guardian encounter card with counter-element recommendations and preparation tips
Full guardian roster list (9 guardians) with defeated/undefeated status
Visual floor progress map (color-coded grid: cleared, uncleared, guardian, current)
Added lazy-loaded tab trigger "🏔️ Spire" to page.tsx
Added barrel export to tabs/index.ts
11 tests all passing (133 total across all tab tests)
All pre-commit checks passed, pushed to master.

Spire Summary Tab complete. Created `SpireSummaryTab.tsx` (357 lines) with: - Top stats row showing max floor, floors cleared, guardians defeated, insight earned - "Climb the Spire" button - Next guardian encounter card with counter-element recommendations and preparation tips - Full guardian roster list (9 guardians) with defeated/undefeated status - Visual floor progress map (color-coded grid: cleared, uncleared, guardian, current) - Added lazy-loaded tab trigger "🏔️ Spire" to page.tsx - Added barrel export to tabs/index.ts - 11 tests all passing (133 total across all tab tests) - All pre-commit checks passed, 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#93