BUG: Duplicate "Climb the Spire" buttons cause strict mode violation and confusing UX #211

New Issue

2026-05-30T14:55:22+02:00

Anexim commented

2026-05-30 14:55:22 +02:00

Summary

There are two identical "Climb the Spire" buttons rendered simultaneously in the UI:

One in LeftPanel.tsx (always visible when not in spire mode)
One in SpireSummaryTab.tsx (visible when the Spire tab is active)

This causes a Playwright strict mode violation ("resolved to 2 elements") and creates confusing UX where the same action can be triggered from two different places.

Root Cause

src/app/components/LeftPanel.tsx lines 83-92: Renders a "Climb the Spire" button with onClick={enterSpireMode} when !spireMode
src/components/game/tabs/SpireSummaryTab.tsx lines 371-374: Also renders a "Climb the Spire" button with onClick={enterSpireMode}

Since the LeftPanel is always visible and the Spire tab can be active simultaneously, both buttons appear at the same time.

Reproduction

Start a new game
Click the "🏔️ Spire" tab
Both the LeftPanel button and the SpireSummaryTab button are visible simultaneously
Playwright test fails with: strict mode violation: getByRole('button', { name: /climb/i }) resolved to 2 elements

Expected Behavior

Only one "Climb the Spire" button should be visible at a time.

Suggested Fix

Either:

Remove the button from LeftPanel.tsx (keep only in SpireSummaryTab), OR
Remove the button from SpireSummaryTab.tsx (keep only in LeftPanel), OR
LeftPanel hides its button when Spire tab is active

Severity

Medium - Not game-breaking, but causes test failures and confusing UI.

Playwright Evidence

Error: locator.isVisible: Error: strict mode violation: getByRole('button', { name: /climb/i }) resolved to 2 elements

## Summary There are two identical "Climb the Spire" buttons rendered simultaneously in the UI: 1. One in `LeftPanel.tsx` (always visible when not in spire mode) 2. One in `SpireSummaryTab.tsx` (visible when the Spire tab is active) This causes a Playwright strict mode violation ("resolved to 2 elements") and creates confusing UX where the same action can be triggered from two different places. ## Root Cause - `src/app/components/LeftPanel.tsx` lines 83-92: Renders a "Climb the Spire" button with `onClick={enterSpireMode}` when `!spireMode` - `src/components/game/tabs/SpireSummaryTab.tsx` lines 371-374: Also renders a "Climb the Spire" button with `onClick={enterSpireMode}` Since the LeftPanel is always visible and the Spire tab can be active simultaneously, both buttons appear at the same time. ## Reproduction 1. Start a new game 2. Click the "🏔️ Spire" tab 3. Both the LeftPanel button and the SpireSummaryTab button are visible simultaneously 4. Playwright test fails with: `strict mode violation: getByRole('button', { name: /climb/i }) resolved to 2 elements` ## Expected Behavior Only one "Climb the Spire" button should be visible at a time. ## Suggested Fix Either: - Remove the button from `LeftPanel.tsx` (keep only in SpireSummaryTab), OR - Remove the button from `SpireSummaryTab.tsx` (keep only in LeftPanel), OR - LeftPanel hides its button when Spire tab is active ## Severity **Medium** - Not game-breaking, but causes test failures and confusing UI. ## Playwright Evidence ``` Error: locator.isVisible: Error: strict mode violation: getByRole('button', { name: /climb/i }) resolved to 2 elements ```

Anexim added the ai:todo label 2026-05-30 14:55:22 +02:00

n8n-gitea was assigned by Anexim

2026-05-30 14:55:22 +02:00

Anexim referenced this issue

2026-05-30 14:59:24 +02:00

BUG: "Climb the Spire" crashes with React error #185 (Maximum update depth exceeded) #209

Anexim commented

2026-05-30 15:03:52 +02:00

Playwright Test Ref

The failing test e2e/playtest.spec.ts → 3 - Spire / Climbing → KNOWN BUG #209 caught this. The test was looking for a single "Climb the Spire" button but found 2 due to strict mode violation.

After the duplicate button is fixed, the test should be updated to use .first() or target the specific button by its parent context (LeftPanel vs SpireSummaryTab).

## Playwright Test Ref The failing test `e2e/playtest.spec.ts` → `3 - Spire / Climbing → KNOWN BUG #209` caught this. The test was looking for a single "Climb the Spire" button but found 2 due to strict mode violation. After the duplicate button is fixed, the test should be updated to use `.first()` or target the specific button by its parent context (LeftPanel vs SpireSummaryTab).

Anexim commented

2026-05-30 15:24:23 +02:00

✅ Fix Applied

Removed the duplicate "Climb the Spire" button from SpireSummaryTab.tsx. The button in LeftPanel.tsx remains as the single entry point to the Spire.

Also cleaned up the now-unused Button and Mountain imports from SpireSummaryTab.tsx.

This resolves the Playwright strict mode violation where getByRole('button', { name: /climb/i }) was resolving to 2 elements.

Build: ✅ passing

## ✅ Fix Applied Removed the duplicate "Climb the Spire" button from `SpireSummaryTab.tsx`. The button in `LeftPanel.tsx` remains as the single entry point to the Spire. Also cleaned up the now-unused `Button` and `Mountain` imports from `SpireSummaryTab.tsx`. This resolves the Playwright strict mode violation where `getByRole('button', { name: /climb/i })` was resolving to 2 elements. Build: ✅ passing

Anexim closed this issue

2026-05-30 15:24:55 +02:00

Anexim commented

2026-05-30 15:24:55 +02:00