jigsawpuzzlegame 1.0.0

package/jigsaw-puzzle-game.js

@@ -0,0 +1,1943 @@
+"use strict";
+/**
+ * JigsawPuzzle - A refactored, reusable jigsaw puzzle game class
+ * 
+ * Stripped of all UI code, providing a clean interface for integration.
+ * 
+ * @example
+ * const puzzle = new JigsawPuzzle('my-container-id', {
+ *   image: 'https://example.com/image.jpg',
+ *   numPieces: 20,
+ *   shapeType: 0,
+ *   allowRotation: true
+ * });
+ * 
+ * puzzle.start();
+ */
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const FILE_EXTENSION = ".puz";
+const FILE_SIGNATURE = "pzfilecct";
+
+// Math shortcuts
+const mhypot = Math.hypot,
+  mrandom = Math.random,
+  mmax = Math.max,
+  mmin = Math.min,
+  mround = Math.round,
+  mfloor = Math.floor,
+  mceil = Math.ceil,
+  msqrt = Math.sqrt,
+  mabs = Math.abs;
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+function alea(min, max) {
+  if (typeof max == "undefined") return min * mrandom();
+  return min + (max - min) * mrandom();
+}
+
+function intAlea(min, max) {
+  if (typeof max == "undefined") {
+    max = min;
+    min = 0;
+  }
+  return mfloor(min + (max - min) * mrandom());
+}
+
+function arrayShuffle(array) {
+  let k1, temp;
+  for (let k = array.length - 1; k >= 1; --k) {
+    k1 = intAlea(0, k + 1);
+    temp = array[k];
+    array[k] = array[k1];
+    array[k1] = temp;
+  }
+  return array;
+}
+
+// ============================================================================
+// Pseudo-Random Number Generator
+// ============================================================================
+
+function mMash(seed) {
+  let n = 0xefc8249d;
+  let intSeed = (seed || Math.random()).toString();
+
+  function mash(data) {
+    if (data) {
+      data = data.toString();
+      for (var i = 0; i < data.length; i++) {
+        n += data.charCodeAt(i);
+        var h = 0.02519603282416938 * n;
+        n = h >>> 0;
+        h -= n;
+        h *= n;
+        n = h >>> 0;
+        h -= n;
+        n += h * 0x100000000;
+      }
+      return (n >>> 0) * 2.3283064365386963e-10;
+    }
+    n = 0xefc8249d;
+    return (n >>> 0) * 2.3283064365386963e-10;
+  }
+  n = mash(intSeed);
+
+  var x = function () {
+    n += 0x9e3779b9;
+    var h = 0x0274ebd7 * n;
+    return (h >>> 0) * 2.3283064365386963e-10;
+  };
+
+  x.intAlea = function (min, max) {
+    if (typeof max == "undefined") {
+      max = min;
+      min = 0;
+    }
+    return mfloor(min + (max - min) * x());
+  };
+
+  x.alea = function (min, max) {
+    if (typeof max == "undefined") return min * x();
+    return min + (max - min) * x();
+  };
+
+  x.reset = function () {
+    n = 0xefc8249d;
+    n = mash(intSeed);
+  };
+
+  x.seed = intSeed;
+  return x;
+}
+
+// ============================================================================
+// Core Geometry Classes
+// ============================================================================
+
+class Point {
+  constructor(x, y) {
+    this.x = Number(x);
+    this.y = Number(y);
+  }
+  copy() {
+    return new Point(this.x, this.y);
+  }
+  distance(otherPoint) {
+    return mhypot(this.x - otherPoint.x, this.y - otherPoint.y);
+  }
+}
+
+class Segment {
+  constructor(p1, p2) {
+    this.p1 = new Point(p1.x, p1.y);
+    this.p2 = new Point(p2.x, p2.y);
+  }
+  dx() {
+    return this.p2.x - this.p1.x;
+  }
+  dy() {
+    return this.p2.y - this.p1.y;
+  }
+  length() {
+    return mhypot(this.dx(), this.dy());
+  }
+  pointOnRelative(coeff) {
+    let dx = this.dx();
+    let dy = this.dy();
+    return new Point(this.p1.x + coeff * dx, this.p1.y + coeff * dy);
+  }
+}
+
+class Side {
+  constructor() {
+    this.type = "";
+    this.points = [];
+  }
+
+  reversed() {
+    const ns = new Side();
+    ns.type = this.type;
+    ns.points = this.points.slice().reverse();
+    return ns;
+  }
+
+  scale(puzzle) {
+    const coefx = puzzle.scalex;
+    const coefy = puzzle.scaley;
+    this.scaledPoints = this.points.map(
+      (p) => new Point(p.x * coefx, p.y * coefy)
+    );
+  }
+
+  drawPath(ctx, shiftx, shifty, withoutMoveTo) {
+    if (!withoutMoveTo) {
+      ctx.moveTo(
+        this.scaledPoints[0].x + shiftx,
+        this.scaledPoints[0].y + shifty
+      );
+    }
+    if (this.type == "d") {
+      ctx.lineTo(
+        this.scaledPoints[1].x + shiftx,
+        this.scaledPoints[1].y + shifty
+      );
+    } else {
+      for (let k = 1; k < this.scaledPoints.length - 1; k += 3) {
+        ctx.bezierCurveTo(
+          this.scaledPoints[k].x + shiftx,
+          this.scaledPoints[k].y + shifty,
+          this.scaledPoints[k + 1].x + shiftx,
+          this.scaledPoints[k + 1].y + shifty,
+          this.scaledPoints[k + 2].x + shiftx,
+          this.scaledPoints[k + 2].y + shifty
+        );
+      }
+    }
+  }
+}
+
+// ============================================================================
+// Piece Shape Functions (twist functions)
+// ============================================================================
+
+function twist0(side, ca, cb, prng) {
+  const seg0 = new Segment(side.points[0], side.points[1]);
+  const dxh = seg0.dx();
+  const dyh = seg0.dy();
+
+  const seg1 = new Segment(ca, cb);
+  const mid0 = seg0.pointOnRelative(0.5);
+  const mid1 = seg1.pointOnRelative(0.5);
+
+  const segMid = new Segment(mid0, mid1);
+  const dxv = segMid.dx();
+  const dyv = segMid.dy();
+
+  const scalex = prng.alea(0.8, 1);
+  const scaley = prng.alea(0.9, 1);
+  const mid = prng.alea(0.45, 0.55);
+
+  const pa = pointAt(mid - (1 / 12) * scalex, (1 / 12) * scaley);
+  const pb = pointAt(mid - (2 / 12) * scalex, (3 / 12) * scaley);
+  const pc = pointAt(mid, (4 / 12) * scaley);
+  const pd = pointAt(mid + (2 / 12) * scalex, (3 / 12) * scaley);
+  const pe = pointAt(mid + (1 / 12) * scalex, (1 / 12) * scaley);
+
+  side.points = [
+    seg0.p1,
+    new Point(
+      seg0.p1.x + (5 / 12) * dxh * 0.52,
+      seg0.p1.y + (5 / 12) * dyh * 0.52
+    ),
+    new Point(pa.x - (1 / 12) * dxv * 0.72, pa.y - (1 / 12) * dyv * 0.72),
+    pa,
+    new Point(pa.x + (1 / 12) * dxv * 0.72, pa.y + (1 / 12) * dyv * 0.72),
+    new Point(pb.x - (1 / 12) * dxv * 0.92, pb.y - (1 / 12) * dyv * 0.92),
+    pb,
+    new Point(pb.x + (1 / 12) * dxv * 0.52, pb.y + (1 / 12) * dyv * 0.52),
+    new Point(pc.x - (2 / 12) * dxh * 0.4, pc.y - (2 / 12) * dyh * 0.4),
+    pc,
+    new Point(pc.x + (2 / 12) * dxh * 0.4, pc.y + (2 / 12) * dyh * 0.4),
+    new Point(pd.x + (1 / 12) * dxv * 0.52, pd.y + (1 / 12) * dyv * 0.52),
+    pd,
+    new Point(pd.x - (1 / 12) * dxv * 0.92, pd.y - (1 / 12) * dyv * 0.92),
+    new Point(pe.x + (1 / 12) * dxv * 0.72, pe.y + (1 / 12) * dyv * 0.72),
+    pe,
+    new Point(pe.x - (1 / 12) * dxv * 0.72, pe.y - (1 / 12) * dyv * 0.72),
+    new Point(
+      seg0.p2.x - (5 / 12) * dxh * 0.52,
+      seg0.p2.y - (5 / 12) * dyh * 0.52
+    ),
+    seg0.p2
+  ];
+  side.type = "z";
+
+  function pointAt(coeffh, coeffv) {
+    return new Point(
+      seg0.p1.x + coeffh * dxh + coeffv * dxv,
+      seg0.p1.y + coeffh * dyh + coeffv * dyv
+    );
+  }
+}
+
+function twist1(side, ca, cb, prng) {
+  const seg0 = new Segment(side.points[0], side.points[1]);
+  const dxh = seg0.dx();
+  const dyh = seg0.dy();
+
+  const seg1 = new Segment(ca, cb);
+  const mid0 = seg0.pointOnRelative(0.5);
+  const mid1 = seg1.pointOnRelative(0.5);
+
+  const segMid = new Segment(mid0, mid1);
+  const dxv = segMid.dx();
+  const dyv = segMid.dy();
+
+  const pa = pointAt(
+    prng.alea(0.3, 0.35),
+    prng.alea(-0.05, 0.05)
+  );
+  const pb = pointAt(prng.alea(0.45, 0.55), prng.alea(0.2, 0.3));
+  const pc = pointAt(
+    prng.alea(0.65, 0.78),
+    prng.alea(-0.05, 0.05)
+  );
+
+  side.points = [
+    seg0.p1,
+    seg0.p1,
+    pa,
+    pa,
+    pa,
+    pb,
+    pb,
+    pb,
+    pc,
+    pc,
+    pc,
+    seg0.p2,
+    seg0.p2
+  ];
+  side.type = "z";
+
+  function pointAt(coeffh, coeffv) {
+    return new Point(
+      seg0.p1.x + coeffh * dxh + coeffv * dxv,
+      seg0.p1.y + coeffh * dyh + coeffv * dyv
+    );
+  }
+}
+
+function twist2(side, ca, cb, prng) {
+  const seg0 = new Segment(side.points[0], side.points[1]);
+  const dxh = seg0.dx();
+  const dyh = seg0.dy();
+
+  const seg1 = new Segment(ca, cb);
+  const mid0 = seg0.pointOnRelative(0.5);
+  const mid1 = seg1.pointOnRelative(0.5);
+
+  const segMid = new Segment(mid0, mid1);
+  const dxv = segMid.dx();
+  const dyv = segMid.dy();
+
+  const hmid = prng.alea(0.45, 0.55);
+  const vmid = prng.alea(0.4, 0.5);
+  const pc = pointAt(hmid, vmid);
+  let sega = new Segment(seg0.p1, pc);
+
+  const pb = sega.pointOnRelative(2 / 3);
+  sega = new Segment(seg0.p2, pc);
+  const pd = sega.pointOnRelative(2 / 3);
+
+  side.points = [seg0.p1, pb, pd, seg0.p2];
+  side.type = "z";
+
+  function pointAt(coeffh, coeffv) {
+    return new Point(
+      seg0.p1.x + coeffh * dxh + coeffv * dxv,
+      seg0.p1.y + coeffh * dyh + coeffv * dyv
+    );
+  }
+}
+
+function twist3(side, ca, cb, prng) {
+  side.points = [side.points[0], side.points[1]];
+}
+
+// ============================================================================
+// Piece Classes
+// ============================================================================
+
+class Piece {
+  constructor(kx, ky) {
+    this.ts = new Side();
+    this.rs = new Side();
+    this.bs = new Side();
+    this.ls = new Side();
+    this.kx = kx;
+    this.ky = ky;
+  }
+
+  scale(puzzleInstance) {
+    this.ts.scale(puzzleInstance);
+    this.rs.scale(puzzleInstance);
+    this.bs.scale(puzzleInstance);
+    this.ls.scale(puzzleInstance);
+  }
+}
+
+// ============================================================================
+// PolyPiece Class (needs puzzle instance reference)
+// ============================================================================
+
+class PolyPiece {
+  constructor(initialPiece, puzzleInstance) {
+    this.puzzle = puzzleInstance;
+    this.pckxmin = initialPiece.kx;
+    this.pckxmax = initialPiece.kx + 1;
+    this.pckymin = initialPiece.ky;
+    this.pckymax = initialPiece.ky + 1;
+    this.pieces = [initialPiece];
+    this.selected = false;
+    this.listLoops();
+
+    this.canvas = document.createElement("CANVAS");
+    this.puzzle.container.appendChild(this.canvas);
+    this.canvas.classList.add("polypiece");
+    this.ctx = this.canvas.getContext("2d");
+    this.rot = 0;
+  }
+
+  merge(otherPoly) {
+    const puzzle = this.puzzle;
+    const orgpckxmin = this.pckxmin;
+    const orgpckymin = this.pckymin;
+    const pbefore = getTransformed(
+      0,
+      0,
+      this.nx * puzzle.scalex,
+      this.ny * puzzle.scaley,
+      this.rot
+    );
+
+    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)
+        this.pckxmin = otherPoly.pieces[k].kx;
+      if (otherPoly.pieces[k].kx + 1 > this.pckxmax)
+        this.pckxmax = otherPoly.pieces[k].kx + 1;
+      if (otherPoly.pieces[k].ky < this.pckymin)
+        this.pckymin = otherPoly.pieces[k].ky;
+      if (otherPoly.pieces[k].ky + 1 > this.pckymax)
+        this.pckymax = otherPoly.pieces[k].ky + 1;
+    }
+
+    this.pieces.sort(function (p1, p2) {
+      if (p1.ky < p2.ky) return -1;
+      if (p1.ky > p2.ky) return 1;
+      if (p1.kx < p2.kx) return -1;
+      if (p1.kx > p2.kx) return 1;
+      return 0;
+    });
+
+    this.listLoops();
+    this.drawImage();
+
+    const pafter = getTransformed(
+      puzzle.scalex * (orgpckxmin - this.pckxmin),
+      puzzle.scaley * (orgpckymin - this.pckymin),
+      puzzle.scalex * (this.pckxmax - this.pckxmin + 1),
+      puzzle.scaley * (this.pckymax - this.pckymin + 1),
+      this.rot
+    );
+
+    this.moveTo(this.x - pafter.x + pbefore.x, this.y - pafter.y + pbefore.y);
+    puzzle.evaluateZIndex();
+
+    function getTransformed(orgx, orgy, width, height, rot) {
+      const dx = orgx - width / 2;
+      const dy = orgy - height / 2;
+      return {
+        x: width / 2 + [1, 0, -1, 0][rot] * dx + [0, -1, 0, 1][rot] * dy,
+        y: height / 2 + [0, 1, 0, -1][rot] * dx + [1, 0, -1, 0][rot] * dy
+      };
+    }
+  }
+
+  ifNear(otherPoly) {
+    const puzzle = this.puzzle;
+    if (this.rot != otherPoly.rot) return false;
+
+    let p1, p2;
+    let org = this.getOrgP();
+    let orgOther = otherPoly.getOrgP();
+
+    if (mhypot(org.x - orgOther.x, org.y - orgOther.y) >= puzzle.dConnect)
+      return false;
+
+    for (let k = this.pieces.length - 1; k >= 0; --k) {
+      p1 = this.pieces[k];
+      for (let ko = otherPoly.pieces.length - 1; ko >= 0; --ko) {
+        p2 = otherPoly.pieces[ko];
+        if (p1.kx == p2.kx && mabs(p1.ky - p2.ky) == 1) return true;
+        if (p1.ky == p2.ky && mabs(p1.kx - p2.kx) == 1) return true;
+      }
+    }
+
+    return false;
+  }
+
+  listLoops() {
+    const that = this;
+    function edgeIsCommon(kx, ky, edge) {
+      let k;
+      switch (edge) {
+        case 0: ky--; break;
+        case 1: kx++; break;
+        case 2: ky++; break;
+        case 3: kx--; break;
+      }
+      for (k = 0; k < that.pieces.length; k++) {
+        if (kx == that.pieces[k].kx && ky == that.pieces[k].ky) return true;
+      }
+      return false;
+    }
+
+    function edgeIsInTbEdges(kx, ky, edge) {
+      let k;
+      for (k = 0; k < tbEdges.length; k++) {
+        if (
+          kx == tbEdges[k].kx &&
+          ky == tbEdges[k].ky &&
+          edge == tbEdges[k].edge
+        )
+          return k;
+      }
+      return false;
+    }
+
+    let tbLoops = [];
+    let tbEdges = [];
+    let k;
+    let kEdge;
+    let lp;
+    let currEdge;
+    let tries;
+    let edgeNumber;
+    let potNext;
+
+    let tbTries = [
+      [
+        { dkx: 0, dky: 0, edge: 1 },
+        { dkx: 1, dky: 0, edge: 0 },
+        { dkx: 1, dky: -1, edge: 3 }
+      ],
+      [
+        { dkx: 0, dky: 0, edge: 2 },
+        { dkx: 0, dky: 1, edge: 1 },
+        { dkx: 1, dky: 1, edge: 0 }
+      ],
+      [
+        { dkx: 0, dky: 0, edge: 3 },
+        { dkx: -1, dky: 0, edge: 2 },
+        { dkx: -1, dky: 1, edge: 1 }
+      ],
+      [
+        { dkx: 0, dky: 0, edge: 0 },
+        { dkx: 0, dky: -1, edge: 3 },
+        { dkx: -1, dky: -1, edge: 2 }
+      ]
+    ];
+
+    for (k = 0; k < this.pieces.length; k++) {
+      for (kEdge = 0; kEdge < 4; kEdge++) {
+        if (!edgeIsCommon(this.pieces[k].kx, this.pieces[k].ky, kEdge))
+          tbEdges.push({
+            kx: this.pieces[k].kx,
+            ky: this.pieces[k].ky,
+            edge: kEdge,
+            kp: k
+          });
+      }
+    }
+
+    while (tbEdges.length > 0) {
+      lp = [];
+      currEdge = tbEdges[0];
+      lp.push(currEdge);
+      tbEdges.splice(0, 1);
+      do {
+        for (tries = 0; tries < 3; tries++) {
+          potNext = tbTries[currEdge.edge][tries];
+          edgeNumber = edgeIsInTbEdges(
+            currEdge.kx + potNext.dkx,
+            currEdge.ky + potNext.dky,
+            potNext.edge
+          );
+          if (edgeNumber === false) continue;
+          currEdge = tbEdges[edgeNumber];
+          lp.push(currEdge);
+          tbEdges.splice(edgeNumber, 1);
+          break;
+        }
+        if (edgeNumber === false) break;
+      } while (1);
+      tbLoops.push(lp);
+    }
+
+    this.tbLoops = tbLoops.map((loop) =>
+      loop.map((edge) => {
+        let cell = this.pieces[edge.kp];
+        if (edge.edge == 0) return cell.ts;
+        if (edge.edge == 1) return cell.rs;
+        if (edge.edge == 2) return cell.bs;
+        return cell.ls;
+      })
+    );
+  }
+
+  getRect() {
+    const puzzle = this.puzzle;
+    let rect0 = puzzle.container.getBoundingClientRect();
+    let rect = this.canvas.getBoundingClientRect();
+    return {
+      x: rect.x - rect0.x,
+      y: rect.y - rect0.y,
+      right: rect.right - rect0.x,
+      bottom: rect.bottom - rect0.y,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+
+  getOrgP() {
+    const puzzle = this.puzzle;
+    const rect = this.getRect();
+    switch (this.rot) {
+      case 0:
+        return {
+          x: rect.x - puzzle.scalex * this.pckxmin,
+          y: rect.y - puzzle.scaley * this.pckymin
+        };
+      case 1:
+        return {
+          x: rect.right + puzzle.scaley * this.pckymin,
+          y: rect.y - puzzle.scalex * this.pckxmin
+        };
+      case 2:
+        return {
+          x: rect.right + puzzle.scalex * this.pckxmin,
+          y: rect.bottom + puzzle.scaley * this.pckymin
+        };
+      case 3:
+        return {
+          x: rect.x - puzzle.scaley * this.pckymin,
+          y: rect.bottom + puzzle.scalex * this.pckxmin
+        };
+    }
+  }
+
+  drawPath(ctx, shiftx, shifty) {
+    this.tbLoops.forEach((loop) => {
+      let without = false;
+      loop.forEach((side) => {
+        side.drawPath(ctx, shiftx, shifty, without);
+        without = true;
+      });
+      ctx.closePath();
+    });
+  }
+
+  drawImage(special) {
+    const puzzle = this.puzzle;
+    this.nx = this.pckxmax - this.pckxmin + 1;
+    this.ny = this.pckymax - this.pckymin + 1;
+    this.canvas.width = this.nx * puzzle.scalex;
+    this.canvas.height = this.ny * puzzle.scaley;
+
+    this.offsx = (this.pckxmin - 0.5) * puzzle.scalex;
+    this.offsy = (this.pckymin - 0.5) * puzzle.scaley;
+
+    this.path = new Path2D();
+    this.drawPath(this.path, -this.offsx, -this.offsy);
+
+    this.ctx.fillStyle = "none";
+    this.ctx.shadowColor = this.selected
+      ? special
+        ? "lime"
+        : "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.fill(this.path);
+    if (this.selected) {
+      for (let i = 0; i < 6; i++) this.ctx.fill(this.path);
+    }
+    this.ctx.shadowColor = "rgba(0, 0, 0, 0)";
+
+    this.pieces.forEach((pp) => {
+      this.ctx.save();
+
+      const path = new Path2D();
+      const shiftx = -this.offsx;
+      const shifty = -this.offsy;
+      pp.ts.drawPath(path, shiftx, shifty, false);
+      pp.rs.drawPath(path, shiftx, shifty, true);
+      pp.bs.drawPath(path, shiftx, shifty, true);
+      pp.ls.drawPath(path, shiftx, shifty, true);
+      path.closePath();
+
+      this.ctx.clip(path);
+      const srcx = pp.kx ? (pp.kx - 0.5) * puzzle.scalex : 0;
+      const srcy = pp.ky ? (pp.ky - 0.5) * puzzle.scaley : 0;
+
+      const destx =
+        (pp.kx ? 0 : puzzle.scalex / 2) +
+        (pp.kx - this.pckxmin) * puzzle.scalex;
+      const desty =
+        (pp.ky ? 0 : puzzle.scaley / 2) +
+        (pp.ky - this.pckymin) * puzzle.scaley;
+
+      let w = 2 * puzzle.scalex;
+      let h = 2 * puzzle.scaley;
+      if (srcx + w > puzzle.gameCanvas.width)
+        w = puzzle.gameCanvas.width - srcx;
+      if (srcy + h > puzzle.gameCanvas.height)
+        h = puzzle.gameCanvas.height - srcy;
+
+      this.ctx.drawImage(
+        puzzle.gameCanvas,
+        srcx,
+        srcy,
+        w,
+        h,
+        destx,
+        desty,
+        w,
+        h
+      );
+      this.ctx.lineWidth = puzzle.embossThickness * 1.5;
+
+      this.ctx.translate(
+        puzzle.embossThickness / 2,
+        -puzzle.embossThickness / 2
+      );
+      this.ctx.strokeStyle = "rgba(0, 0, 0, 0.35)";
+      this.ctx.stroke(path);
+
+      this.ctx.translate(-puzzle.embossThickness, puzzle.embossThickness);
+      this.ctx.strokeStyle = "rgba(255, 255, 255, 0.35)";
+      this.ctx.stroke(path);
+
+      this.ctx.restore();
+      this.canvas.style.transform = `rotate(${90 * this.rot}deg)`;
+    });
+  }
+
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+    this.canvas.style.left = x + "px";
+    this.canvas.style.top = y + "px";
+  }
+
+  moveToInitialPlace() {
+    const puzzle = this.puzzle;
+    this.moveTo(
+      puzzle.offsx + (this.pckxmin - 0.5) * puzzle.scalex,
+      puzzle.offsy + (this.pckymin - 0.5) * puzzle.scaley
+    );
+  }
+
+  rotate(angle) {
+    this.rot = angle;
+  }
+
+  isPointInPath(p) {
+    let npath = new Path2D();
+    this.drawPath(npath, 0, 0);
+    let rect = this.getRect();
+
+    let pRefx = [rect.x, rect.right, rect.right, rect.x][this.rot];
+    let pRefy = [rect.y, rect.y, rect.bottom, rect.bottom][this.rot];
+
+    let mposx =
+      [1, 0, -1, 0][this.rot] * (p.x - pRefx) +
+      [0, 1, 0, -1][this.rot] * (p.y - pRefy);
+    let mposy =
+      [0, -1, 0, 1][this.rot] * (p.x - pRefx) +
+      [1, 0, -1, 0][this.rot] * (p.y - pRefy);
+
+    return this.ctx.isPointInPath(this.path, mposx, mposy);
+  }
+
+  coerceToContainer() {
+    const puzzle = this.puzzle;
+    let dimx = [puzzle.scalex, puzzle.scaley, puzzle.scalex, puzzle.scaley][
+      this.rot
+    ];
+    let dimy = [puzzle.scaley, puzzle.scalex, puzzle.scaley, puzzle.scalex][
+      this.rot
+    ];
+    const rect = this.getRect();
+    if (rect.y > -dimy && rect.bottom < puzzle.contHeight + dimy) {
+      if (rect.right < dimx) {
+        this.moveTo(this.x + dimx - rect.right, this.y);
+        return;
+      }
+      if (rect.x > puzzle.contWidth - dimx) {
+        this.moveTo(this.x + puzzle.contWidth - dimx - rect.x, this.y);
+        return;
+      }
+      return;
+    }
+    if (rect.x > -dimx && rect.right < puzzle.contHeight + dimy) {
+      if (rect.bottom < dimy) {
+        this.moveTo(this.x, this.y + dimy - rect.bottom);
+        return;
+      }
+      if (rect.y > puzzle.contHeight - dimy) {
+        this.moveTo(this.x, this.y + puzzle.contHeight - dimy - rect.y);
+        return;
+      }
+      return;
+    }
+    if (rect.y < -dimy) {
+      this.moveTo(this.x, this.y - rect.y - dimy);
+      this.getRect();
+    }
+    if (rect.bottom > puzzle.contHeight + dimy) {
+      this.moveTo(this.x, this.y + puzzle.contHeight + dimy - rect.bottom);
+      this.getRect();
+    }
+    if (rect.right < dimx) {
+      this.moveTo(this.x + dimx - rect.right, this.y);
+      return;
+    }
+    if (rect.x > puzzle.contWidth - dimx) {
+      this.moveTo(this.x + puzzle.contWidth - dimx - rect.x, this.y);
+      return;
+    }
+  }
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function fitImage(img, width, height) {
+  let wn = img.naturalWidth;
+  let hn = img.naturalHeight;
+  let w = width;
+  let h = (w * hn) / wn;
+  if (h > height) {
+    h = height;
+    w = (h * wn) / hn;
+  }
+  img.style.position = "absolute";
+  img.style.width = w + "px";
+  img.style.height = h + "px";
+  img.style.top = "50%";
+  img.style.left = "50%";
+  img.style.transform = "translate(-50%,-50%)";
+}
+
+// ============================================================================
+// Internal Puzzle Class (refactored to be UI-independent)
+// ============================================================================
+
+class InternalPuzzle {
+  constructor(container) {
+    this.container = typeof container === "string" 
+      ? document.getElementById(container)
+      : container;
+
+    this.gameCanvas = document.createElement("CANVAS");
+    this.container.appendChild(this.gameCanvas);
+
+    this.srcImage = new Image();
+    this.imageLoaded = false;
+    
+    // State
+    this.nbPieces = 20;
+    this.rotationAllowed = false;
+    this.typeOfShape = 0;
+  }
+
+  getContainerSize() {
+    let styl = window.getComputedStyle(this.container);
+    this.contWidth = parseFloat(styl.width);
+    this.contHeight = parseFloat(styl.height);
+  }
+
+  create(baseData) {
+    this.prng = mMash(baseData ? baseData[3] : null);
+    this.container.innerHTML = "";
+    this.getContainerSize();
+    
+    if (baseData) {
+      this.nx = baseData[0];
+      this.ny = baseData[1];
+      // baseData[2] is total game width (scalex * nx), not scalex itself
+      // scalex will be calculated in doScale()
+      this.rotationAllowed = !!baseData[4];
+      this.typeOfShape = baseData[5];
+    } else {
+      this.computenxAndny();
+    }
+
+    this.relativeHeight =
+      this.srcImage.naturalHeight /
+      this.ny /
+      (this.srcImage.naturalWidth / this.nx);
+
+    if (!baseData) {
+      this.typeOfShape = this.typeOfShape || 0;
+    }
+
+    this.defineShapes({
+      coeffDecentr: 0.12,
+      twistf: [twist0, twist1, twist2, twist3][this.typeOfShape]
+    });
+
+    this.polyPieces = [];
+    if (!baseData) {
+      this.pieces.forEach((row) =>
+        row.forEach((piece) => {
+          this.polyPieces.push(new PolyPiece(piece, this));
+        })
+      );
+      arrayShuffle(this.polyPieces);
+      if (this.rotationAllowed)
+        this.polyPieces.forEach((pp) => (pp.rot = intAlea(4)));
+    } else {
+      const pps = baseData[8];
+      const offs = this.rotationAllowed ? 3 : 2;
+      pps.forEach((ppData) => {
+        let polyp = new PolyPiece(this.pieces[ppData[offs + 1]][ppData[offs]], this);
+        polyp.x = ppData[0];
+        polyp.y = ppData[1];
+        polyp.rot = this.rotationAllowed ? ppData[2] : 0;
+        for (let k = offs + 2; k < ppData.length; k += 2) {
+          let kx = ppData[k];
+          let ky = ppData[k + 1];
+          polyp.pieces.push(this.pieces[ky][kx]);
+          polyp.pckxmin = mmin(polyp.pckxmin, kx);
+          polyp.pckxmax = mmax(polyp.pckxmax, kx + 1);
+          polyp.pckymin = mmin(polyp.pckymin, ky);
+          polyp.pckymax = mmax(polyp.pckymax, ky + 1);
+        }
+        polyp.listLoops();
+        this.polyPieces.push(polyp);
+      });
+    }
+    this.evaluateZIndex();
+  }
+
+  computenxAndny() {
+    let kx, ky,
+      width = this.srcImage.naturalWidth,
+      height = this.srcImage.naturalHeight,
+      npieces = this.nbPieces;
+    let err, errmin = 1e9;
+    let ncv, nch;
+
+    let nHPieces = mround(msqrt((npieces * width) / height));
+    let nVPieces = mround(npieces / nHPieces);
+
+    for (ky = 0; ky < 5; ky++) {
+      ncv = nVPieces + ky - 2;
+      for (kx = 0; kx < 5; kx++) {
+        nch = nHPieces + kx - 2;
+        err = (nch * height) / ncv / width;
+        err = err + 1 / err - 2;
+        err += mabs(1 - (nch * ncv) / npieces);
+
+        if (err < errmin) {
+          errmin = err;
+          this.nx = nch;
+          this.ny = ncv;
+        }
+      }
+    }
+  }
+
+  defineShapes(shapeDesc) {
+    let { coeffDecentr, twistf } = shapeDesc;
+    const corners = [];
+    const nx = this.nx, ny = this.ny;
+    let np;
+
+    for (let ky = 0; ky <= ny; ++ky) {
+      corners[ky] = [];
+      for (let kx = 0; kx <= nx; ++kx) {
+        corners[ky][kx] = new Point(
+          kx + this.prng.alea(-coeffDecentr, coeffDecentr),
+          ky + this.prng.alea(-coeffDecentr, coeffDecentr)
+        );
+        if (kx == 0) corners[ky][kx].x = 0;
+        if (kx == nx) corners[ky][kx].x = nx;
+        if (ky == 0) corners[ky][kx].y = 0;
+        if (ky == ny) corners[ky][kx].y = ny;
+      }
+    }
+
+    this.pieces = [];
+    for (let ky = 0; ky < ny; ++ky) {
+      this.pieces[ky] = [];
+      for (let kx = 0; kx < nx; ++kx) {
+        this.pieces[ky][kx] = np = new Piece(kx, ky);
+        if (ky == 0) {
+          np.ts.points = [corners[ky][kx], corners[ky][kx + 1]];
+          np.ts.type = "d";
+        } else {
+          np.ts = this.pieces[ky - 1][kx].bs.reversed();
+        }
+        np.rs.points = [corners[ky][kx + 1], corners[ky + 1][kx + 1]];
+        np.rs.type = "d";
+        if (kx < nx - 1) {
+          if (this.prng.intAlea(2))
+            twistf(np.rs, corners[ky][kx], corners[ky + 1][kx], this.prng);
+          else twistf(np.rs, corners[ky][kx + 2], corners[ky + 1][kx + 2], this.prng);
+        }
+        if (kx == 0) {
+          np.ls.points = [corners[ky + 1][kx], corners[ky][kx]];
+          np.ls.type = "d";
+        } else {
+          np.ls = this.pieces[ky][kx - 1].rs.reversed();
+        }
+        np.bs.points = [corners[ky + 1][kx + 1], corners[ky + 1][kx]];
+        np.bs.type = "d";
+        if (ky < ny - 1) {
+          if (this.prng.intAlea(2))
+            twistf(np.bs, corners[ky][kx + 1], corners[ky][kx], this.prng);
+          else twistf(np.bs, corners[ky + 2][kx + 1], corners[ky + 2][kx], this.prng);
+        }
+      }
+    }
+  }
+
+  scale() {
+    const maxWidth = 0.95 * this.contWidth;
+    const maxHeight = 0.95 * this.contHeight;
+    const woh = this.srcImage.naturalWidth / this.srcImage.naturalHeight;
+    let bestWidth = 0;
+    let piecex, piecey;
+
+    let xtra = this.nx * this.ny * 1.2;
+    for (let extrax = 0; extrax <= mceil(this.nx * 0.2); ++extrax) {
+      let availx = extrax == 0 ? maxWidth : this.contWidth;
+      for (let extray = 0; extray <= mceil(this.ny * 0.2); ++extray) {
+        if ((this.nx + extrax) * (this.ny + extray) < xtra) continue;
+        let availy = extray == 0 ? maxHeight : this.contHeight;
+        piecex = availx / (this.nx + extrax);
+        piecey = (piecex * this.nx) / woh / this.ny;
+        if (piecey * (this.ny + extray) > availy) {
+          piecey = availy / (this.ny + extray);
+          piecex = (piecey * this.ny * woh) / this.nx;
+        }
+        if (piecex * this.nx > bestWidth) bestWidth = piecex * this.nx;
+      }
+    }
+
+    this.doScale(bestWidth);
+  }
+
+  doScale(width) {
+    this.gameWidth = width;
+    this.gameHeight = (width * this.srcImage.naturalHeight) / this.srcImage.naturalWidth;
+
+    this.gameCanvas.width = this.gameWidth;
+    this.gameCanvas.height = this.gameHeight;
+    this.gameCtx = this.gameCanvas.getContext("2d");
+    this.gameCtx.drawImage(this.srcImage, 0, 0, this.gameWidth, this.gameHeight);
+
+    this.gameCanvas.classList.add("gameCanvas");
+    this.gameCanvas.style.zIndex = 500;
+
+    this.scalex = this.gameWidth / this.nx;
+    this.scaley = this.gameHeight / this.ny;
+
+    this.pieces.forEach((row) => {
+      row.forEach((piece) => piece.scale(this));
+    });
+
+    this.offsx = (this.contWidth - this.gameWidth) / 2;
+    this.offsy = (this.contHeight - this.gameHeight) / 2;
+    this.dConnect = mmax(10, mmin(this.scalex, this.scaley) / 10);
+    this.embossThickness = mmin(2 + (this.scalex / 200) * (5 - 2), 5);
+  }
+
+  sweepBy(dx, dy) {
+    this.polyPieces.forEach((pp) => {
+      pp.moveTo(pp.x + dx, pp.y + dy);
+    });
+  }
+
+  zoomBy(coef, center) {
+    let futWidth = this.gameWidth * coef;
+    let futHeight = this.gameHeight * coef;
+    if (
+      ((futWidth > 3000 || futHeight > 3000) && coef > 1) ||
+      (futWidth < 200 || futHeight < 200) & (coef < 1)
+    )
+      return;
+    if (coef == 1) return;
+
+    this.doScale(futWidth);
+    this.polyPieces.forEach((pp) => {
+      pp.moveTo(
+        coef * (pp.x - center.x) + center.x,
+        coef * (pp.y - center.y) + center.y
+      );
+      pp.drawImage();
+    });
+  }
+
+  relativeMouseCoordinates(event) {
+    const br = this.container.getBoundingClientRect();
+    return {
+      x: event.clientX - br.x,
+      y: event.clientY - br.y
+    };
+  }
+
+  limitRectangle(rect) {
+    let minscale = mmin(this.scalex, this.scaley);
+    rect.x0 = mmin(mmax(rect.x0, -minscale / 2), this.contWidth - 1.5 * minscale);
+    rect.x1 = mmin(mmax(rect.x1, -minscale / 2), this.contWidth - 1.5 * minscale);
+    rect.y0 = mmin(mmax(rect.y0, -minscale / 2), this.contHeight - 1.5 * minscale);
+    rect.y1 = mmin(mmax(rect.y1, -minscale / 2), this.contHeight - 1.5 * minscale);
+  }
+
+  spreadInRectangle(rect) {
+    this.limitRectangle(rect);
+    this.polyPieces.forEach((pp) =>
+      pp.moveTo(alea(rect.x0, rect.x1), alea(rect.y0, rect.y1))
+    );
+  }
+
+  spreadSetInRectangle(set, rect) {
+    this.limitRectangle(rect);
+    set.forEach((pp) =>
+      pp.moveTo(alea(rect.x0, rect.x1), alea(rect.y0, rect.y1))
+    );
+  }
+
+  optimInitial() {
+    const minx = -this.scalex / 2;
+    const miny = -this.scaley / 2;
+    const maxx = this.contWidth - 1.5 * this.scalex;
+    const maxy = this.contHeight - 1.5 * this.scaley;
+    let freex = this.contWidth - this.gameWidth;
+    let freey = this.contHeight - this.gameHeight;
+
+    let where = [0, 0, 0, 0];
+    let rects = [];
+    if (freex > 1.5 * this.scalex) {
+      where[1] = 1;
+      rects[1] = {
+        x0: this.gameWidth - 0.5 * this.scalex,
+        x1: maxx,
+        y0: miny,
+        y1: maxy
+      };
+    }
+    if (freex > 3 * this.scalex) {
+      where[3] = 1;
+      rects[3] = {
+        x0: minx,
+        x1: freex / 2 - 1.5 * this.scalex,
+        y0: miny,
+        y1: maxy
+      };
+      rects[1].x0 = this.contWidth - freex / 2 - 0.5 * this.scalex;
+    }
+    if (freey > 1.5 * this.scaley) {
+      where[2] = 1;
+      rects[2] = {
+        x0: minx,
+        x1: maxx,
+        y0: this.gameHeight - 0.5 * this.scaley,
+        y1: this.contHeight - 1.5 * this.scaley
+      };
+    }
+    if (freey > 3 * this.scaley) {
+      where[0] = 1;
+      rects[0] = {
+        x0: minx,
+        x1: maxx,
+        y0: miny,
+        y1: freey / 2 - 1.5 * this.scaley
+      };
+      rects[2].y0 = this.contHeight - freey / 2 - 0.5 * this.scaley;
+    }
+    if (where.reduce((sum, a) => sum + a) < 2) {
+      if (freex - freey > 0.2 * this.scalex || where[1]) {
+        this.spreadInRectangle({
+          x0: this.gameWidth - this.scalex / 2,
+          x1: maxx,
+          y0: miny,
+          y1: maxy
+        });
+      } else if (freey - freex > 0.2 * this.scalex || where[2]) {
+        this.spreadInRectangle({
+          x0: minx,
+          x1: maxx,
+          y0: this.gameHeight - this.scaley / 2,
+          y1: maxy
+        });
+      } else {
+        if (this.gameWidth > this.gameHeight) {
+          this.spreadInRectangle({
+            x0: minx,
+            x1: maxx,
+            y0: this.gameHeight - this.scaley / 2,
+            y1: maxy
+          });
+        } else {
+          this.spreadInRectangle({
+            x0: this.gameWidth - this.scalex / 2,
+            x1: maxx,
+            y0: miny,
+            y1: maxy
+          });
+        }
+      }
+      return;
+    }
+    let nrects = [];
+    rects.forEach((rect) => nrects.push(rect));
+    let k0 = 0;
+    const npTot = this.nx * this.ny;
+    for (let k = 0; k < nrects.length; ++k) {
+      let k1 = mround(((k + 1) / nrects.length) * npTot);
+      this.spreadSetInRectangle(this.polyPieces.slice(k0, k1), nrects[k]);
+      k0 = k1;
+    }
+    arrayShuffle(this.polyPieces);
+    this.evaluateZIndex();
+  }
+
+  evaluateZIndex() {
+    for (let k = this.polyPieces.length - 1; k > 0; --k) {
+      if (
+        this.polyPieces[k].pieces.length > this.polyPieces[k - 1].pieces.length
+      ) {
+        [this.polyPieces[k], this.polyPieces[k - 1]] = [
+          this.polyPieces[k - 1],
+          this.polyPieces[k]
+        ];
+      }
+    }
+    this.polyPieces.forEach((pp, k) => {
+      pp.canvas.style.zIndex = k + 10;
+    });
+    this.zIndexSup = this.polyPieces.length + 10;
+  }
+
+  getStateData() {
+    let ppData;
+    let saved = { signature: FILE_SIGNATURE };
+    if ("origin" in this.srcImage.dataset) {
+      saved.origin = this.srcImage.dataset.origin;
+    }
+    saved.src = this.srcImage.src;
+    let base = [
+      this.nx,
+      this.ny,
+      this.scalex * this.nx,
+      this.prng.seed,
+      this.rotationAllowed ? 1 : 0,
+      this.typeOfShape,
+      this.srcImage.naturalWidth,
+      this.srcImage.naturalHeight
+    ];
+    saved.base = base;
+    let pps = [];
+    base.push(pps);
+    this.polyPieces.forEach((pp) => {
+      ppData = [mround(pp.x), mround(pp.y)];
+      if (this.rotationAllowed) ppData.push(pp.rot);
+      pp.pieces.forEach((p) => ppData.push(p.kx, p.ky));
+      pps.push(ppData);
+    });
+    return saved;
+  }
+}
+
+// JigsawPuzzle Wrapper Class
+// This will be appended to jigsaw-puzzle-class.js
+
+// ============================================================================
+// JigsawPuzzle - Main Public API Class
+// ============================================================================
+
+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 {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
+    * @param {Function} options.onStop - Callback when game stops
+    */
+  constructor(containerId, options = {}) {
+    const container = typeof containerId === "string"
+      ? document.getElementById(containerId)
+      : containerId;
+
+    if (!container) {
+      throw new Error("Container element not found");
+    }
+
+    // Store options
+    this.options = {
+      image: options.image || null,
+      numPieces: options.numPieces || 20,
+      shapeType: options.shapeType || 0,
+      allowRotation: options.allowRotation || false,
+      onReady: options.onReady || null,
+      onWin: options.onWin || null,
+      onStart: options.onStart || null,
+      onStop: options.onStop || null
+    };
+
+    // Create internal puzzle instance
+    this.puzzle = new InternalPuzzle(container);
+    this.puzzle.nbPieces = this.options.numPieces;
+    this.puzzle.rotationAllowed = this.options.allowRotation;
+    this.puzzle.typeOfShape = this.options.shapeType;
+
+    // Animation state
+    this.events = [];
+    this.state = 0;
+    this.moving = {};
+    this.tmpImage = null;
+    this.lastMousePos = { x: 0, y: 0 };
+    this.useMouse = true;
+    this.playing = false;
+    this.animationFrameId = null;
+    this.restoredState = null;
+    this.restoredString = "";
+
+    // Setup event handlers
+    this._setupEventHandlers();
+
+    // Setup image load handler
+    this.puzzle.srcImage.addEventListener("load", () => this._imageLoaded());
+
+    // Setup resize handler
+    window.addEventListener("resize", () => {
+      if (this.events.length && this.events[this.events.length - 1].event === "resize") return;
+      this.events.push({ event: "resize" });
+    });
+
+    // Load initial image if provided
+    if (this.options.image) {
+      this.setImage(this.options.image);
+    }
+
+    // Start animation loop
+    this._animate(0);
+  }
+
+  _setupEventHandlers() {
+    const puzzle = this.puzzle;
+    const container = puzzle.container;
+
+    container.addEventListener("mousedown", (event) => {
+      this.useMouse = true;
+      event.preventDefault();
+      if (event.button !== 0) return;
+      this.events.push({
+        event: "touch",
+        position: puzzle.relativeMouseCoordinates(event)
+      });
+    });
+
+    container.addEventListener("touchstart", (event) => {
+      this.useMouse = false;
+      event.preventDefault();
+      if (event.touches.length === 0) return;
+      const rTouch = [];
+      for (let k = 0; k < event.touches.length; ++k) {
+        rTouch[k] = puzzle.relativeMouseCoordinates(event.touches.item(k));
+      }
+      if (event.touches.length === 1) {
+        this.events.push({ event: "touch", position: rTouch[0] });
+      }
+      if (event.touches.length === 2) {
+        this.events.push({ event: "touches", touches: rTouch });
+      }
+    }, { passive: false });
+
+    const handleLeave = () => {
+      this.events.push({ event: "leave" });
+    };
+
+    container.addEventListener("mouseup", (event) => {
+      this.useMouse = true;
+      event.preventDefault();
+      if (event.button !== 0) return;
+      handleLeave();
+    });
+    container.addEventListener("touchend", handleLeave);
+    container.addEventListener("touchleave", handleLeave);
+    container.addEventListener("touchcancel", handleLeave);
+
+    container.addEventListener("mousemove", (event) => {
+      this.useMouse = true;
+      event.preventDefault();
+      if (this.events.length && this.events[this.events.length - 1].event === "move")
+        this.events.pop();
+      const pos = puzzle.relativeMouseCoordinates(event);
+      this.lastMousePos = pos;
+      this.events.push({
+        event: "move",
+        position: pos,
+        ev: event
+      });
+    });
+
+    container.addEventListener("touchmove", (event) => {
+      this.useMouse = false;
+      event.preventDefault();
+      const rTouch = [];
+      if (event.touches.length === 0) return;
+      for (let k = 0; k < event.touches.length; ++k) {
+        rTouch[k] = puzzle.relativeMouseCoordinates(event.touches.item(k));
+      }
+      if (event.touches.length === 1) {
+        if (this.events.length && this.events[this.events.length - 1].event === "move")
+          this.events.pop();
+        this.events.push({ event: "move", position: rTouch[0] });
+      }
+      if (event.touches.length === 2) {
+        if (this.events.length && this.events[this.events.length - 1].event === "moves")
+          this.events.pop();
+        this.events.push({ event: "moves", touches: rTouch });
+      }
+    }, { passive: false });
+
+    container.addEventListener("wheel", (event) => {
+      this.useMouse = true;
+      event.preventDefault();
+      if (this.events.length && this.events[this.events.length - 1].event === "wheel")
+        this.events.pop();
+      this.events.push({ event: "wheel", wheel: event });
+    });
+  }
+
+  _imageLoaded() {
+    this.puzzle.imageLoaded = true;
+    let event = { event: "srcImageLoaded" };
+    if (this.restoredState) {
+      if (
+        mround(this.puzzle.srcImage.naturalWidth) !== this.restoredState.base[6] ||
+        mround(this.puzzle.srcImage.naturalHeight) !== this.restoredState.base[7]
+      ) {
+        event.event = "wrongImage";
+        this.restoredState = null;
+      }
+    }
+    this.events.push(event);
+  }
+
+  _animate(tStamp) {
+    this.animationFrameId = requestAnimationFrame((ts) => this._animate(ts));
+
+    let event;
+    if (this.events.length) event = this.events.shift();
+    if (event && event.event === "reset") this.state = 0;
+
+    // Resize event
+    if (event && event.event === "resize") {
+      const puzzle = this.puzzle;
+      const prevWidth = puzzle.contWidth;
+      const prevHeight = puzzle.contHeight;
+      puzzle.getContainerSize();
+      if (this.state === 15 || this.state === 60) {
+        fitImage(this.tmpImage, puzzle.contWidth * 0.95, puzzle.contHeight * 0.95);
+      } else if (this.state >= 25) {
+        const prevGameWidth = puzzle.gameWidth;
+        const prevGameHeight = puzzle.gameHeight;
+        puzzle.scale();
+        const reScale = puzzle.contWidth / prevWidth;
+        puzzle.polyPieces.forEach((pp) => {
+          let nx = puzzle.contWidth / 2 - (prevWidth / 2 - pp.x) * reScale;
+          let ny = puzzle.contHeight / 2 - (prevHeight / 2 - pp.y) * reScale;
+          nx = mmin(mmax(nx, -puzzle.scalex / 2), puzzle.contWidth - 1.5 * puzzle.scalex);
+          ny = mmin(mmax(ny, -puzzle.scaley / 2), puzzle.contHeight - 1.5 * puzzle.scaley);
+          pp.moveTo(nx, ny);
+          pp.drawImage();
+        });
+      }
+      return;
+    }
+
+    switch (this.state) {
+      case 0:
+        this.state = 10;
+      // fall through
+
+      case 10:
+        this.playing = false;
+        if (!this.puzzle.imageLoaded) return;
+        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)";
+        this.puzzle.container.appendChild(this.tmpImage);
+        this.state = 15;
+        // Call onReady callback when puzzle is ready (image loaded and displayed)
+        if (this.options.onReady) {
+          this.options.onReady();
+        }
+        break;
+
+      case 15:
+        this.playing = false;
+        if (!event) return;
+        if (event.event === "nbpieces") {
+          this.puzzle.nbPieces = event.nbpieces;
+          this.state = 20;
+        } else if (event.event === "srcImageLoaded") {
+          this.state = 10;
+          return;
+        } else if (event.event === "restore") {
+          this.state = 150;
+          return;
+        } else return;
+
+      case 20:
+        this.playing = true;
+        if (this.options.onStart) this.options.onStart();
+        this.puzzle.rotationAllowed = this.options.allowRotation;
+        if (this.restoredState) {
+          this.puzzle.create(this.restoredState.base);
+        } else {
+          this.puzzle.create();
+        }
+        if (this.restoredState) {
+          this.puzzle.doScale(this.restoredState.base[2]);
+        } else {
+          this.puzzle.scale();
+        }
+        this.puzzle.polyPieces.forEach((pp) => {
+          pp.drawImage();
+          if (this.restoredState) {
+            pp.moveTo(pp.x, pp.y);
+          } else {
+            pp.moveToInitialPlace();
+          }
+        });
+        this.puzzle.gameCanvas.style.top = this.puzzle.offsy + "px";
+        this.puzzle.gameCanvas.style.left = this.puzzle.offsx + "px";
+        this.puzzle.gameCanvas.style.display = "none";
+        this.state = 25;
+        if (this.restoredState) {
+          this.restoredState = null;
+          this.state = 50;
+        }
+        break;
+
+      case 25:
+        this.puzzle.gameCanvas.style.display = "none";
+        this.puzzle.polyPieces.forEach((pp) => {
+          pp.canvas.classList.add("moving");
+        });
+        this.state = 30;
+        break;
+
+      case 30:
+        this.puzzle.optimInitial();
+        setTimeout(() => this.events.push({ event: "finished" }), 1200);
+        this.state = 35;
+        break;
+
+      case 35:
+        if (!event || event.event !== "finished") return;
+        this.puzzle.polyPieces.forEach((pp) => {
+          pp.canvas.classList.remove("moving");
+        });
+        this.state = 50;
+        break;
+
+      case 50:
+        if (!event) return;
+        if (event.event === "stop") {
+          this.state = 10;
+          return;
+        }
+        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,
+            yMouseInit: event.position.y,
+            tInit: tStamp
+          };
+          for (let k = this.puzzle.polyPieces.length - 1; k >= 0; --k) {
+            let pp = this.puzzle.polyPieces[k];
+            if (pp.isPointInPath(event.position)) {
+              pp.selected = true;
+              pp.drawImage();
+              this.moving.pp = pp;
+              this.moving.ppXInit = pp.x;
+              this.moving.ppYInit = pp.y;
+              this.puzzle.polyPieces.splice(k, 1);
+              this.puzzle.polyPieces.push(pp);
+              pp.canvas.style.zIndex = this.puzzle.zIndexSup;
+              this.state = 55;
+              return;
+            }
+          }
+          this.state = 100;
+        } else if (event.event === "touches") {
+          this.moving = { touches: event.touches };
+          this.state = 110;
+        } else if (event.event === "wheel") {
+          if (event.wheel.deltaY > 0) this.puzzle.zoomBy(1.3, this.lastMousePos);
+          if (event.wheel.deltaY < 0) this.puzzle.zoomBy(1 / 1.3, this.lastMousePos);
+        }
+        break;
+
+      case 55:
+        if (!event) return;
+        if (event.event === "stop") {
+          this.state = 10;
+          return;
+        }
+        switch (event.event) {
+          case "moves":
+          case "touches":
+            this.moving.pp.selected = false;
+            this.moving.pp.drawImage();
+            this.moving = { touches: event.touches };
+            this.state = 110;
+            break;
+          case "move":
+            if (event?.ev?.buttons === 0) {
+              this.events.push({ event: "leave" });
+              break;
+            }
+            this.moving.pp.moveTo(
+              event.position.x - this.moving.xMouseInit + this.moving.ppXInit,
+              event.position.y - this.moving.yMouseInit + this.moving.ppYInit
+            );
+            break;
+          case "leave":
+            if (this.puzzle.rotationAllowed && tStamp < this.moving.tInit + 250) {
+              this.moving.pp.rotate((this.moving.pp.rot + 1) % 4);
+              this.moving.pp.coerceToContainer();
+            }
+            this.moving.pp.selected = false;
+            this.moving.pp.drawImage();
+            let merged = false;
+            let doneSomething;
+            do {
+              doneSomething = false;
+              for (let k = this.puzzle.polyPieces.length - 1; k >= 0; --k) {
+                let pp = this.puzzle.polyPieces[k];
+                if (pp === this.moving.pp) continue;
+                if (this.moving.pp.ifNear(pp)) {
+                  merged = true;
+                  if (pp.pieces.length > this.moving.pp.pieces.length) {
+                    pp.merge(this.moving.pp);
+                    this.moving.pp = pp;
+                  } else {
+                    this.moving.pp.merge(pp);
+                  }
+                  doneSomething = true;
+                  break;
+                }
+              }
+            } while (doneSomething);
+            this.puzzle.evaluateZIndex();
+            if (merged) {
+              this.moving.pp.selected = true;
+              this.moving.pp.drawImage(true);
+              this.moving.tInit = tStamp + 500;
+              this.state = 56;
+              break;
+            }
+            this.state = 50;
+            if (this.puzzle.polyPieces.length === 1 && this.puzzle.polyPieces[0].rot === 0) {
+              this.state = 60;
+            }
+        }
+        break;
+
+      case 56:
+        if (tStamp < this.moving.tInit) return;
+        this.moving.pp.selected = false;
+        this.moving.pp.drawImage();
+        if (this.puzzle.polyPieces.length === 1 && this.puzzle.polyPieces[0].rot === 0)
+          this.state = 60;
+        else
+          this.state = 50;
+        break;
+
+      case 60:
+        this.playing = false;
+        if (this.options.onWin) this.options.onWin();
+        this.puzzle.container.innerHTML = "";
+        this.puzzle.getContainerSize();
+        fitImage(this.tmpImage, this.puzzle.contWidth * 0.95, this.puzzle.contHeight * 0.95);
+        const finalWidth = this.tmpImage.style.width;
+        const finalHeight = this.tmpImage.style.height;
+        this.tmpImage.style.width = `${this.puzzle.nx * this.puzzle.scalex}px`;
+        this.tmpImage.style.height = `${this.puzzle.ny * this.puzzle.scaley}px`;
+        this.tmpImage.style.left = `${((this.puzzle.polyPieces[0].x + this.puzzle.scalex / 2 + this.puzzle.gameWidth / 2) / this.puzzle.contWidth) * 100}%`;
+        this.tmpImage.style.top = `${((this.puzzle.polyPieces[0].y + this.puzzle.scaley / 2 + this.puzzle.gameHeight / 2) / this.puzzle.contHeight) * 100}%`;
+        this.tmpImage.style.boxShadow = "-4px 4px 4px rgba(0, 0, 0, 0.5)";
+        this.tmpImage.classList.add("moving");
+        setTimeout(() => {
+          this.tmpImage.style.top = this.tmpImage.style.left = "50%";
+          this.tmpImage.style.width = finalWidth;
+          this.tmpImage.style.height = finalHeight;
+        }, 0);
+        this.puzzle.container.appendChild(this.tmpImage);
+        this.state = 15;
+        break;
+
+      case 100:
+        if (!event) return;
+        if (event.event === "move") {
+          if (event?.ev?.buttons === 0) {
+            this.state = 50;
+            break;
+          }
+          this.puzzle.sweepBy(
+            event.position.x - this.moving.xMouseInit,
+            event.position.y - this.moving.yMouseInit
+          );
+          this.moving.xMouseInit = event.position.x;
+          this.moving.yMouseInit = event.position.y;
+          return;
+        }
+        if (event.event === "leave") {
+          this.state = 50;
+          return;
+        }
+        if (event.event === "touches") {
+          this.moving = { touches: event.touches };
+          this.state = 110;
+        }
+        break;
+
+      case 110:
+        if (!event) return;
+        if (event.event === "leave") {
+          this.state = 50;
+          return;
+        }
+        if (event.event === "moves") {
+          const center = {
+            x: (this.moving.touches[0].x + this.moving.touches[1].x) / 2,
+            y: (this.moving.touches[0].y + this.moving.touches[1].y) / 2
+          };
+          const dInit = mhypot(
+            this.moving.touches[0].x - this.moving.touches[1].x,
+            this.moving.touches[0].y - this.moving.touches[1].y
+          );
+          const d = mhypot(
+            event.touches[0].x - event.touches[1].x,
+            event.touches[0].y - event.touches[1].y
+          );
+          const dRef = msqrt(this.puzzle.contWidth * this.puzzle.contHeight) / 5;
+          this.puzzle.zoomBy(Math.exp((d - dInit) / dRef), center);
+          this.moving.touches = event.touches;
+          return;
+        }
+        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;
+        } else if (event && event.event === "wrongImage") {
+          this.state = 10;
+        }
+        break;
+
+      case 160:
+        this.tmpImage.src = this.puzzle.srcImage.src;
+        fitImage(this.tmpImage, this.puzzle.contWidth * 0.95, this.puzzle.contHeight * 0.95);
+        this.state = 20;
+        break;
+    }
+  }
+
+  // ============================================================================
+  // Public API Methods
+  // ============================================================================
+
+  /**
+   * Start a new game with the current settings
+   */
+  start() {
+    this.events.push({ event: "nbpieces", nbpieces: this.options.numPieces });
+  }
+
+  /**
+   * Stop the current game
+   */
+  stop() {
+    this.playing = false;
+    if (this.options.onStop) this.options.onStop();
+    this.events.push({ event: "stop" });
+  }
+
+  /**
+   * Reset the puzzle to initial state
+   * Use this to start a new game with the same instance and container
+   * The puzzle will reload the current image and be ready for a new game
+   */
+  reset() {
+    this.events.push({ event: "reset" });
+    this.state = 0;
+    this.playing = false;
+    this.restoredState = null;
+    this.restoredString = "";
+  }
+
+  /**
+   * Save the current game state
+   * @param {Function} callback - Optional callback to receive saved data as JSON string
+   */
+  save(callback) {
+    if (callback) {
+      this.events.push({ event: "save", callback });
+    } 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);
+        }
+      }});
+    }
+  }
+
+  /**
+   * 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
+   * @param {string} imageUrl - URL or data URL of the image
+   */
+  setImage(imageUrl) {
+    this.options.image = imageUrl;
+    this.puzzle.imageLoaded = false;
+    this.puzzle.srcImage.src = imageUrl;
+    delete this.puzzle.srcImage.dataset.origin;
+  }
+
+  /**
+   * Update puzzle options
+   * @param {Object} newOptions - Options to update
+   */
+  setOptions(newOptions) {
+    Object.assign(this.options, newOptions);
+    if (newOptions.numPieces !== undefined) {
+      this.puzzle.nbPieces = newOptions.numPieces;
+    }
+    if (newOptions.allowRotation !== undefined) {
+      this.puzzle.rotationAllowed = newOptions.allowRotation;
+    }
+    if (newOptions.shapeType !== undefined) {
+      this.puzzle.typeOfShape = newOptions.shapeType;
+    }
+  }
+
+  /**
+   * Destroy the puzzle instance and clean up completely
+   * Use this when you want to remove the puzzle entirely and create a new one
+   * For reusing the same instance with a new game, use reset() instead
+   */
+  destroy() {
+    // Stop animation loop
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    
+    // Clear events
+    this.events = [];
+    this.playing = false;
+    
+    // Clear container (removes all puzzle elements)
+    if (this.puzzle && this.puzzle.container) {
+      this.puzzle.container.innerHTML = "";
+    }
+    
+    // Note: Event listeners are not removed because they're bound to the container
+    // If you need to completely remove listeners, you'd need to store references
+    // For most use cases, clearing innerHTML and stopping animation is sufficient
+  }
+}