From 8dee798ae2e500296552a247c8a60dbf0fe214fd Mon Sep 17 00:00:00 2001 From: Brian Fertig Date: Sun, 30 Aug 2026 21:02:22 -0600 Subject: [PATCH] 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. --- src/games/jigsaw/JigsawGame.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/games/jigsaw/JigsawGame.js b/src/games/jigsaw/JigsawGame.js index 5a4396b..2fd4e80 100644 --- a/src/games/jigsaw/JigsawGame.js +++ b/src/games/jigsaw/JigsawGame.js @@ -503,11 +503,14 @@ export default class JigsawGame extends Phaser.Scene { // 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- // right piece — far away from the cursor.) - // Pieces stay interactive only for the hover cursor. The actual grab is - // resolved centrally in onTableDown (nearest piece to the pointer) so a - // click can never resolve to a distant neighbour's overlapping hit box. + // Pieces stay interactive for the hover cursor AND to consume the + // pointerdown (forwarding it to the central grab resolver). Without the + // 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; - 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 }); } }