jigsawpuzzlegame 1.0.6 → 1.0.8

package/jigsaw-puzzle-game.js

@@ -1,1961 +1,1999 @@
-"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;
-    this.rotationDegrees = 0; // Cumulative rotation in degrees for smooth animation
-  }
-
-  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(${this.rotationDegrees}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) {
-    // Calculate the change in rotation
-    const oldRot = this.rot;
-    this.rot = angle;
-    
-    // Always rotate forward (add 90 degrees for each increment)
-    // If we're wrapping from 3 to 0, we need to go 270->360 instead of 270->0
-    if (this.rot === 0 && oldRot === 3) {
-      // Going from 270° (rot=3) to 0° (rot=0), add 90° to go to 360°
-      this.rotationDegrees += 90;
-    } else {
-      // Normal case: calculate the difference and add it
-      const diff = this.rot - oldRot;
-      this.rotationDegrees += diff * 90;
-    }
-  }
-
-  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);
-          pp.rotationDegrees = pp.rot * 90;
-        });
-    } 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;
-        polyp.rotationDegrees = polyp.rot * 90;
-        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
-  }
+"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;
+    this.rotationDegrees = 0; // Cumulative rotation in degrees for smooth animation
+  }
+
+  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(${this.rotationDegrees}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) {
+    // Calculate the change in rotation
+    const oldRot = this.rot;
+    this.rot = angle;
+    
+    // Always rotate forward (add 90 degrees for each increment)
+    // If we're wrapping from 3 to 0, we need to go 270->360 instead of 270->0
+    if (this.rot === 0 && oldRot === 3) {
+      // Going from 270° (rot=3) to 0° (rot=0), add 90° to go to 360°
+      this.rotationDegrees += 90;
+    } else {
+      // Normal case: calculate the difference and add it
+      const diff = this.rot - oldRot;
+      this.rotationDegrees += diff * 90;
+    }
+  }
+
+  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);
+          pp.rotationDegrees = pp.rot * 90;
+        });
+    } 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;
+        polyp.rotationDegrees = polyp.rot * 90;
+        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
+
+// ============================================================================
+// CSS Injection - Library Styles
+// ============================================================================
+
+/**
+ * Injects the required CSS styles for the puzzle library
+ * This ensures the library is self-contained and doesn't require external CSS
+ */
+function injectPuzzleStyles() {
+  // Check if styles have already been injected
+  if (document.getElementById('jigsaw-puzzle-styles')) {
+    return;
+  }
+
+  const style = document.createElement('style');
+  style.id = 'jigsaw-puzzle-styles';
+  style.textContent = `
+    /* Jigsaw Puzzle Library Styles */
+    .polypiece {
+      position: absolute;
+      cursor: move;
+      transition: transform 0.1s ease-out;
+    }
+
+    .polypiece.moving {
+      transition: left 1s ease-out, top 1s ease-out;
+    }
+
+    .gameCanvas {
+      position: absolute;
+      pointer-events: none;
+    }
+  `;
+  
+  document.head.appendChild(style);
+}
+
+// Inject styles when module loads
+injectPuzzleStyles();
+
+// ============================================================================
+// 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 (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
+    * @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" });
+    });
+
+    // 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
+    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 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 === "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 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) {
+    // 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) {
+      callback(savedString);
+    } else {
+      try {
+        localStorage.setItem("savepuzzle", savedString);
+      } catch (exception) {
+        console.error("Failed to save to localStorage:", exception);
+      }
+    }
+  }
+
+
+  /**
+   * 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
+  }
 }