[priority: 4] Recreate Spire Combat Page — Full Spire Climbing Experience #94

Closed
opened 2026-05-19 10:48:12 +02:00 by Anexim · 3 comments
Owner

Summary

Recreate the Spire Combat page that was deleted in commit fe0f2a0. This is a completely different view from the normal UI — when clicking "Climb the Spire" the player enters this page, and must climb down to floor 1 and click "Exit the Spire" to return to the main game.

Context

  • Spire mode is controlled by spireMode boolean in combatStore.ts
  • Current spire system has: currentFloor, floorHP, floorMaxHP, clearedFloors, climbDirection, isDescending
  • Floor HP formula: getFloorMaxHP(floor) = 100 + floor * 50 + floor^1.7 (non-guardian floors)
  • Room generation in room-utils.ts: generateRoomType(), generateFloorState()
  • Combat tick processing in combat-actions.ts: processCombatTick()
  • Guardians at floors 10, 20, 30, 40, 50, 60, 80, 90, 100
  • Insight per floor cleared via calcInsight()

Requirements

  • Create src/components/game/tabs/SpireCombatPage.tsx
  • This is a full-page replacement for the normal game UI when spireMode is true
  • Should NOT use the normal tab system — it's a completely different view
  • The main page.tsx should conditionally render this instead of the normal tab layout when spireMode is true

Spire Mechanics

  • Floor-based progression: Clear each floor to climb to the next. The player doesn't know how many floors there are (infinite or very high cap).
  • Rooms per floor: Each floor has a random set of rooms (5-15 for normal floors, 1 for boss floors).
  • Room types:
    • Combat rooms (most common):
      • Normal enemies (standard)
      • Mages: cast barriers that re-apply occasionally; must break barrier before dealing damage
      • Shield-carriers: one-off shield that must be broken before dealing damage
      • Armored: percentage-based or flat damage reduction (or both)
      • Swarm-types: 3-7 enemies with lower individual HP; AoE spells preferred
      • Agile: chance to dodge attacks; higher speed spells (lightning) preferred
      • Modifiers are combinable (e.g., armored + swarm)
    • Puzzle rooms: Require time to solve; each puzzle relates to 1+ attunements; higher attunement level = faster solve
    • Rare rooms:
      • Recovery room: Spend 1 hour, get 5x mana regen & conversion rates
      • Ancient library: Spend 1 hour, study 1 random discipline at 10x XP speed (no mana cost)
      • Other rare rooms as appropriate (e.g., treasure room, merchant room)
  • Guardian floors (every 10th floor):
    • 1 guardian per mana type: Fire, Water, Air, Earth, Transference, Light, Dark, Death (floors 10-80)
    • Then compound: Metal, Sand, Lightning (floors 90-110+)
    • Then exotic: Crystal, Stellar, Void (floors 120-140+)
    • Then combination guardians with multiple mana types
    • Guardians should be dynamic and modular with generated names (e.g., "Ignis the Flame Warden" for fire)
    • Each guardian defeated becomes a valid invoker pact partner (passive mana regen + unique perk)
  • Insight: Each floor cleared accumulates insight for the next loop reset
  • Auto-advance: When all rooms on a floor are cleared, automatically climb to the next floor (if ascending)
  • Exit: Player must climb down to floor 1 and click "Exit the Spire" to return to main game

UI Elements

  • Floor indicator (current floor, rooms cleared / total rooms)
  • Room display (room type, enemies, progress)
  • Active spells panel (select spell to cast)
  • Golem status panel
  • Combat stats (DPS, damage dealt, etc.)
  • Activity log
  • Climb up / Climb down controls
  • Exit Spire button (only available on floor 1)
  • Mana display (compact version)

Data/Logic New Files Needed

  • src/lib/game/data/guardian-encounters.ts — Extended guardian definitions for all mana types + combination guardians
  • src/lib/game/utils/spire-utils.ts — Spire-specific utility functions (room generation, enemy stat scaling, etc.)
  • src/lib/game/utils/enemy-generator.ts — Enemy generation with modifiers (mage, shield, armored, swarm, agile)

Architecture

  • This is NOT a regular tab — it replaces the main game view when spireMode is true
  • Modify src/app/page.tsx to conditionally render SpireCombatPage when spireMode is true
  • Keep the component under 400 lines; split into SpireCombatPage/ subdirectory with separate components for:
    • SpireHeader.tsx — Floor info, climb controls, exit button
    • RoomDisplay.tsx — Current room info and enemies
    • SpireCombatControls.tsx — Spell selection, golem status
    • SpireActivityLog.tsx — Combat activity log
  • Use Zustand store selectors
  • Use shared UI components from src/components/ui/
  • Use Tailwind CSS from the global design token system (no SCSS)
  • Write extensive tests for the spire combat flow

Guardian Name Generation

  • Use a combination of prefix + title based on element:
    • Fire: "Ignis", "Pyra", "Sol" + "Warden", "Keeper", "Lord", "Titan"
    • Water: "Aqua", "Marina", "Thal" + same titles
    • etc.
  • Combination guardians: combine prefixes from both elements
## Summary Recreate the Spire Combat page that was deleted in commit `fe0f2a0`. This is a completely different view from the normal UI — when clicking "Climb the Spire" the player enters this page, and must climb down to floor 1 and click "Exit the Spire" to return to the main game. ## Context - Spire mode is controlled by `spireMode` boolean in `combatStore.ts` - Current spire system has: `currentFloor`, `floorHP`, `floorMaxHP`, `clearedFloors`, `climbDirection`, `isDescending` - Floor HP formula: `getFloorMaxHP(floor)` = `100 + floor * 50 + floor^1.7` (non-guardian floors) - Room generation in `room-utils.ts`: `generateRoomType()`, `generateFloorState()` - Combat tick processing in `combat-actions.ts`: `processCombatTick()` - Guardians at floors 10, 20, 30, 40, 50, 60, 80, 90, 100 - Insight per floor cleared via `calcInsight()` ## Requirements - Create `src/components/game/tabs/SpireCombatPage.tsx` - This is a **full-page replacement** for the normal game UI when `spireMode` is true - Should NOT use the normal tab system — it's a completely different view - The main `page.tsx` should conditionally render this instead of the normal tab layout when `spireMode` is true ### Spire Mechanics - **Floor-based progression**: Clear each floor to climb to the next. The player doesn't know how many floors there are (infinite or very high cap). - **Rooms per floor**: Each floor has a random set of rooms (5-15 for normal floors, 1 for boss floors). - **Room types**: - **Combat rooms** (most common): - Normal enemies (standard) - Mages: cast barriers that re-apply occasionally; must break barrier before dealing damage - Shield-carriers: one-off shield that must be broken before dealing damage - Armored: percentage-based or flat damage reduction (or both) - Swarm-types: 3-7 enemies with lower individual HP; AoE spells preferred - Agile: chance to dodge attacks; higher speed spells (lightning) preferred - Modifiers are combinable (e.g., armored + swarm) - **Puzzle rooms**: Require time to solve; each puzzle relates to 1+ attunements; higher attunement level = faster solve - **Rare rooms**: - Recovery room: Spend 1 hour, get 5x mana regen & conversion rates - Ancient library: Spend 1 hour, study 1 random discipline at 10x XP speed (no mana cost) - Other rare rooms as appropriate (e.g., treasure room, merchant room) - **Guardian floors** (every 10th floor): - 1 guardian per mana type: Fire, Water, Air, Earth, Transference, Light, Dark, Death (floors 10-80) - Then compound: Metal, Sand, Lightning (floors 90-110+) - Then exotic: Crystal, Stellar, Void (floors 120-140+) - Then combination guardians with multiple mana types - Guardians should be dynamic and modular with generated names (e.g., "Ignis the Flame Warden" for fire) - Each guardian defeated becomes a valid invoker pact partner (passive mana regen + unique perk) - **Insight**: Each floor cleared accumulates insight for the next loop reset - **Auto-advance**: When all rooms on a floor are cleared, automatically climb to the next floor (if ascending) - **Exit**: Player must climb down to floor 1 and click "Exit the Spire" to return to main game ### UI Elements - Floor indicator (current floor, rooms cleared / total rooms) - Room display (room type, enemies, progress) - Active spells panel (select spell to cast) - Golem status panel - Combat stats (DPS, damage dealt, etc.) - Activity log - Climb up / Climb down controls - Exit Spire button (only available on floor 1) - Mana display (compact version) ### Data/Logic New Files Needed - `src/lib/game/data/guardian-encounters.ts` — Extended guardian definitions for all mana types + combination guardians - `src/lib/game/utils/spire-utils.ts` — Spire-specific utility functions (room generation, enemy stat scaling, etc.) - `src/lib/game/utils/enemy-generator.ts` — Enemy generation with modifiers (mage, shield, armored, swarm, agile) ## Architecture - This is NOT a regular tab — it replaces the main game view when `spireMode` is true - Modify `src/app/page.tsx` to conditionally render `SpireCombatPage` when `spireMode` is true - Keep the component under 400 lines; split into `SpireCombatPage/` subdirectory with separate components for: - `SpireHeader.tsx` — Floor info, climb controls, exit button - `RoomDisplay.tsx` — Current room info and enemies - `SpireCombatControls.tsx` — Spell selection, golem status - `SpireActivityLog.tsx` — Combat activity log - Use Zustand store selectors - Use shared UI components from `src/components/ui/` - Use Tailwind CSS from the global design token system (no SCSS) - Write extensive tests for the spire combat flow ## Guardian Name Generation - Use a combination of prefix + title based on element: - Fire: "Ignis", "Pyra", "Sol" + "Warden", "Keeper", "Lord", "Titan" - Water: "Aqua", "Marina", "Thal" + same titles - etc. - Combination guardians: combine prefixes from both elements
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-20 08:23:00 +02:00
Author
Owner

Starting work on Spire Combat Page. Plan:

  1. Create data/guardian-encounters.ts with extended guardian definitions for all mana types
  2. Create utils/spire-utils.ts with spire-specific utility functions
  3. Create utils/enemy-generator.ts with enemy generation with modifiers
  4. Create SpireCombatPage/ directory with sub-components (SpireHeader, RoomDisplay, SpireCombatControls, SpireActivityLog)
  5. Modify page.tsx to conditionally render SpireCombatPage when spireMode is true
  6. Write tests for the spire combat flow
Starting work on Spire Combat Page. Plan: 1. Create data/guardian-encounters.ts with extended guardian definitions for all mana types 2. Create utils/spire-utils.ts with spire-specific utility functions 3. Create utils/enemy-generator.ts with enemy generation with modifiers 4. Create SpireCombatPage/ directory with sub-components (SpireHeader, RoomDisplay, SpireCombatControls, SpireActivityLog) 5. Modify page.tsx to conditionally render SpireCombatPage when spireMode is true 6. Write tests for the spire combat flow
Author
Owner

Spire Combat Page implementation complete and pushed to master.

Files created (13 new files, 2 modified):

Data/Logic:

  • src/lib/game/data/guardian-encounters.ts — Extended guardian definitions for compound (metal/sand/lightning), exotic (crystal/stellar/void), and combination guardians with dynamic name generation
  • src/lib/game/utils/spire-utils.ts — Spire room generation, enemy stat scaling, insight calculation, room type display helpers
  • src/lib/game/utils/enemy-generator.ts — Enemy generation with 5 combinable modifiers (mage, shield, armored, swarm, agile)

UI Components (all under 400 lines):

  • SpireCombatPage/SpireHeader.tsx — Floor info, climb controls, exit button, HP/room progress bars
  • SpireCombatPage/RoomDisplay.tsx — Current room info with enemies, barriers, armor, dodge stats, special rooms
  • SpireCombatPage/SpireCombatControls.tsx — Spell selection panel, golem status panel
  • SpireCombatPage/SpireActivityLog.tsx — Combat activity log
  • SpireCombatPage/SpireManaDisplay.tsx — Compact mana display with elemental pools
  • SpireCombatPage/SpireCombatPage.tsx — Main component wiring everything together

Integration:

  • Modified src/app/page.tsx to conditionally render SpireCombatPage when spireMode is true

Tests (49 tests, all passing):

  • src/lib/game/__tests__/spire-utils.test.ts — 32 tests for spire utils and guardian encounters
  • src/lib/game/__tests__/enemy-generator.test.ts — 17 tests for enemy generation and modifiers
✅ Spire Combat Page implementation complete and pushed to master. **Files created (13 new files, 2 modified):** **Data/Logic:** - `src/lib/game/data/guardian-encounters.ts` — Extended guardian definitions for compound (metal/sand/lightning), exotic (crystal/stellar/void), and combination guardians with dynamic name generation - `src/lib/game/utils/spire-utils.ts` — Spire room generation, enemy stat scaling, insight calculation, room type display helpers - `src/lib/game/utils/enemy-generator.ts` — Enemy generation with 5 combinable modifiers (mage, shield, armored, swarm, agile) **UI Components (all under 400 lines):** - `SpireCombatPage/SpireHeader.tsx` — Floor info, climb controls, exit button, HP/room progress bars - `SpireCombatPage/RoomDisplay.tsx` — Current room info with enemies, barriers, armor, dodge stats, special rooms - `SpireCombatPage/SpireCombatControls.tsx` — Spell selection panel, golem status panel - `SpireCombatPage/SpireActivityLog.tsx` — Combat activity log - `SpireCombatPage/SpireManaDisplay.tsx` — Compact mana display with elemental pools - `SpireCombatPage/SpireCombatPage.tsx` — Main component wiring everything together **Integration:** - Modified `src/app/page.tsx` to conditionally render SpireCombatPage when `spireMode` is true **Tests (49 tests, all passing):** - `src/lib/game/__tests__/spire-utils.test.ts` — 32 tests for spire utils and guardian encounters - `src/lib/game/__tests__/enemy-generator.test.ts` — 17 tests for enemy generation and modifiers
Author
Owner

Summary of implementation:

The Spire Combat Page is now a full-page replacement view that activates when spireMode is true in the combat store. Key features implemented:

Spire Mechanics:

  • Floor-based progression with 5-15 rooms per floor (1 for guardian floors)
  • Room types: combat, swarm, speed, guardian, puzzle, recovery, library, treasure
  • Guardian floors every 10th floor with extended guardians (compound → exotic → combination)
  • Auto-advance when all rooms on a floor are cleared
  • Exit only available on floor 1

Enemy System:

  • 5 combinable modifiers: mage (barriers), shield (one-off shield), armored (damage reduction), swarm (multiple weak enemies), agile (dodge chance)
  • Enemies scale with floor level

Guardian System:

  • Base guardians at floors 10-80 (fire, water, air, earth, light, dark, death, void, stellar)
  • Compound guardians at floors 90, 110 (metal, sand, lightning)
  • Exotic guardians at floors 120-140 (crystal, stellar, void)
  • Combination guardians at floors 150+ (dual-element with combined prefixes)
  • Dynamic name generation (e.g., "Ignis the Flame Warden", "Pyra-Zephyr the Titan")

UI Elements:

  • Floor indicator with HP bar and room progress
  • Room display with enemy stats (HP, armor, dodge, barriers)
  • Active spell selection panel
  • Golem status panel
  • Activity log
  • Compact mana display with elemental pools
  • Climb up/down controls and exit button
**Summary of implementation:** The Spire Combat Page is now a full-page replacement view that activates when `spireMode` is true in the combat store. Key features implemented: **Spire Mechanics:** - Floor-based progression with 5-15 rooms per floor (1 for guardian floors) - Room types: combat, swarm, speed, guardian, puzzle, recovery, library, treasure - Guardian floors every 10th floor with extended guardians (compound → exotic → combination) - Auto-advance when all rooms on a floor are cleared - Exit only available on floor 1 **Enemy System:** - 5 combinable modifiers: mage (barriers), shield (one-off shield), armored (damage reduction), swarm (multiple weak enemies), agile (dodge chance) - Enemies scale with floor level **Guardian System:** - Base guardians at floors 10-80 (fire, water, air, earth, light, dark, death, void, stellar) - Compound guardians at floors 90, 110 (metal, sand, lightning) - Exotic guardians at floors 120-140 (crystal, stellar, void) - Combination guardians at floors 150+ (dual-element with combined prefixes) - Dynamic name generation (e.g., "Ignis the Flame Warden", "Pyra-Zephyr the Titan") **UI Elements:** - Floor indicator with HP bar and room progress - Room display with enemy stats (HP, armor, dodge, barriers) - Active spell selection panel - Golem status panel - Activity log - Compact mana display with elemental pools - Climb up/down controls and exit button
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#94