jigsawpuzzlegame 1.0.11 → 1.0.12

package/README.md

@@ -61,6 +61,9 @@ Make sure your container has a defined size:
 | `onWin` | function | `null` | Callback function called when the puzzle is completed |
 | `onStart` | function | `null` | Callback function called when a game starts |
 | `onStop` | function | `null` | Callback function called when a game is stopped |
+| `onMerged` | function | `null` | Callback function called when puzzle pieces are merged together (receives the merged piece as parameter) |
+| `onChanged` | function | `null` | Callback function called when a piece is moved or changed (receives the piece as parameter) |
+| `onDeleted` | function | `null` | Callback function called when a piece is deleted/merged into another piece (receives the deleted piece as parameter) |
 
 ## API Methods
 
@@ -196,6 +199,15 @@ const puzzle = new JigsawPuzzle('puzzle-container', {
     },
     onStop: () => {
         console.log('Game stopped');
+    },
+    onMerged: (piece) => {
+        console.log('Pieces merged!', piece);
+    },
+    onChanged: (piece) => {
+        console.log('Piece moved', piece);
+    },
+    onDeleted: (piece) => {
+        console.log('Piece deleted', piece);
     }
 });
 

package/index.html

@@ -266,6 +266,24 @@
                 <td><code>null</code></td>
                 <td>Callback function called when a game is stopped</td>
             </tr>
+            <tr>
+                <td><code>onMerged</code></td>
+                <td>function</td>
+                <td><code>null</code></td>
+                <td>Callback function called when puzzle pieces are merged together (receives the merged piece as parameter)</td>
+            </tr>
+            <tr>
+                <td><code>onChanged</code></td>
+                <td>function</td>
+                <td><code>null</code></td>
+                <td>Callback function called when a piece is moved or changed (receives the piece as parameter)</td>
+            </tr>
+            <tr>
+                <td><code>onDeleted</code></td>
+                <td>function</td>
+                <td><code>null</code></td>
+                <td>Callback function called when a piece is deleted/merged into another piece (receives the deleted piece as parameter)</td>
+            </tr>
         </tbody>
     </table>
 
@@ -307,6 +325,42 @@
         <p>Called when a game is stopped (when <code>stop()</code> is called).</p>
     </div>
 
+    <div class="method-section">
+        <h3><code>onMerged(piece)</code></h3>
+        <p>Called when puzzle pieces are merged together. Receives the merged piece as a parameter.</p>
+        <div class="example-box">
+            <strong>Example:</strong>
+            <pre><code>onMerged: (piece) => {
+    console.log('Pieces merged!', piece);
+    // Could update UI, play sound, etc.
+}</code></pre>
+        </div>
+    </div>
+
+    <div class="method-section">
+        <h3><code>onChanged(piece)</code></h3>
+        <p>Called when a piece is moved or changed. Receives the piece as a parameter.</p>
+        <div class="example-box">
+            <strong>Example:</strong>
+            <pre><code>onChanged: (piece) => {
+    console.log('Piece moved', piece);
+    // Could track moves, update statistics, etc.
+}</code></pre>
+        </div>
+    </div>
+
+    <div class="method-section">
+        <h3><code>onDeleted(piece)</code></h3>
+        <p>Called when a piece is deleted/merged into another piece. Receives the deleted piece as a parameter.</p>
+        <div class="example-box">
+            <strong>Example:</strong>
+            <pre><code>onDeleted: (piece) => {
+    console.log('Piece deleted', piece);
+    // Could track merges, update UI, etc.
+}</code></pre>
+        </div>
+    </div>
+
     <h2>5. Public Methods</h2>
 
     <div class="method-section">
@@ -455,6 +509,18 @@ const puzzle = new JigsawPuzzle('puzzle-container', {
     },
     onStart: () => {
         console.log('Game started');
+    },
+    onStop: () => {
+        console.log('Game stopped');
+    },
+    onMerged: (piece) => {
+        console.log('Pieces merged!', piece);
+    },
+    onChanged: (piece) => {
+        console.log('Piece moved', piece);
+    },
+    onDeleted: (piece) => {
+        console.log('Piece deleted', piece);
     }
 });</code></pre>
     </div>

package/jigsaw-puzzle-game.js

@@ -381,8 +381,10 @@ class Piece {
 // ============================================================================
 
 class PolyPiece {
-  constructor(initialPiece, puzzleInstance) {
+  constructor(initialPiece, puzzleInstance, yIndex, xIndex) {
     this.puzzle = puzzleInstance;
+    this.yIndex = yIndex;
+    this.xIndex = xIndex;
     this.pckxmin = initialPiece.kx;
     this.pckxmax = initialPiece.kx + 1;
     this.pckymin = initialPiece.ky;
@@ -414,7 +416,7 @@ class PolyPiece {
     const kOther = puzzle.polyPieces.indexOf(otherPoly);
     puzzle.polyPieces.splice(kOther, 1);
     puzzle.container.removeChild(otherPoly.canvas);
-
+  
     for (let k = 0; k < otherPoly.pieces.length; ++k) {
       this.pieces.push(otherPoly.pieces[k]);
       if (otherPoly.pieces[k].kx < this.pckxmin)
@@ -663,8 +665,8 @@ class PolyPiece {
         : "gold"
       : "rgba(0, 0, 0, 0.5)";
     this.ctx.shadowBlur = this.selected ? mmin(8, puzzle.scalex / 10) : 4;
-    this.ctx.shadowOffsetX = this.selected ? 0 : -4;
-    this.ctx.shadowOffsetY = this.selected ? 0 : 4;
+    this.ctx.shadowOffsetX = this.selected ? 0 : ([-4, 4, 4, -4][this.rot]);
+    this.ctx.shadowOffsetY = this.selected ? 0 : ([4, 4, -4, -4][this.rot]);
     this.ctx.fill(this.path);
     if (this.selected) {
       for (let i = 0; i < 6; i++) this.ctx.fill(this.path);
@@ -703,25 +705,19 @@ class PolyPiece {
 
       this.ctx.drawImage(
         puzzle.gameCanvas,
-        srcx,
-        srcy,
-        w,
-        h,
-        destx,
-        desty,
-        w,
-        h
+        srcx, srcy, w, h,
+        destx, desty, w, h
       );
       this.ctx.lineWidth = puzzle.embossThickness * 1.5;
 
-      this.ctx.translate(
-        puzzle.embossThickness / 2,
-        -puzzle.embossThickness / 2
-      );
+      const dxemboss = puzzle.embossThickness / 2 * [1, -1, -1, 1][this.rot];
+      const dyemboss = puzzle.embossThickness / 2 * [-1, -1, 1, 1][this.rot];
+
+      this.ctx.translate(dxemboss, dyemboss);
       this.ctx.strokeStyle = "rgba(0, 0, 0, 0.35)";
       this.ctx.stroke(path);
 
-      this.ctx.translate(-puzzle.embossThickness, puzzle.embossThickness);
+      this.ctx.translate(-2 * dxemboss, -2 * dyemboss);
       this.ctx.strokeStyle = "rgba(255, 255, 255, 0.35)";
       this.ctx.stroke(path);
 
@@ -911,9 +907,10 @@ class InternalPuzzle {
 
     this.polyPieces = [];
     if (!baseData) {
-      this.pieces.forEach((row) =>
-        row.forEach((piece) => {
-          this.polyPieces.push(new PolyPiece(piece, this));
+      this.pieces.forEach((row,yIndex) =>
+        row.forEach((piece,xIndex) => {
+          console.log('Piece:', yIndex, xIndex);
+          this.polyPieces.push(new PolyPiece(piece, this, yIndex, xIndex));
         })
       );
       arrayShuffle(this.polyPieces);
@@ -926,6 +923,7 @@ class InternalPuzzle {
       const pps = baseData[8];
       const offs = this.rotationAllowed ? 3 : 2;
       pps.forEach((ppData) => {
+        console.log('ppData:', ppData);
         let polyp = new PolyPiece(this.pieces[ppData[offs + 1]][ppData[offs]], this);
         polyp.x = ppData[0];
         polyp.y = ppData[1];
@@ -1364,7 +1362,8 @@ export class JigsawPuzzle {
       onStart: options.onStart || null,
       onStop: options.onStop || null,
       onMerged: options.onMerged || null,
-      onMoved: options.onMoved || null,
+      onChanged: options.onChanged || null,
+      onDeleted: options.onDeleted || null,
     };
     console.log('Options2:', this.options);
 
@@ -1774,12 +1773,14 @@ export class JigsawPuzzle {
                 if (this.moving.pp.ifNear(pp)) {
                   merged = true;
                   if (pp.pieces.length > this.moving.pp.pieces.length) {
+                    if (this.options.onDeleted) this.options.onDeleted(this.moving.pp);
                     pp.merge(this.moving.pp);
-                    if (this.options.onMerged) this.options.onMerged(pp, this.moving.pp);
+                    if (this.options.onMerged) this.options.onMerged(pp);
                     this.moving.pp = pp;
                   } else {                    
+                    if (this.options.onDeleted) this.options.onDeleted(pp);
                     this.moving.pp.merge(pp);
-                    if (this.options.onMerged) this.options.onMerged(this.moving.pp, pp);
+                    if (this.options.onMerged) this.options.onMerged(this.moving.pp);
                   }
                   doneSomething = true;
                   break;
@@ -1798,7 +1799,7 @@ export class JigsawPuzzle {
             if (this.puzzle.polyPieces.length === 1 && this.puzzle.polyPieces[0].rot === 0) {
               this.state = 60;
             }
-            if (this.options.onMoved) this.options.onMoved(this.moving.pp);
+            if (this.options.onChanged) this.options.onChanged(this.moving.pp);
         }
         break;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jigsawpuzzlegame",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "A class for creating a jigsaw puzzle",
   "keywords": [
     "jigsaw",