Mana-Loop/docs/task5/subtask_9_context.md

Task 9: Fix Climb/Descend Controls - Context Summary

Status: Partially done (spam prevention and re-entry resume implemented, button rename incomplete)

1. Climbing/Descending State in store.ts

State Variables (lines 820, 2260):

• spireMode: boolean - Whether player is in Spire Mode
• clearedFloors: Record<number, boolean> - Tracks cleared floors for respawning
• climbDirection: 'up' | 'down' | null - Current climb direction (persisted for re-entry)
• isDescending: boolean - True when actively descending (prevents spam clicking)

Key Actions:

• enterSpireMode() (line 2253): Sets spireMode: true, currentAction: 'climb', isDescending: false
• climbDownFloor() (line 2267):
  • Checks isDescending to prevent spam
  • Decrements floor by 1 (min floor 1)
  • Sets isDescending: true during descent
  • Uses setTimeout to reset isDescending: false after 500ms
  • Clears/resets floor state in clearedFloors
• exitSpireMode() (line 2311): Sets spireMode: false, currentAction: 'meditate', isDescending: false

Spam Prevention (COMPLETED):

• isDescending flag prevents multiple rapid clicks
• Button is disabled when isDescending is true
• 500ms timeout resets the flag after descent completes

Re-entry Resume (COMPLETED):

• climbDirection is persisted in state
• enterSpireMode() resumes from climbDirection state
• exitSpireMode() allows exit at any floor, re-entry resumes at same floor

2. Buttons in SpireTab Components and page.tsx

src/app/page.tsx (Spire Mode UI) - Lines 258-278:

Climbing Indicator Badge (line 263-266):

{store.currentAction === 'climb' && !store.isDescending && (
  <Badge className="bg-green-900/50 text-green-300 border-green-600">
    Climbing
  </Badge>
)}

Descend/Climb Button (lines 267-278):

<Button
  variant="outline"
  className="border-blue-600/50 text-blue-400 hover:bg-blue-900/20"
  onClick={() => store.climbDownFloor()}
  disabled={store.isDescending}
>
  <ChevronDown className="w-4 h-4 mr-2" />
  {store.isDescending ? 'Descending…' : 
   store.currentAction === 'climb' ? 'Climbing' : 
   'Begin Descent'}
</Button>

Current Button Label Logic:

• When isDescending is true: Shows "Descending…" (with ellipsis) and button is disabled
• When currentAction === 'climb': Shows "Climbing"
• Otherwise: Shows "Begin Descent"

Enter Spire Mode Button (lines 211-221):

<Button
  className="w-full bg-gradient-to-r from-amber-600 to-orange-600..."
  onClick={() => store.enterSpireMode()}
  disabled={!canEnterSpireMode(store)}
>
  <Mountain className="w-5 h-5 mr-2" />
  Climb the Spire
</Button>

src/components/game/tabs/SpireTab.tsx:

• No climb/descend buttons - This component only displays floor info, spells, golems, and activity log
• Has "Enter Spire Mode" button (line 76) with label "Enter Spire Mode" (for non-Spire Mode view)
• Displays floor information, active spells, golems, and activity log in simpleMode={true}

3. What Needs to Change for Button Rename

Requirement: idle: 'Begin Descent', descending: 'Descending' disabled, climbing: 'Climbing'

Current Issues:

1. "Descending…" vs "Descending": The button shows "Descending…" (with ellipsis) when descending, but requirement says "Descending" (without ellipsis)

2. Button label when climbing: The current logic shows "Climbing" when currentAction === 'climb', but this is confusing because:

   • The button's action is to descend (calls climbDownFloor())
   • The "Climbing" Badge already serves as a separate indicator
   • When climbing, users may want to descend, so the button should probably say "Begin Descent"

3. Possible correct implementation:

   • Remove the currentAction === 'climb' check from button label
   • Button should always show "Begin Descent" when not descending
   • Button shows "Descending" (disabled) when descending
   • Keep the separate "Climbing" Badge as a status indicator

Suggested Button Code Fix (in page.tsx, lines 274-277):

{store.isDescending ? 'Descending' : 'Begin Descent'}

(Remove the store.currentAction === 'climb' ? 'Climbing' : 'Begin Descent' part)

4. Summary of Files to Modify

File	Change Needed
src/app/page.tsx	Fix button label logic (lines 274-277) to match requirements
src/lib/game/store.ts	No changes needed (spam prevention and re-entry resume implemented)
src/components/game/tabs/SpireTab.tsx	No changes needed (no climb/descend buttons)

5. Verification Steps

After making changes:

1. Test spam prevention: Rapidly click descend button - should only descend once per 500ms
2. Test re-entry resume: Exit Spire Mode at floor X, re-enter - should resume at floor X
3. Test button labels:
   • Idle (not climbing, not descending): Shows "Begin Descent"
   • Descending: Shows "Descending" (disabled)
   • Climbing: The separate Badge shows "Climbing", button shows "Begin Descent"