Fix jigsaw piece grab when click lands inside custom hit area

- Add pointerdown handler on each piece to forward the event to the central onTableDown resolver; without it, Phaser's topOnly=true consumes the click and the background never sees it, leaving pieces un-grabbable.
- Anchor the hit-area rectangle to the image's displayOrigin instead of (0,0) so the custom hit box tracks the piece's actual rendered position.
This commit is contained in:
Brian Fertig 2026-08-30 21:02:22 -06:00
parent 85fc7c16bf
commit 8dee798ae2
1 changed files with 7 additions and 4 deletions

View File

@ -503,11 +503,14 @@ export default class JigsawGame extends Phaser.Scene {
// piece's hit area. (With the old ±cell box, ~35 neighbour pairs overlapped // piece's hit area. (With the old ±cell box, ~35 neighbour pairs overlapped
// and the click resolved to whichever had the highest index — the bottom- // and the click resolved to whichever had the highest index — the bottom-
// right piece — far away from the cursor.) // right piece — far away from the cursor.)
// Pieces stay interactive only for the hover cursor. The actual grab is // Pieces stay interactive for the hover cursor AND to consume the
// resolved centrally in onTableDown (nearest piece to the pointer) so a // pointerdown (forwarding it to the central grab resolver). Without the
// click can never resolve to a distant neighbour's overlapping hit box. // pointerdown handler here, a click that lands inside the piece's custom
// hit area is consumed by the piece (topOnly=true) and never reaches the
// background's onTableDown — leaving the piece un-grabbable.
const grab = this.cell * GRAB_FRAC; const grab = this.cell * GRAB_FRAC;
img.setInteractive({ useHandCursor: true, hitArea: new Phaser.Geom.Rectangle(-grab, -grab, grab * 2, grab * 2), hitAreaCallback: Phaser.Geom.Rectangle.Contains }); img.setInteractive({ useHandCursor: true, hitArea: new Phaser.Geom.Rectangle(img.displayOriginX - grab, img.displayOriginY - grab, grab * 2, grab * 2), hitAreaCallback: Phaser.Geom.Rectangle.Contains });
img.on('pointerdown', (pointer) => this.onTableDown(pointer));
this.pieces.push({ r, c, img, home, placed: false, key, depth: 10 }); this.pieces.push({ r, c, img, home, placed: false, key, depth: 10 });
} }
} }