jigsawpuzzlegame 1.0.7 → 1.0.9

package/README.md

@@ -52,10 +52,11 @@ Make sure your container has a defined size:
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `image` | string | `null` | URL or data URL of the image to use for the puzzle |
-| `numPieces` | number | `20` | Number of puzzle pieces (approximate - actual count depends on optimal grid layout) |
-| `shapeType` | number | `0` | Shape type for puzzle pieces (0-3):<br>• `0` - Classic jigsaw shape (curved tabs)<br>• `1` - Alternative shape 1<br>• `2` - Alternative shape 2<br>• `3` - Straight edges (rectangular pieces) |
-| `allowRotation` | boolean | `false` | Whether pieces can be rotated by clicking/tapping (90° increments) |
+| `image` | string | `null` | URL or data URL of the image to use for the puzzle (ignored if `savedData` is provided) |
+| `savedData` | string\|null | `null` | JSON string of saved game state:<br>• Non-empty string: use this saved data<br>• Empty string (`""`): load from localStorage<br>• Not provided or `null`: use normal initialization with `image` and other parameters |
+| `numPieces` | number | `20` | Number of puzzle pieces (approximate - actual count depends on optimal grid layout, ignored if `savedData` is provided) |
+| `shapeType` | number | `0` | Shape type for puzzle pieces (0-3, ignored if `savedData` is provided):<br>• `0` - Classic jigsaw shape (curved tabs)<br>• `1` - Alternative shape 1<br>• `2` - Alternative shape 2<br>• `3` - Straight edges (rectangular pieces) |
+| `allowRotation` | boolean | `false` | Whether pieces can be rotated by clicking/tapping (90° increments, ignored if `savedData` is provided) |
 | `onReady` | function | `null` | Callback function called when the puzzle is ready (image loaded and displayed) |
 | `onWin` | function | `null` | Callback function called when the puzzle is completed |
 | `onStart` | function | `null` | Callback function called when a game starts |
@@ -119,10 +120,10 @@ puzzle.setOptions({
 
 ### `save([callback])`
 
-Saves the current game state. If no callback is provided, saves to localStorage.
+Saves the current game state. Gets the state data, converts it to a JSON string, then either calls the callback with the string or saves to localStorage.
 
 **Parameters:**
-- `callback` (function, optional) - Function that receives the saved data as JSON string
+- `callback` (function, optional) - Function that receives the saved data as JSON string. If not provided, saves to localStorage automatically.
 
 ```javascript
 // Save to localStorage (default)
@@ -135,20 +136,30 @@ puzzle.save((savedData) => {
 });
 ```
 
-### `load([savedData])`
+### Loading Saved Games
 
-Loads a previously saved game state.
-
-**Parameters:**
-- `savedData` (string, optional) - JSON string of saved data. If not provided, loads from localStorage
+To load a saved game, create a new puzzle instance with the `savedData` option:
 
 ```javascript
-// Load from localStorage
-puzzle.load();
+// Load from explicit string
+const savedString = localStorage.getItem('myPuzzleSave');
+const puzzle = new JigsawPuzzle('puzzle-container', {
+    savedData: savedString,
+    onReady: () => puzzle.start()
+});
 
-// Load from custom data
-const savedData = localStorage.getItem('myPuzzleSave');
-puzzle.load(savedData);
+// Load from localStorage automatically (pass empty string)
+const puzzle = new JigsawPuzzle('puzzle-container', {
+    savedData: "",  // Empty string triggers localStorage lookup
+    onReady: () => puzzle.start()
+});
+
+// Create new puzzle (no saved data)
+const puzzle = new JigsawPuzzle('puzzle-container', {
+    image: 'image.jpg',
+    numPieces: 25,
+    onReady: () => puzzle.start()
+});
 ```
 
 ### `destroy()`
@@ -196,11 +207,18 @@ function saveGame() {
     });
 }
 
-// Load game
+// Load game - create new instance with saved data
 function loadGame() {
     const saved = localStorage.getItem('puzzleSave');
     if (saved) {
-        puzzle.load(saved);
+        if (puzzle) puzzle.destroy();
+        puzzle = new JigsawPuzzle('puzzle-container', {
+            savedData: saved,
+            onReady: () => puzzle.start(),
+            onWin: () => {
+                alert('You won!');
+            }
+        });
     }
 }
 ```

package/jigsaw-puzzle-game.js

@@ -4,6 +4,8 @@
  * 
  * Stripped of all UI code, providing a clean interface for integration.
  * 
+ * @version 1.0.8
+ * 
  * @example
  * const puzzle = new JigsawPuzzle('my-container-id', {
  *   image: 'https://example.com/image.jpg',
@@ -1329,10 +1331,14 @@ export class JigsawPuzzle {
     * Creates a new JigsawPuzzle instance
     * @param {string|HTMLElement} containerId - ID of container div or element itself
     * @param {Object} options - Configuration options
-    * @param {string} options.image - Image URL or data URL to use
-    * @param {number} options.numPieces - Number of puzzle pieces (default: 20)
-    * @param {number} options.shapeType - Shape type 0-3 (default: 0)
-    * @param {boolean} options.allowRotation - Allow piece rotation (default: false)
+    * @param {string} options.image - Image URL or data URL to use (ignored if savedData is provided)
+    * @param {string|null} options.savedData - JSON string of saved game state:
+    *   - Non-empty string: use this saved data
+    *   - Empty string (""): load from localStorage
+    *   - Not provided or null: use normal initialization with options.image and other parameters
+    * @param {number} options.numPieces - Number of puzzle pieces (default: 20, ignored if savedData is provided)
+    * @param {number} options.shapeType - Shape type 0-3 (default: 0, ignored if savedData is provided)
+    * @param {boolean} options.allowRotation - Allow piece rotation (default: false, ignored if savedData is provided)
     * @param {Function} options.onReady - Callback when puzzle is ready (image loaded, state 15)
     * @param {Function} options.onWin - Callback when puzzle is solved
     * @param {Function} options.onStart - Callback when game starts
@@ -1389,9 +1395,68 @@ export class JigsawPuzzle {
       this.events.push({ event: "resize" });
     });
 
-    // Load initial image if provided
-    if (this.options.image) {
-      this.setImage(this.options.image);
+    // Handle saved data based on savedData option:
+    // - Non-empty string: use that string
+    // - Empty string: load from localStorage
+    // - Not provided or null: use normal initialization
+    let savedDataString = null;
+    
+    if (options.savedData !== undefined && options.savedData !== null) {
+      if (options.savedData === "") {
+        // Empty string: load from localStorage
+        try {
+          savedDataString = localStorage.getItem("savepuzzle");
+        } catch (exception) {
+          // localStorage not available, continue with normal initialization
+        }
+      } else {
+        // Non-empty string: use it directly
+        savedDataString = options.savedData;
+      }
+    }
+    // If savedData is not provided or null, savedDataString remains null and we use normal initialization
+
+    // If saved data found, parse and validate it
+    if (savedDataString) {
+      try {
+        const parsedData = JSON.parse(savedDataString);
+        // Validate signature and required fields
+        if (parsedData.signature === FILE_SIGNATURE && parsedData.src) {
+          this.restoredState = parsedData;
+          // Set image from saved data (will override options.image)
+          this.puzzle.imageLoaded = false;
+          this.puzzle.srcImage.src = parsedData.src;
+          if (parsedData.origin) {
+            this.puzzle.srcImage.dataset.origin = parsedData.origin;
+          }
+          // Start restore flow - check if image is already loaded (cached)
+          if (this.puzzle.srcImage.complete && this.puzzle.srcImage.naturalWidth > 0) {
+            // Image already loaded, trigger load event manually
+            this._imageLoaded();
+            this.state = 158;
+          } else {
+            // Image will load asynchronously
+            this.state = 158;
+          }
+        } else {
+          // Invalid saved data, continue with normal initialization
+          this.restoredState = null;
+          if (this.options.image) {
+            this.setImage(this.options.image);
+          }
+        }
+      } catch (error) {
+        // Invalid JSON, continue with normal initialization
+        this.restoredState = null;
+        if (this.options.image) {
+          this.setImage(this.options.image);
+        }
+      }
+    } else {
+      // No saved data, load initial image if provided
+      if (this.options.image) {
+        this.setImage(this.options.image);
+      }
     }
 
     // Start animation loop
@@ -1563,9 +1628,6 @@ export class JigsawPuzzle {
         } else if (event.event === "srcImageLoaded") {
           this.state = 10;
           return;
-        } else if (event.event === "restore") {
-          this.state = 150;
-          return;
         } else return;
 
       case 20:
@@ -1631,8 +1693,6 @@ export class JigsawPuzzle {
         if (event.event === "nbpieces") {
           this.puzzle.nbPieces = event.nbpieces;
           this.state = 20;
-        } else if (event.event === "save") {
-          this.state = 120;
         } else if (event.event === "touch") {
           this.moving = {
             xMouseInit: event.position.x,
@@ -1814,61 +1874,6 @@ export class JigsawPuzzle {
         }
         break;
 
-      case 120:
-        const savedData = this.puzzle.getStateData();
-        const savedString = JSON.stringify(savedData);
-        if (event && event.callback) {
-          event.callback(savedString);
-        }
-        this.state = 50;
-        break;
-
-      case 150:
-        this.restoredString = "";
-        if (event && event.data) {
-          this.restoredString = event.data;
-          this.state = 155;
-        } else {
-          try {
-            this.restoredString = localStorage.getItem("savepuzzle");
-            if (!this.restoredString) this.restoredString = "";
-          } catch (exception) {
-            this.restoredString = "";
-          }
-          if (this.restoredString.length === 0) {
-            this.state = 15;
-            break;
-          }
-          this.state = 155;
-        }
-        break;
-
-      case 155:
-        try {
-          this.restoredState = JSON.parse(this.restoredString);
-        } catch (error) {
-          this.restoredState = null;
-          this.state = 10;
-          break;
-        }
-        if (
-          !this.restoredState.signature ||
-          this.restoredState.signature !== FILE_SIGNATURE ||
-          !this.restoredState.src
-        ) {
-          this.restoredState = null;
-          this.state = 10;
-          break;
-        }
-        this.puzzle.imageLoaded = false;
-        this.puzzle.srcImage.src = this.restoredState.src;
-        if (this.restoredState.origin)
-          this.puzzle.srcImage.dataset.origin = this.restoredState.origin;
-        else
-          delete this.puzzle.srcImage.dataset.origin;
-        this.state = 158;
-        // fall through
-
       case 158:
         if (event && event.event === "srcImageLoaded") {
           this.state = 160;
@@ -1878,8 +1883,18 @@ export class JigsawPuzzle {
         break;
 
       case 160:
+        // Create tmpImage if it doesn't exist (needed when loading from savedData)
+        if (!this.tmpImage) {
+          this.puzzle.container.innerHTML = "";
+          this.tmpImage = document.createElement("img");
+        }
         this.tmpImage.src = this.puzzle.srcImage.src;
+        this.puzzle.getContainerSize();
         fitImage(this.tmpImage, this.puzzle.contWidth * 0.95, this.puzzle.contHeight * 0.95);
+        this.tmpImage.style.boxShadow = "-4px 4px 4px rgba(0, 0, 0, 0.5)";
+        if (!this.tmpImage.parentNode) {
+          this.puzzle.container.appendChild(this.tmpImage);
+        }
         this.state = 20;
         break;
     }
@@ -1923,27 +1938,22 @@ export class JigsawPuzzle {
    * @param {Function} callback - Optional callback to receive saved data as JSON string
    */
   save(callback) {
+    // Get state data and convert to string
+    const savedData = this.puzzle.getStateData();
+    const savedString = JSON.stringify(savedData);
+    
+    // If callback provided, call it with the string; otherwise save to localStorage
     if (callback) {
-      this.events.push({ event: "save", callback });
+      callback(savedString);
     } else {
-      // Default: save to localStorage
-      this.events.push({ event: "save", callback: (data) => {
-        try {
-          localStorage.setItem("savepuzzle", data);
-        } catch (exception) {
-          console.error("Failed to save to localStorage:", exception);
-        }
-      }});
+      try {
+        localStorage.setItem("savepuzzle", savedString);
+      } catch (exception) {
+        console.error("Failed to save to localStorage:", exception);
+      }
     }
   }
 
-  /**
-   * Load a saved game state
-   * @param {string} savedData - JSON string of saved data, or null to load from localStorage
-   */
-  load(savedData) {
-    this.events.push({ event: "restore", data: savedData });
-  }
 
   /**
    * Set the puzzle image

package/package.json

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

package/game.css

@@ -1,23 +0,0 @@
-/* Demo-specific styles for game.html */
-/* Note: Library styles (.polypiece, .gameCanvas) are automatically injected by jigsaw-puzzle-game.js */
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    background-color: #f0f0f0;
-}
-
-#puzzle-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background-color: #e8e8e8;
-}
-