[Bug] SymbolToken elements duplicated in DOM across chain panes and hand bar #19

New issue

Closed

opened 2026-05-18 02:59:27 +00:00 by Mark · 1 comment

Mark commented

2026-05-18 02:59:27 +00:00

Owner

Observed

After Turn 1 resolves, played symbols appear in BOTH the chain panes (display-only) AND the hand bar (interactive buttons). This creates duplicate SymbolToken elements in the DOM with the same data-symbol attribute, making them indistinguishable by attribute selector alone.

On Turn 2 of a casual duel:

Hand bar: 7 SymbolToken elements (all symbols, interactive)
Chain panes: 4 SymbolToken elements (symbols played on Turn 1)

Both sets use [data-component="SymbolToken"][data-symbol="veil"] etc., so querying by data-symbol matches all instances.

Impact

Any test/script that selects by [data-symbol=X] may hit a non-interactive chain pane element instead of a hand bar button
Automated interaction tests fail silently (click on chain token does nothing)
No visual impact for real players since chain tokens are display-only

Reproduction

Load http://localhost:5173/#/casual
Play Turn 1 with any symbols (e.g. spark + veil)
After resolution, inspect the DOM
Count symbol tokens: 7 in hand bar, several more in chain panes

Suggested fix

Either:

Use different data-component values for interactive vs display tokens (e.g. data-component="SymbolToken" for hand bar, data-component="ChainSymbol" for chain)
Or scope queries to the hand bar container (.flex-wrap.justify-center) for interactive selects

Environment

Chainbound Duel, latest main (aa8508f)

## Observed After Turn 1 resolves, played symbols appear in BOTH the chain panes (display-only) AND the hand bar (interactive buttons). This creates duplicate SymbolToken elements in the DOM with the same data-symbol attribute, making them indistinguishable by attribute selector alone. On Turn 2 of a casual duel: - Hand bar: 7 SymbolToken elements (all symbols, interactive) - Chain panes: 4 SymbolToken elements (symbols played on Turn 1) Both sets use [data-component="SymbolToken"][data-symbol="veil"] etc., so querying by data-symbol matches all instances. ## Impact - Any test/script that selects by [data-symbol=X] may hit a non-interactive chain pane element instead of a hand bar button - Automated interaction tests fail silently (click on chain token does nothing) - No visual impact for real players since chain tokens are display-only ## Reproduction 1. Load http://localhost:5173/#/casual 2. Play Turn 1 with any symbols (e.g. spark + veil) 3. After resolution, inspect the DOM 4. Count symbol tokens: 7 in hand bar, several more in chain panes ## Suggested fix Either: - Use different data-component values for interactive vs display tokens (e.g. data-component="SymbolToken" for hand bar, data-component="ChainSymbol" for chain) - Or scope queries to the hand bar container (.flex-wrap.justify-center) for interactive selects ## Environment - Chainbound Duel, latest main (aa8508f)