diff --git a/packages/chess/e2e/layouts.spec.ts b/packages/chess/e2e/layouts.spec.ts index 76ec9c5..54ba067 100644 --- a/packages/chess/e2e/layouts.spec.ts +++ b/packages/chess/e2e/layouts.spec.ts @@ -157,6 +157,51 @@ test.describe('LayoutEditor modal', () => { ).toHaveCount(0); }); + test('clicking a square with the same brush-piece toggles it off (delete)', async ({ + page, + }) => { + // Place a white king on e1 using the palette brush. + await page.getByTestId('palette-white-king').click(); + await page.getByTestId('editor-square-4').click(); + await expect( + page.getByTestId('editor-square-4').locator('img'), + ).toBeVisible(); + + // Same brush still selected — clicking the same square should + // TOGGLE the piece off instead of no-op / re-place. + await page.getByTestId('editor-square-4').click(); + await expect( + page.getByTestId('editor-square-4').locator('img'), + ).toHaveCount(0); + + // Clicking a 3rd time with the same brush re-adds the piece. + await page.getByTestId('editor-square-4').click(); + await expect( + page.getByTestId('editor-square-4').locator('img'), + ).toBeVisible(); + }); + + test('clicking a square with a DIFFERENT brush-piece replaces (does NOT delete)', async ({ + page, + }) => { + // Place a white king on e1. + await page.getByTestId('palette-white-king').click(); + await page.getByTestId('editor-square-4').click(); + + // Switch brush to black queen and click the same square — piece + // should be REPLACED, not deleted (only same-piece clicks toggle). + await page.getByTestId('palette-black-queen').click(); + await page.getByTestId('editor-square-4').click(); + await expect( + page.getByTestId('editor-square-4').locator('img'), + ).toBeVisible(); + // Alt text reflects the new piece (black queen), proving a + // replacement happened rather than a same-piece toggle. + await expect( + page.getByTestId('editor-square-4').locator('img'), + ).toHaveAttribute('alt', 'black queen'); + }); + test('FEN Load replaces the board', async ({ page }) => { const fen = '8/8/8/8/8/8/8/4K2k'; // white king e1, black king h1 (not a realistic position but valid) await page.getByTestId('editor-fen').fill(fen); diff --git a/packages/chess/src/ui/LayoutEditor.tsx b/packages/chess/src/ui/LayoutEditor.tsx index dd2fb3a..b5b565d 100644 --- a/packages/chess/src/ui/LayoutEditor.tsx +++ b/packages/chess/src/ui/LayoutEditor.tsx @@ -147,8 +147,21 @@ export function LayoutEditor({ function placeAt(square: number) { if (brush.type === 'none') return; setPlacements((prev) => { + const existing = prev.find((p) => p.square === square); const filtered = prev.filter((p) => p.square !== square); if (brush.type === 'erase') return filtered; + // Toggle-delete: clicking a square that already holds the + // exact piece the brush would place acts as an erase. This + // lets users tap-to-delete with the palette selection without + // first switching to the Erase brush — the same gesture that + // placed a piece undoes it. + if ( + existing !== undefined && + existing.type === brush.piece.type && + existing.color === brush.piece.color + ) { + return filtered; + } return [ ...filtered, { type: brush.piece.type, color: brush.piece.color, square },