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