jigsawpuzzlegame 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -225,12 +225,16 @@ Works in all modern browsers (Chrome, Firefox, Safari, Edge).
225
225
 
226
226
  ## Styling
227
227
 
228
- The puzzle adds these CSS classes you can style:
228
+ 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.
229
+
230
+ The puzzle uses these CSS classes (automatically styled by the library):
229
231
 
230
232
  - `.polypiece` - Individual puzzle pieces
231
233
  - `.polypiece.moving` - Pieces during animation
232
234
  - `.gameCanvas` - Reference image canvas (hidden during play)
233
235
 
236
+ 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.
237
+
234
238
  ## Troubleshooting
235
239
 
236
240
  ### Puzzle doesn't start
package/game.css ADDED
@@ -0,0 +1,23 @@
1
+ /* Demo-specific styles for game.html */
2
+ /* Note: Library styles (.polypiece, .gameCanvas) are automatically injected by jigsaw-puzzle-game.js */
3
+
4
+ * {
5
+ margin: 0;
6
+ padding: 0;
7
+ box-sizing: border-box;
8
+ }
9
+
10
+ body {
11
+ width: 100vw;
12
+ height: 100vh;
13
+ overflow: hidden;
14
+ background-color: #f0f0f0;
15
+ }
16
+
17
+ #puzzle-container {
18
+ width: 100%;
19
+ height: 100%;
20
+ position: relative;
21
+ background-color: #e8e8e8;
22
+ }
23
+