@energy8platform/game-engine 0.22.0 → 0.24.0

package/dist/slot.cjs.js

@@ -454,22 +454,23 @@ class SpriteAnimation {
     }
 }
 
+const dims = (size) => typeof size === 'number' ? { width: size, height: size } : size;
 /** Built-in SymbolView: a static base sprite with optional idle/win spritesheet frames. */
 class AnimatedSymbol extends pixi_js.Container {
     _base;
     _anim = null;
     _textures;
-    _size;
+    _w = 0;
+    _h = 0;
     _fps;
     constructor(config) {
         super();
         this._textures = config.textures;
-        this._size = config.size;
         this._fps = config.fps ?? 24;
         this._base = new pixi_js.Sprite(config.textures.base);
         this._base.anchor.set(0.5);
         this.addChild(this._base);
-        this.resize(this._size);
+        this.resize(config.size);
     }
     setTextures(t) {
         this._textures = t;
@@ -477,12 +478,14 @@ class AnimatedSymbol extends pixi_js.Container {
         this.showStatic();
     }
     resize(size) {
-        this._size = size;
-        this._base.width = size;
-        this._base.height = size;
+        const { width, height } = dims(size);
+        this._w = width;
+        this._h = height;
+        this._base.width = width;
+        this._base.height = height;
         if (this._anim) {
-            this._anim.width = size;
-            this._anim.height = size;
+            this._anim.width = width;
+            this._anim.height = height;
         }
     }
     showStatic() {
@@ -512,8 +515,8 @@ class AnimatedSymbol extends pixi_js.Container {
         this._base.visible = false;
         const a = SpriteAnimation.create(frames, { loop, autoPlay: true, onComplete });
         a.anchor.set(0.5);
-        a.width = this._size;
-        a.height = this._size;
+        a.width = this._w;
+        a.height = this._h;
         a.animationSpeed = this._fps / 60;
         this.addChild(a);
         this._anim = a;
@@ -527,9 +530,11 @@ const DEFAULT_STYLE = {
     removed: { color: 0x223047, alpha: 0.12 },
     fresh: { color: 0xffffff, alpha: 0.6 },
 };
+const cellDims = (size) => typeof size === 'number' ? { width: size, height: size } : size;
 class SymbolCell extends pixi_js.Container {
     __uiComponent = true;
-    _size;
+    _w;
+    _h;
     _resolve;
     _style;
     _frame;
@@ -541,7 +546,9 @@ class SymbolCell extends pixi_js.Container {
     frameStyleKey = 'idle';
     constructor(config) {
         super();
-        this._size = config.size;
+        const { width, height } = cellDims(config.size);
+        this._w = width;
+        this._h = height;
         this._resolve = config.resolve;
         this._style = { ...DEFAULT_STYLE, ...(config.frameStyle ?? {}) };
         this._frame = new pixi_js.Graphics();
@@ -569,7 +576,7 @@ class SymbolCell extends pixi_js.Container {
             }
             const v = this._resolve(data.symbol);
             if (v) {
-                v.resize?.(this._size);
+                v.resize?.({ width: this._w, height: this._h });
                 this.addChildAt(v, 1); // above frame, below badges
                 this._view = v;
             }
@@ -610,7 +617,7 @@ class SymbolCell extends pixi_js.Container {
         const s = this._style[key];
         this._frame.clear();
         this._frame
-            .roundRect(-this._size / 2, -this._size / 2, this._size, this._size, this._style.radius)
+            .roundRect(-this._w / 2, -this._h / 2, this._w, this._h, this._style.radius)
             .fill({ color: s.color, alpha: s.alpha });
         // store the colour as tint for cheap inspection/testing
         this._frame.tint = s.color;
@@ -623,7 +630,7 @@ class SymbolCell extends pixi_js.Container {
         if (!value || value <= 1)
             return;
         this._multBadge = this._badge(`×${value}`, 0xffd24a);
-        this._multBadge.position.set(this._size / 2 - 12, -this._size / 2 + 12);
+        this._multBadge.position.set(this._w / 2 - 12, -this._h / 2 + 12);
         this._badges.addChild(this._multBadge);
     }
     _setBonus(value) {
@@ -634,7 +641,7 @@ class SymbolCell extends pixi_js.Container {
         if (!value || value <= 0)
             return;
         this._bonusBadge = this._badge(`+${value}`, 0x7ad7ff);
-        this._bonusBadge.position.set(-this._size / 2 + 12, -this._size / 2 + 12);
+        this._bonusBadge.position.set(-this._w / 2 + 12, -this._h / 2 + 12);
         this._badges.addChild(this._bonusBadge);
     }
     _badge(label, color) {
@@ -646,17 +653,110 @@ class SymbolCell extends pixi_js.Container {
     }
 }
 
+// packages/game-engine/src/slot/grid/geometry.ts
+//
+// Pure geometry resolver for the reel grid. Turns the (backward-compatible) grid config
+// — a square `cellSize` + single `gap`, optionally overridden by rectangular / per-strip
+// dimensions and per-strip gaps — into a fully-resolved, per-reel layout.
+//
+// Coordinate convention (unchanged from the original square grid):
+//   - `cellPosition` returns CELL-CENTRE coordinates.
+//   - Cell (0,0)'s centre sits at local x = 0. Reels extend to the right.
+//   - Variable-height reels are vertically CENTRED about a shared centre line, so the
+//     tallest reel's row 0 sits at y = 0 (matching the old Megaways behaviour).
+//
+// See docs/reels-analysis-and-design.md §6.
+const perReelSize = (spec, w, h) => {
+    if (typeof spec === 'number')
+        return [spec, spec];
+    if (spec && typeof spec === 'object')
+        return [spec.width, spec.height];
+    return [w, h];
+};
+const gapAt = (g, i, base) => Array.isArray(g) ? (g[i] ?? base) : (g ?? base);
+/** Resolve a grid config into a fully-populated per-reel geometry. */
+function resolveGeometry(g) {
+    const cols = Math.max(0, g.cols);
+    const rowsPerReel = g.rowsPerReel && g.rowsPerReel.length === cols
+        ? g.rowsPerReel.slice()
+        : Array.from({ length: cols }, () => g.rows);
+    const maxRows = cols ? Math.max(1, ...rowsPerReel) : 0;
+    const baseW = g.cellWidth ?? g.cellSize;
+    const baseH = g.cellHeight ?? g.cellSize;
+    const baseGap = g.gap ?? 0;
+    const cellW = [];
+    const cellH = [];
+    const rowGap = [];
+    for (let c = 0; c < cols; c++) {
+        const [w, h] = perReelSize(g.cellSizePerReel?.[c], baseW, baseH);
+        cellW[c] = w;
+        cellH[c] = h;
+        rowGap[c] = gapAt(g.rowGap, c, baseGap);
+    }
+    const colGap = [];
+    for (let i = 0; i < Math.max(0, cols - 1); i++)
+        colGap[i] = gapAt(g.colGap, i, baseGap);
+    // Horizontal: reel 0 centre at x = 0, then accumulate half-widths + between-reel gaps.
+    const colX = [];
+    if (cols)
+        colX[0] = 0;
+    for (let c = 1; c < cols; c++)
+        colX[c] = colX[c - 1] + cellW[c - 1] / 2 + colGap[c - 1] + cellW[c] / 2;
+    // Vertical: each reel's rows span (rows-1)*step; centre every reel about a shared line so
+    // the tallest reel's row 0 stays at y = 0 (parity with the old uniform Megaways layout).
+    const span = rowsPerReel.map((rr, c) => Math.max(0, rr - 1) * (cellH[c] + rowGap[c]));
+    const halfMaxSpan = cols ? Math.max(...span) / 2 : 0;
+    const yOff = span.map((s) => halfMaxSpan - s / 2);
+    // Bounding box.
+    let leftX = 0;
+    let rightX = 0;
+    let topY = 0;
+    let bottomY = 0;
+    for (let c = 0; c < cols; c++) {
+        leftX = Math.min(leftX, colX[c] - cellW[c] / 2);
+        rightX = Math.max(rightX, colX[c] + cellW[c] / 2);
+        const reelTop = yOff[c] - cellH[c] / 2;
+        topY = Math.min(topY, reelTop);
+        bottomY = Math.max(bottomY, reelTop + rowsPerReel[c] * cellH[c] + Math.max(0, rowsPerReel[c] - 1) * rowGap[c]);
+    }
+    const gridW = rightX - leftX;
+    const gridH = bottomY - topY;
+    return {
+        cols,
+        rowsPerReel,
+        maxRows,
+        cellW,
+        cellH,
+        rowGap,
+        colGap,
+        colX,
+        yOff,
+        gridW,
+        gridH,
+        centerX: (leftX + rightX) / 2,
+        centerY: (topY + bottomY) / 2,
+        leftX,
+        topY,
+    };
+}
+/** Cell-centre position from a resolved geometry. */
+function cellPositionOf(geom, col, row) {
+    return {
+        x: geom.colX[col] ?? 0,
+        y: (geom.yOff[col] ?? 0) + row * ((geom.cellH[col] ?? 0) + (geom.rowGap[col] ?? 0)),
+    };
+}
+
 /**
- * A grid of `SymbolCell`s. Supports uniform grids and variable-height reels (Megaways):
- * when `rowsPerReel` is set each reel is vertically centred inside the tallest reel's envelope.
+ * A grid of `SymbolCell`s. Supports uniform grids, variable-height reels (Megaways), and
+ * rectangular / per-strip cell sizes with per-strip gaps. All layout flows through a single
+ * resolved geometry (see grid/geometry.ts); every consumer reads positions via `cellPosition`
+ * and dimensions via `cellSize(col)` rather than assuming a square cell.
  */
 class ReelGrid extends pixi_js.Container {
     __uiComponent = true;
-    _cols;
-    _rowsPerReel;
-    _maxRows;
-    _cellSize;
-    _gap;
+    _cfg;
+    _geom;
     _cells = [];
     _cellLayer = new pixi_js.Container();
     _resolve;
@@ -664,39 +764,35 @@ class ReelGrid extends pixi_js.Container {
     _mask = null;
     constructor(config) {
         super();
-        this._cols = config.cols;
-        this._rowsPerReel =
-            config.rowsPerReel && config.rowsPerReel.length === config.cols
-                ? config.rowsPerReel.slice()
-                : Array.from({ length: config.cols }, () => config.rows);
-        this._maxRows = Math.max(1, ...this._rowsPerReel);
-        this._cellSize = config.cellSize;
-        this._gap = config.gap ?? 0;
+        this._cfg = { ...config };
         this._resolve = config.resolve;
         this._frameStyle = config.frameStyle;
-        if (config.decoration) {
+        this._geom = resolveGeometry(config);
+        if (config.decoration?.texture) {
             const pad = config.decoration.padding ?? 0;
-            const w = this._cols * (this._cellSize + this._gap) - this._gap + pad * 2;
-            const h = this._maxRows * (this._cellSize + this._gap) - this._gap + pad * 2;
-            if (config.decoration.texture) {
-                const deco = new pixi_js.Sprite(config.decoration.texture);
-                deco.width = w;
-                deco.height = h;
-                deco.position.set(-pad - this._cellSize / 2, -pad - this._cellSize / 2);
-                this.addChild(deco);
-            }
+            const deco = new pixi_js.Sprite(config.decoration.texture);
+            deco.width = this._geom.gridW + pad * 2;
+            deco.height = this._geom.gridH + pad * 2;
+            deco.position.set(this._geom.leftX - pad, this._geom.topY - pad);
+            this.addChild(deco);
         }
         this.addChild(this._cellLayer);
         this._buildCells();
         if (config.mask)
             this._applyMask();
     }
+    get _cols() {
+        return this._geom.cols;
+    }
+    get _rowsPerReel() {
+        return this._geom.rowsPerReel;
+    }
     _buildCells() {
         for (let c = 0; c < this._cols; c++) {
             this._cells[c] = [];
             for (let r = 0; r < this._rowsPerReel[c]; r++) {
                 const cell = new SymbolCell({
-                    size: this._cellSize,
+                    size: this.cellSize(c),
                     resolve: this._resolve,
                     frameStyle: this._frameStyle,
                 });
@@ -707,10 +803,19 @@ class ReelGrid extends pixi_js.Container {
             }
         }
     }
+    /** Per-strip mask: one window per reel sized to that reel's own cell width × column height. */
     _applyMask() {
-        const w = this._cols * (this._cellSize + this._gap) - this._gap;
-        const h = this._maxRows * (this._cellSize + this._gap) - this._gap;
-        const m = new pixi_js.Graphics().rect(-this._cellSize / 2, -this._cellSize / 2, w, h).fill(0xffffff);
+        const g = this._geom;
+        const m = new pixi_js.Graphics();
+        for (let c = 0; c < this._cols; c++) {
+            const rows = this._rowsPerReel[c];
+            const w = g.cellW[c];
+            const h = rows * g.cellH[c] + Math.max(0, rows - 1) * g.rowGap[c];
+            const x = g.colX[c] - w / 2;
+            const y = g.yOff[c] - g.cellH[c] / 2;
+            m.rect(x, y, w, h);
+        }
+        m.fill(0xffffff);
         this._cellLayer.mask = m;
         this.addChild(m);
         this._mask = m;
@@ -720,10 +825,15 @@ class ReelGrid extends pixi_js.Container {
     }
     /** Tallest reel's row count (the grid's visual height in rows). */
     get rows() {
-        return this._maxRows;
+        return this._geom.maxRows;
+    }
+    /** Cell dimensions (px) for a reel. Rectangular / per-strip aware. */
+    cellSize(col) {
+        return { width: this._geom.cellW[col] ?? 0, height: this._geom.cellH[col] ?? 0 };
     }
-    get cellSize() {
-        return this._cellSize;
+    /** The fully-resolved grid geometry (read-only view). */
+    get geometry() {
+        return this._geom;
     }
     rowsOf(col) {
         return this._rowsPerReel[col] ?? 0;
@@ -731,12 +841,13 @@ class ReelGrid extends pixi_js.Container {
     get rowsPerReel() {
         return this._rowsPerReel.slice();
     }
-    /** Cell centre position. Variable-height reels are centred in the max-rows envelope. */
+    /** Cell centre position. Variable-height reels are centred about a shared centre line. */
     cellPosition(col, row) {
-        const step = this._cellSize + this._gap;
-        const reelRows = this._rowsPerReel[col] ?? this._maxRows;
-        const yOffset = ((this._maxRows - reelRows) / 2) * step;
-        return { x: col * step, y: yOffset + row * step };
+        return cellPositionOf(this._geom, col, row);
+    }
+    /** Grid bounding-box centre in local coords. */
+    center() {
+        return { x: this._geom.centerX, y: this._geom.centerY };
     }
     getCell(col, row) {
         return this._cells[col][row];
@@ -754,8 +865,8 @@ class ReelGrid extends pixi_js.Container {
             return;
         this._cellLayer.removeChildren().forEach((c) => c.destroy());
         this._cells = [];
-        this._rowsPerReel = rowsPerReel.slice();
-        this._maxRows = Math.max(1, ...this._rowsPerReel);
+        this._cfg = { ...this._cfg, rowsPerReel: rowsPerReel.slice() };
+        this._geom = resolveGeometry(this._cfg);
         this._buildCells();
         if (this._mask) {
             this._mask.destroy();
@@ -764,8 +875,19 @@ class ReelGrid extends pixi_js.Container {
             this._applyMask();
         }
     }
-    resize(cellSize) {
-        this._cellSize = cellSize;
+    /**
+     * Re-resolve geometry after a base cell-size change and reposition cells. Accepts a square
+     * scalar (updates `cellSize`) or explicit `{width,height}`. Per-strip overrides still apply.
+     * (Cell frames are not re-drawn here — a geometry change routes through a full rebuild upstream.)
+     */
+    resize(size) {
+        if (typeof size === 'number') {
+            this._cfg = { ...this._cfg, cellSize: size, cellWidth: undefined, cellHeight: undefined };
+        }
+        else {
+            this._cfg = { ...this._cfg, cellWidth: size.width, cellHeight: size.height };
+        }
+        this._geom = resolveGeometry(this._cfg);
         for (let c = 0; c < this._cols; c++) {
             for (let r = 0; r < this._rowsPerReel[c]; r++) {
                 const { x, y } = this.cellPosition(c, r);
@@ -1138,6 +1260,10 @@ function effectiveRowsPerReel(grid) {
         return grid.rowsPerReel.slice();
     return Array.from({ length: grid.cols }, () => grid.rows);
 }
+/** Resolve a `GridConfig` into a fully-populated per-reel geometry (rectangular / per-strip aware). */
+function resolveGridGeometry(grid) {
+    return resolveGeometry(grid);
+}
 /** Total ways-to-win for a ways/megaways grid (product of per-reel heights). */
 function waysCount(grid) {
     return effectiveRowsPerReel(grid).reduce((a, b) => a * b, 1);
@@ -1497,7 +1623,7 @@ class SpinEngine {
         tape.x = base.x;
         const landingStart = tapeLen - rows;
         for (let i = 0; i < tapeLen; i++) {
-            const cell = new SymbolCell({ size: this._grid.cellSize, resolve: this._resolve });
+            const cell = new SymbolCell({ size: this._grid.cellSize(p.reel), resolve: this._resolve });
             const sym = i >= landingStart
                 ? (p.landing[i - landingStart]?.symbol ?? null)
                 : (pool[i % pool.length] ?? null);
@@ -1822,8 +1948,10 @@ class TumbleController {
             cell.alpha = 1;
         }
         this._undim();
-        // 3. gravity: survivors slide down, new cells drop from above
-        const rowStep = this._grid.cellPosition(0, 1).y - this._grid.cellPosition(0, 0).y;
+        // 3. gravity: survivors slide down, new cells drop from above (per-reel row step)
+        const rowStepOf = (col) => this._grid.rowsOf(col) > 1
+            ? this._grid.cellPosition(col, 1).y - this._grid.cellPosition(col, 0).y
+            : this._grid.cellSize(col).height;
         const slides = this._cfg.gravity ? (step.drops ?? this.deriveDrops(step)) : [];
         const anims = [];
         for (const d of slides) {
@@ -1843,7 +1971,7 @@ class TumbleController {
             cell.setState({ fresh: true });
             cell.alpha = 1;
             cell.scale.set(1);
-            cell.position.set(home.x, home.y - rowStep * (this._grid.rowsOf(n.col) + 1));
+            cell.position.set(home.x, home.y - rowStepOf(n.col) * (this._grid.rowsOf(n.col) + 1));
             const idx = (perCol[n.col] = (perCol[n.col] ?? 0) + 1);
             anims.push((async () => {
                 await Tween.delay(idx * 28 * f);
@@ -1907,17 +2035,26 @@ class TumbleController {
 function cellCenter(grid, col, row) {
     return grid.cellPosition(col, row);
 }
-function rowStepOf(grid) {
-    return grid.cellPosition(0, 1).y - grid.cellPosition(0, 0).y;
+/** Vertical row-to-row step for a reel (falls back to the reel's cell height for 1-row reels). */
+function rowStepOf(grid, col = 0) {
+    if (grid.rowsOf(col) > 1)
+        return grid.cellPosition(col, 1).y - grid.cellPosition(col, 0).y;
+    return grid.cellSize(col).height;
+}
+/** Horizontal reel-to-reel step at a boundary (falls back to the reel's cell width for 1-col grids). */
+function colStepOf(grid, col = 0) {
+    if (col + 1 < grid.cols)
+        return grid.cellPosition(col + 1, 0).x - grid.cellPosition(col, 0).x;
+    return grid.cellSize(col).width;
 }
 /** A glowing ring drawn around a cell. Returns a disposer. */
 function glowRing(fx, grid, col, row, color) {
     if (fx.destroyed)
         return () => { };
     const { x, y } = cellCenter(grid, col, row);
-    const s = grid.cellSize;
+    const { width, height } = grid.cellSize(col);
     const g = new pixi_js.Graphics()
-        .roundRect(x - s / 2, y - s / 2, s, s, 10)
+        .roundRect(x - width / 2, y - height / 2, width, height, 10)
         .stroke({ color, width: 3, alpha: 0.9 });
     fx.addChild(g);
     return () => g.destroy();
@@ -1960,7 +2097,7 @@ async function dropCell(grid, cell, col, row, ms = 280) {
     if (cell.destroyed)
         return;
     const home = grid.cellPosition(col, row);
-    cell.position.set(home.x, home.y - rowStepOf(grid) * (row + 2));
+    cell.position.set(home.x, home.y - rowStepOf(grid, col) * (row + 2));
     cell.alpha = 1;
     cell.scale.set(1);
     await Tween.to(cell, { 'position.y': home.y }, ms, easingByName('easeOutBounce'));
@@ -2025,7 +2162,7 @@ const StickySymbols = {
             glowRing(ctx.fx, ctx.grid, p.col, p.row, f.ringColor);
             await pulseCell(cell, 1.2, 260);
             const { x, y } = cellCenter(ctx.grid, p.col, p.row);
-            await floatLabel(ctx.fx, x, y - ctx.grid.cellSize / 2, f.durationSpins ? `STICKY ${f.durationSpins}` : 'STICKY', f.ringColor, 600 + i * 50);
+            await floatLabel(ctx.fx, x, y - ctx.grid.cellSize(p.col).height / 2, f.durationSpins ? `STICKY ${f.durationSpins}` : 'STICKY', f.ringColor, 600 + i * 50);
         }));
     },
 };
@@ -2166,14 +2303,15 @@ const GiantSymbol = {
         const view = ctx.resolve(sym);
         if (!view)
             return;
-        const step = rowStepOf(ctx.grid);
+        const cs = ctx.grid.cellSize(anchorCol);
+        const stepX = colStepOf(ctx.grid, anchorCol);
+        const step = rowStepOf(ctx.grid, anchorCol);
         const tl = cellCenter(ctx.grid, anchorCol, 0);
         const giant = new pixi_js.Container();
         giant.addChild(view);
-        view.resize?.(ctx.grid.cellSize * Math.max(w, h));
-        if (view.scale)
-            view.scale.set(((ctx.grid.cellSize * w) / (ctx.grid.cellSize * Math.max(w, h))) * view.scale.x, ((ctx.grid.cellSize * h) / (ctx.grid.cellSize * Math.max(w, h))) * view.scale.y);
-        giant.position.set(tl.x + ((w - 1) * step) / 2, tl.y + ((h - 1) * step) / 2);
+        // span w×h cells (footprint ignores gaps, matching the previous single-cell unit)
+        view.resize?.({ width: cs.width * w, height: cs.height * h });
+        giant.position.set(tl.x + ((w - 1) * stepX) / 2, tl.y + ((h - 1) * step) / 2);
         // hide covered cells
         for (let c = anchorCol; c < anchorCol + w; c++)
             for (let r = 0; r < h; r++)
@@ -2205,8 +2343,9 @@ const SplitSymbol = {
         await Promise.all(left.map(async (p, i) => {
             await Tween.delay((i % 6) * 30);
             const { x, y } = cellCenter(ctx.grid, p.col, p.row);
+            const cs = ctx.grid.cellSize(p.col);
             await pulseCell(ctx.grid.getCell(p.col, p.row), 1.12, 200);
-            await floatLabel(ctx.fx, x + ctx.grid.cellSize / 3, y - ctx.grid.cellSize / 3, `×${f.factor}`, 0x9b5cff, 600);
+            await floatLabel(ctx.fx, x + cs.width / 3, y - cs.height / 3, `×${f.factor}`, 0x9b5cff, 600);
         }));
     },
 };
@@ -2259,8 +2398,7 @@ const MultiplierSymbols = {
             const { x, y } = cellCenter(ctx.grid, p.col, p.row);
             await floatLabel(ctx.fx, x, y, `×${values[spots.indexOf(p)]}`, 0xffd24a, 500);
         }));
-        const cx = (ctx.grid.cols * ctx.grid.cellSize) / 2 - ctx.grid.cellSize / 2;
-        const cy = (ctx.grid.rows * ctx.grid.cellSize) / 2 - ctx.grid.cellSize / 2;
+        const { x: cx, y: cy } = ctx.grid.center();
         await floatLabel(ctx.fx, cx, cy, `×${capped}`, 0xffe24a, 900);
     },
 };
@@ -2466,7 +2604,12 @@ function createReelSystem(opts) {
             rows: config.grid.rows,
             rowsPerReel: config.grid.rowsPerReel ?? effectiveRowsPerReel(config.grid),
             cellSize: config.grid.cellSize,
+            cellWidth: config.grid.cellWidth,
+            cellHeight: config.grid.cellHeight,
+            cellSizePerReel: config.grid.cellSizePerReel,
             gap: config.grid.gap,
+            colGap: config.grid.colGap,
+            rowGap: config.grid.rowGap,
             resolve,
             frameStyle: config.grid.frameStyle,
             mask: config.grid.mask,
@@ -2487,8 +2630,13 @@ function createReelSystem(opts) {
         return (a.cols !== b.cols ||
             a.rows !== b.rows ||
             a.cellSize !== b.cellSize ||
+            a.cellWidth !== b.cellWidth ||
+            a.cellHeight !== b.cellHeight ||
             a.gap !== b.gap ||
             a.mask !== b.mask ||
+            JSON.stringify(a.cellSizePerReel) !== JSON.stringify(b.cellSizePerReel) ||
+            JSON.stringify(a.colGap) !== JSON.stringify(b.colGap) ||
+            JSON.stringify(a.rowGap) !== JSON.stringify(b.rowGap) ||
             JSON.stringify(a.rowsPerReel) !== JSON.stringify(b.rowsPerReel) ||
             (a.decoration?.padding ?? 0) !== (b.decoration?.padding ?? 0));
     }
@@ -2797,11 +2945,14 @@ exports.ReelSpinController = ReelSpinController;
 exports.SpinEngine = SpinEngine;
 exports.SymbolCell = SymbolCell;
 exports.TumbleController = TumbleController;
+exports.cellPositionOf = cellPositionOf;
 exports.createReelSystem = createReelSystem;
 exports.easingByName = easingByName;
 exports.effectiveRowsPerReel = effectiveRowsPerReel;
 exports.mergeReelConfig = mergeReelConfig;
 exports.pickTier = pickTier;
+exports.resolveGeometry = resolveGeometry;
+exports.resolveGridGeometry = resolveGridGeometry;
 exports.resolveReelConfig = resolveReelConfig;
 exports.tierIndexAtValue = tierIndexAtValue;
 exports.valueAt = valueAt;