feat(layouts): toggle-delete when clicking same brush-piece

Clicking a square with the palette's currently-selected piece now
deletes that piece instead of re-placing it. Makes tap-to-delete a
natural single-gesture operation without switching to the Erase
brush. A different brush-piece still replaces (unchanged behaviour).
This commit is contained in:
Joey Yakimowich-Payne 2026-04-21 13:32:46 -06:00
commit 9289e60beb
No known key found for this signature in database
2 changed files with 58 additions and 0 deletions

View file

@ -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);