jigsawpuzzlegame 1.0.6 → 1.0.8

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!');
+            }
+        });
     }
 }
 ```
@@ -225,12 +243,16 @@ Works in all modern browsers (Chrome, Firefox, Safari, Edge).
 
 ## Styling
 
-The puzzle adds these CSS classes you can style:
+The library automatically injects its required CSS styles when loaded, so **no external CSS file is needed**. The styles are injected once per page load, even if multiple puzzle instances are created.
+
+The puzzle uses these CSS classes (automatically styled by the library):
 
 - `.polypiece` - Individual puzzle pieces
 - `.polypiece.moving` - Pieces during animation
 - `.gameCanvas` - Reference image canvas (hidden during play)
 
+You can override these styles in your own CSS if needed. The library injects a `<style>` element with id `jigsaw-puzzle-styles` that you can target or override.
+
 ## Troubleshooting
 
 ### Puzzle doesn't start