jyapayne/houserules
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(chess): lift dragged piece above all other pieces

Browse source 
The piece`s own z-index could only stack within its grid cell`s context,
so when translated over neighbouring cells it rendered underneath their
pieces. Promote the hosting cell to z-50 while it holds the dragged
piece so the whole cell (and piece inside) float above the board.
This commit is contained in:
Joey Yakimowich-Payne 2026-04-17 13:31:44 -06:00
commit 8b8a5179ec
No known key found for this signature in database
1 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/chess/src/ui/Board.tsx
View file

@ -125,14 +125,20 @@ export function Board({ facts, legalMoves, onMove, turn, lastMove, checkedKingSq
const isCheckedKing = checkedKingSquare === sq;
const piece = pieces.get(sq);
// While this cell hosts the actively-dragged piece, lift the whole
// cell above all siblings in the grid. Z-index inside the <Piece>
// component can only stack within its own cell's stacking context,
// so the piece would render *under* neighbouring cells' pieces when
// translated over them. Promoting the cell itself fixes that.
const isHostingDragged = draggedPiece?.square === sq;
squares.push(
<div
key={sq}
data-square={algebraic}
className={`relative aspect-square flex items-center justify-center ${
isDark ? 'bg-[#B58863]' : 'bg-[#F0D9B5]'
} shadow-[inset_0_0_8px_rgba(0,0,0,0.15)]`}
} shadow-[inset_0_0_8px_rgba(0,0,0,0.15)] ${isHostingDragged ? 'z-50' : ''}`}
onDragOver={(e) => handleDragOver(e, sq)}
onDrop={(e) => handleDrop(e, sq)}
>