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

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

45
packages/chess/e2e/layouts.spec.ts
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);

13
packages/chess/src/ui/LayoutEditor.tsx
View file

@ -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 },