@energy8platform/game-engine 0.23.0 → 0.25.0

package/src/slot/devtools/fieldSchema.ts

@@ -0,0 +1,190 @@
+// packages/game-engine/src/slot/devtools/fieldSchema.ts
+//
+// Declarative description of the reel-config control panel. Each control binds to a
+// dot-path in the ReelSystemConfig. Pure data — no pixi, no DOM — so it bundles into
+// the self-contained panel client served by the harness.
+//
+// NOTE: board shape (grid.cols / grid.rows / rowsPerReel) is intentionally OMITTED.
+// The board shape is math-tied (paylines / ways / book geometry) and must not be
+// tuned live from the harness. Everything else — cosmetic geometry, motion,
+// anticipation, cascade, win presentation and features — is tunable.
+
+export type Control =
+  | { kind: 'select'; path: string; label: string; options: string[] }
+  | {
+      kind: 'range';
+      path: string;
+      label: string;
+      min: number;
+      max: number;
+      step: number;
+      /** When the bound value is unset (undefined / non-scalar), show this path's value instead. */
+      fallback?: string;
+    }
+  | { kind: 'toggle'; path: string; label: string }
+  | { kind: 'color'; path: string; label: string };
+
+export interface Section {
+  title: string;
+  controls: Control[];
+  collapsed?: boolean;
+}
+
+const EASINGS = [
+  'linear',
+  'easeOutQuad',
+  'easeOutCubic',
+  'easeOutBack',
+  'easeOutBounce',
+  'easeInBack',
+  'easeOutElastic',
+  'easeInOutSine',
+  'easeInOutQuad',
+];
+
+/** The editable reel-config fields, grouped into collapsible sections. */
+export const REEL_FIELD_SCHEMA: Section[] = [
+  {
+    title: 'Cell geometry',
+    controls: [
+      { kind: 'range', path: 'grid.cellSize', label: 'Cell size', min: 40, max: 120, step: 1 },
+      { kind: 'range', path: 'grid.gap', label: 'Gap', min: 0, max: 16, step: 1 },
+      {
+        kind: 'select',
+        path: 'grid.evaluation',
+        label: 'Evaluation',
+        options: ['lines', 'ways', 'anywhere', 'cluster', 'megaways', 'infinity'],
+      },
+      { kind: 'toggle', path: 'grid.mask', label: 'Mask reels' },
+      {
+        kind: 'range',
+        path: 'grid.cellWidth',
+        label: 'Cell width',
+        min: 40,
+        max: 160,
+        step: 1,
+        fallback: 'grid.cellSize',
+      },
+      {
+        kind: 'range',
+        path: 'grid.cellHeight',
+        label: 'Cell height',
+        min: 40,
+        max: 160,
+        step: 1,
+        fallback: 'grid.cellSize',
+      },
+      {
+        kind: 'range',
+        path: 'grid.colGap',
+        label: 'Column gap',
+        min: 0,
+        max: 40,
+        step: 1,
+        fallback: 'grid.gap',
+      },
+      {
+        kind: 'range',
+        path: 'grid.rowGap',
+        label: 'Row gap',
+        min: 0,
+        max: 40,
+        step: 1,
+        fallback: 'grid.gap',
+      },
+    ],
+  },
+  {
+    title: 'Motion',
+    controls: [
+      { kind: 'select', path: 'motion.style', label: 'Style', options: ['swap', 'strip', 'cascade-drop'] },
+      { kind: 'range', path: 'motion.spinUp', label: 'Spin-up (ms)', min: 100, max: 2500, step: 10 },
+      { kind: 'range', path: 'motion.hold', label: 'Hold (ms)', min: 0, max: 800, step: 10 },
+      { kind: 'range', path: 'motion.stopStagger', label: 'Stop stagger (ms)', min: 0, max: 400, step: 5 },
+      { kind: 'select', path: 'motion.stopMode', label: 'Stop mode', options: ['sequential', 'sync', 'random'] },
+      { kind: 'select', path: 'motion.stopOrder', label: 'Stop order', options: ['ltr', 'rtl'] },
+      { kind: 'range', path: 'motion.settle.amp', label: 'Settle amp (px)', min: 0, max: 24, step: 1 },
+      { kind: 'range', path: 'motion.settle.ms', label: 'Settle (ms)', min: 60, max: 500, step: 10 },
+      { kind: 'select', path: 'motion.settle.easing', label: 'Settle easing', options: EASINGS },
+      { kind: 'toggle', path: 'motion.squash.enabled', label: 'Squash on land' },
+      { kind: 'range', path: 'motion.squash.scaleX', label: 'Squash X', min: 1, max: 1.5, step: 0.01 },
+      { kind: 'range', path: 'motion.squash.scaleY', label: 'Squash Y', min: 0.5, max: 1, step: 0.01 },
+      { kind: 'toggle', path: 'motion.blur.enabled', label: 'Motion blur' },
+      { kind: 'range', path: 'motion.blur.alpha', label: 'Blur alpha', min: 0.3, max: 1, step: 0.01 },
+      { kind: 'range', path: 'motion.blur.strength', label: 'Blur strength', min: 0, max: 16, step: 1 },
+      { kind: 'toggle', path: 'motion.blur.streaks', label: 'Blur streaks' },
+      { kind: 'range', path: 'motion.turboFactor', label: 'Turbo factor', min: 0.2, max: 1, step: 0.05 },
+      { kind: 'select', path: 'motion.intensity', label: 'Intensity', options: ['full', 'reduced', 'minimal'] },
+      { kind: 'toggle', path: 'motion.slamStop', label: 'Slam stop' },
+      { kind: 'range', path: 'motion.symbolsPerReel', label: 'Tape length', min: 3, max: 24, step: 1 },
+    ],
+  },
+  {
+    title: 'Anticipation',
+    controls: [
+      { kind: 'toggle', path: 'anticipation.enabled', label: 'Enabled' },
+      { kind: 'range', path: 'anticipation.threshold', label: 'Threshold (N−1)', min: 1, max: 6, step: 1 },
+      { kind: 'range', path: 'anticipation.slowdownFactor', label: 'Slowdown', min: 0.1, max: 1, step: 0.05 },
+      { kind: 'range', path: 'anticipation.holdMs', label: 'Hold (ms)', min: 0, max: 1200, step: 50 },
+      { kind: 'toggle', path: 'anticipation.zoom.enabled', label: 'Reel zoom' },
+      { kind: 'range', path: 'anticipation.zoom.scale', label: 'Zoom scale', min: 1, max: 1.6, step: 0.05 },
+      { kind: 'range', path: 'anticipation.zoom.ms', label: 'Zoom (ms)', min: 200, max: 1200, step: 50 },
+    ],
+  },
+  {
+    title: 'Cascade / Tumble',
+    controls: [
+      { kind: 'toggle', path: 'cascade.enabled', label: 'Enabled' },
+      { kind: 'toggle', path: 'cascade.gravity', label: 'Gravity (survivors slide)' },
+      { kind: 'toggle', path: 'cascade.dimNonWinners', label: 'Dim non-winners' },
+      { kind: 'range', path: 'cascade.dimAlpha', label: 'Dim alpha', min: 0.1, max: 1, step: 0.05 },
+      { kind: 'range', path: 'cascade.perStepDecel', label: 'Per-step decel', min: 0, max: 0.4, step: 0.01 },
+      { kind: 'range', path: 'cascade.perStepDecelCap', label: 'Decel cap', min: 1, max: 3, step: 0.1 },
+      { kind: 'range', path: 'cascade.timings.remove', label: 'Remove (ms)', min: 80, max: 600, step: 10 },
+      { kind: 'range', path: 'cascade.timings.drop', label: 'Drop (ms)', min: 80, max: 600, step: 10 },
+      { kind: 'select', path: 'cascade.easings.drop', label: 'Drop easing', options: EASINGS },
+      { kind: 'toggle', path: 'cascade.multiplier.enabled', label: 'Win multiplier' },
+      { kind: 'select', path: 'cascade.multiplier.mode', label: 'Multiplier mode', options: ['add', 'mul'] },
+      { kind: 'range', path: 'cascade.multiplier.step', label: 'Multiplier step', min: 1, max: 5, step: 1 },
+    ],
+  },
+  {
+    title: 'Win presentation',
+    controls: [
+      { kind: 'range', path: 'win.highlightScale', label: 'Highlight scale', min: 1, max: 1.4, step: 0.01 },
+      { kind: 'toggle', path: 'win.glow', label: 'Glow' },
+      { kind: 'toggle', path: 'win.frameShake.enabled', label: 'Frame shake' },
+      { kind: 'range', path: 'win.frameShake.amp', label: 'Shake amp', min: 0, max: 10, step: 0.5 },
+    ],
+  },
+  {
+    title: 'Features',
+    controls: [
+      { kind: 'toggle', path: 'features.expandingWild.enabled', label: 'Expanding wild' },
+      { kind: 'toggle', path: 'features.expandingWild.toFullReel', label: '· to full reel' },
+      { kind: 'toggle', path: 'features.sticky.enabled', label: 'Sticky symbols' },
+      { kind: 'range', path: 'features.sticky.durationSpins', label: '· duration spins', min: 0, max: 6, step: 1 },
+      { kind: 'toggle', path: 'features.walkingWild.enabled', label: 'Walking wild' },
+      { kind: 'select', path: 'features.walkingWild.direction', label: '· direction', options: ['left', 'right'] },
+      { kind: 'toggle', path: 'features.randomWild.enabled', label: 'Random wild inject' },
+      { kind: 'toggle', path: 'features.randomWild.sticky', label: '· sticky' },
+      { kind: 'toggle', path: 'features.mystery.enabled', label: 'Mystery symbols' },
+      { kind: 'toggle', path: 'features.transform.enabled', label: 'Transform / upgrade' },
+      { kind: 'toggle', path: 'features.transform.upgradeOnly', label: '· upgrade only' },
+      { kind: 'toggle', path: 'features.giant.enabled', label: 'Giant symbol' },
+      { kind: 'range', path: 'features.giant.width', label: '· width', min: 1, max: 5, step: 1 },
+      { kind: 'range', path: 'features.giant.height', label: '· height', min: 1, max: 5, step: 1 },
+      { kind: 'toggle', path: 'features.split.enabled', label: 'Split (xSplit)' },
+      { kind: 'range', path: 'features.split.factor', label: '· factor', min: 2, max: 4, step: 1 },
+      { kind: 'toggle', path: 'features.stacked.enabled', label: 'Stacked symbols' },
+      { kind: 'range', path: 'features.stacked.height', label: '· stack height', min: 2, max: 7, step: 1 },
+      { kind: 'toggle', path: 'features.nudge.enabled', label: 'Nudge / xNudge' },
+      { kind: 'toggle', path: 'features.nudge.toFullReel', label: '· xNudge fill' },
+      { kind: 'toggle', path: 'features.multiplier.enabled', label: 'Multiplier symbols' },
+      { kind: 'select', path: 'features.multiplier.combine', label: '· combine', options: ['additive', 'multiplicative'] },
+      { kind: 'toggle', path: 'features.holdAndSpin.enabled', label: 'Hold & Spin' },
+      { kind: 'range', path: 'features.holdAndSpin.respinsAwarded', label: '· respins', min: 1, max: 5, step: 1 },
+      { kind: 'toggle', path: 'features.reelModifier.enabled', label: 'Reel modifier' },
+    ],
+  },
+];

package/src/slot/devtools/index.ts

@@ -0,0 +1,31 @@
+// packages/game-engine/src/slot/devtools/index.ts
+//
+// Browser-facing reel devtools: the game-side bridge plus the shared control-panel /
+// diff builders (reused by the reel-lab playground). Pixi-free.
+
+export { mountReelDevBridge } from './reelDevBridge';
+export type {
+  ReelDevBridge,
+  ReelDevBridgeOptions,
+  ReelDevBridgeTarget,
+} from './reelDevBridge';
+
+export { buildControlPanel, getPath, setPath } from './controlPanel';
+export type { ControlPanelOptions } from './controlPanel';
+
+export { REEL_FIELD_SCHEMA } from './fieldSchema';
+export type { Control, Section } from './fieldSchema';
+
+export { configDiff, diffFromDefaults, emitReelConfigTs } from './configDiff';
+
+export {
+  REEL_READY,
+  REEL_APPLY,
+  REEL_REQUEST,
+} from './protocol';
+export type {
+  ReelDevMessage,
+  ReelReadyMessage,
+  ReelApplyMessage,
+  ReelRequestMessage,
+} from './protocol';

package/src/slot/devtools/panelClient.ts

@@ -0,0 +1,113 @@
+// packages/game-engine/src/slot/devtools/panelClient.ts
+//
+// The harness "Reels" sidebar panel client. Built as a SELF-CONTAINED browser ESM
+// (dist/reel-panel-client.js) and served by the harness at /__harness/panel/reels.js.
+// Default-exports the HarnessPanelMount the core client calls.
+//
+// It seeds its controls from the running game's config (received over the bus), applies
+// every edit LIVE (posts a patch → the game's reel bridge calls system.update), and
+// offers a "Copy config" button that emits the paste-ready overrides snippet.
+
+import type { HarnessPanelMount } from '@energy8platform/harness/panel';
+import type { ReelSystemConfig } from '../config/ReelSystemConfig';
+import { buildControlPanel } from './controlPanel';
+import { emitReelConfigTs } from './configDiff';
+import { REEL_APPLY, REEL_READY, REEL_REQUEST, type ReelDevMessage } from './protocol';
+
+const CSS = `
+.e8rp-wait { color: #6b7480; font-size: 12px; line-height: 1.6; padding: 8px 2px; }
+.e8rp-bar { display: flex; gap: 8px; margin-bottom: 12px; }
+.e8rp-bar button {
+  flex: 1 1 0; background: #1c2128; color: #cfd5dd; border: 1px solid #3a414c; border-radius: 8px;
+  padding: 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
+}
+.e8rp-bar button:hover { border-color: #4b5563; color: #fff; }
+.e8rp-status { font-size: 11px; color: #6b7480; min-height: 14px; margin-bottom: 8px; }
+.e8rp-controls .panel-section { border-top: 1px solid #1d222a; }
+.e8rp-controls .section-head {
+  width: 100%; text-align: left; background: transparent; border: 0; color: #aab2bd;
+  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
+  padding: 10px 2px 6px; cursor: pointer;
+}
+.e8rp-controls .section-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
+.e8rp-controls .control {
+  display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12px; color: #d3d8df;
+}
+.e8rp-controls .control-label { flex: 1 1 auto; }
+.e8rp-controls .control-value { width: 34px; text-align: right; color: #828b98; font-variant-numeric: tabular-nums; }
+.e8rp-controls input[type=range] { flex: 0 0 120px; }
+.e8rp-controls select { background: #1c2128; color: #e9ecf1; border: 1px solid #3a414c; border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; }
+.e8rp-controls .control-toggle { justify-content: space-between; }
+`;
+
+function injectCss(): void {
+  if (document.getElementById('e8-reel-panel-css')) return;
+  const style = document.createElement('style');
+  style.id = 'e8-reel-panel-css';
+  style.textContent = CSS;
+  document.head.appendChild(style);
+}
+
+const mount: HarnessPanelMount = (ctx) => {
+  injectCss();
+  const root = ctx.root;
+  root.innerHTML = '<p class="e8rp-wait">Waiting for the game’s reel bridge…<br/>(the game must call <code>mountReelDevBridge</code>.)</p>';
+
+  let working: ReelSystemConfig | null = null;
+  let built = false;
+
+  const status = (msg: string): void => {
+    const el = root.querySelector<HTMLElement>('.e8rp-status');
+    if (el) el.textContent = msg;
+  };
+  const copy = (text: string, label: string): void => {
+    navigator.clipboard
+      ?.writeText(text)
+      .then(() => status(`${label} copied`))
+      .catch(() => status('Copy failed'));
+  };
+
+  const buildUi = (config: ReelSystemConfig): void => {
+    working = structuredClone(config);
+    root.innerHTML = '';
+
+    const bar = document.createElement('div');
+    bar.className = 'e8rp-bar';
+    const copyTs = document.createElement('button');
+    copyTs.textContent = 'Copy config';
+    copyTs.addEventListener('click', () => working && copy(emitReelConfigTs(working), 'TS config'));
+    const copyJson = document.createElement('button');
+    copyJson.textContent = 'Copy JSON';
+    copyJson.addEventListener('click', () => working && copy(JSON.stringify(working, null, 2), 'JSON'));
+    bar.append(copyTs, copyJson);
+
+    const statusEl = document.createElement('div');
+    statusEl.className = 'e8rp-status';
+
+    const controls = document.createElement('div');
+    controls.className = 'e8rp-controls';
+
+    root.append(bar, statusEl, controls);
+
+    buildControlPanel(controls, {
+      config: working,
+      onChange: () => {
+        ctx.post({ type: REEL_APPLY, patch: working as ReelSystemConfig } satisfies ReelDevMessage);
+      },
+    });
+    built = true;
+  };
+
+  ctx.on((raw) => {
+    const msg = raw as ReelDevMessage | undefined;
+    if (msg && typeof msg === 'object' && msg.type === REEL_READY) buildUi(msg.config);
+  });
+
+  // Ask the game for its config (covers the game-loaded-first case); retry a couple times.
+  const request = (): void => ctx.post({ type: REEL_REQUEST } satisfies ReelDevMessage);
+  request();
+  window.setTimeout(() => !built && request(), 400);
+  window.setTimeout(() => !built && request(), 1200);
+};
+
+export default mount;

package/src/slot/devtools/protocol.ts

@@ -0,0 +1,29 @@
+// packages/game-engine/src/slot/devtools/protocol.ts
+//
+// The postMessage protocol between the harness reel panel (parent window) and the
+// reel dev bridge (game iframe). Pure constants + message types — no deps.
+
+import type { DeepPartial, ReelSystemConfig } from '../config/ReelSystemConfig';
+
+/** Game → panel: announces the current resolved config (on mount + on request). */
+export interface ReelReadyMessage {
+  type: 'e8:reel:ready';
+  config: ReelSystemConfig;
+}
+
+/** Panel → game: apply a partial config live (system.update). */
+export interface ReelApplyMessage {
+  type: 'e8:reel:apply';
+  patch: DeepPartial<ReelSystemConfig>;
+}
+
+/** Panel → game: (re)request the current config, e.g. when the panel opens late. */
+export interface ReelRequestMessage {
+  type: 'e8:reel:request';
+}
+
+export type ReelDevMessage = ReelReadyMessage | ReelApplyMessage | ReelRequestMessage;
+
+export const REEL_READY = 'e8:reel:ready';
+export const REEL_APPLY = 'e8:reel:apply';
+export const REEL_REQUEST = 'e8:reel:request';

package/src/slot/devtools/reelDevBridge.ts

@@ -0,0 +1,80 @@
+// packages/game-engine/src/slot/devtools/reelDevBridge.ts
+//
+// Game-side opt-in bridge for the harness reel panel. Call once, after creating the
+// ReelSystem, to let the harness sidebar tune the reels LIVE:
+//
+//   import { mountReelDevBridge } from '@energy8platform/game-engine/devtools';
+//   const bridge = mountReelDevBridge({ system });
+//
+// It announces the system's current config to the parent (the harness wrapper) and
+// applies incoming patches via `system.update()`. Changes are EPHEMERAL — they live
+// only in this running iframe and are lost on reload. To persist, use the panel's
+// "Copy config" button and paste the snippet into your game's reel config.
+//
+// No-op outside an iframe (window.parent === window), so it is safe to leave in.
+
+import type { DeepPartial, ReelSystemConfig } from '../config/ReelSystemConfig';
+import { REEL_APPLY, REEL_READY, REEL_REQUEST, type ReelDevMessage } from './protocol';
+
+/** Minimal ReelSystem surface the bridge needs (keeps it decoupled/testable). */
+export interface ReelDevBridgeTarget {
+  readonly config: ReelSystemConfig;
+  update(partial: DeepPartial<ReelSystemConfig>): void;
+}
+
+export interface ReelDevBridgeOptions {
+  system: ReelDevBridgeTarget;
+  /** postMessage targetOrigin for the parent. Default '*' (dev harness, same-origin). */
+  targetOrigin?: string;
+  /**
+   * Guard: only mount when true. Defaults to `import.meta.env?.DEV` when available,
+   * else true. Pass `false` to hard-disable.
+   */
+  enabled?: boolean;
+}
+
+export interface ReelDevBridge {
+  /** Re-announce the current config to the parent. */
+  announce(): void;
+  /** Detach the message listener. */
+  dispose(): void;
+}
+
+function defaultEnabled(): boolean {
+  try {
+    // vite injects import.meta.env.DEV; guard so non-vite builds don't throw.
+    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
+    return env?.DEV ?? true;
+  } catch {
+    return true;
+  }
+}
+
+export function mountReelDevBridge(opts: ReelDevBridgeOptions): ReelDevBridge {
+  const enabled = opts.enabled ?? defaultEnabled();
+  const noop: ReelDevBridge = { announce: () => {}, dispose: () => {} };
+  if (!enabled || typeof window === 'undefined' || window.parent === window) return noop;
+
+  const origin = opts.targetOrigin ?? '*';
+  const { system } = opts;
+
+  const announce = (): void => {
+    window.parent.postMessage({ type: REEL_READY, config: system.config } satisfies ReelDevMessage, origin);
+  };
+
+  const onMessage = (e: MessageEvent): void => {
+    if (e.source !== window.parent) return;
+    const msg = e.data as ReelDevMessage | undefined;
+    if (!msg || typeof msg !== 'object') return;
+    if (msg.type === REEL_APPLY) system.update(msg.patch);
+    else if (msg.type === REEL_REQUEST) announce();
+  };
+
+  window.addEventListener('message', onMessage);
+  announce(); // cover the panel-already-open case
+
+  return {
+    announce,
+    dispose: () => window.removeEventListener('message', onMessage),
+  };
+}

package/src/slot/features/extra.ts

@@ -46,8 +46,7 @@ export const MultiplierSymbols: ReelFeature = {
         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);
   },
 };

package/src/slot/features/symbols.ts

@@ -6,6 +6,7 @@ import {
   type FeatureContext,
   type ReelFeature,
   cellCenter,
+  colStepOf,
   floatLabel,
   morphSymbol,
   pickFromBoard,
@@ -96,17 +97,15 @@ export const GiantSymbol: ReelFeature = {
     ctx.log?.(`Giant ${w}×${h} "${sym}"`);
     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 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++) ctx.grid.getCell(c, r).visible = false;
@@ -143,11 +142,12 @@ export const SplitSymbol: ReelFeature = {
       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,
+          x + cs.width / 3,
+          y - cs.height / 3,
           `×${f.factor}`,
           0x9b5cff,
           600,

package/src/slot/features/types.ts

@@ -43,8 +43,16 @@ export function cellCenter(grid: ReelGrid, col: number, row: number): { x: numbe
   return grid.cellPosition(col, row);
 }
 
-export function rowStepOf(grid: ReelGrid): number {
-  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). */
+export function rowStepOf(grid: ReelGrid, col = 0): number {
+  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). */
+export function colStepOf(grid: ReelGrid, col = 0): number {
+  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. */
@@ -57,9 +65,9 @@ export function glowRing(
 ): () => void {
   if (fx.destroyed) return () => {};
   const { x, y } = cellCenter(grid, col, row);
-  const s = grid.cellSize;
+  const { width, height } = grid.cellSize(col);
   const g = new 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();
@@ -118,7 +126,7 @@ export async function dropCell(
 ): Promise<void> {
   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'));

package/src/slot/features/wilds.ts

@@ -69,7 +69,7 @@ export const StickySymbols: ReelFeature = {
         await floatLabel(
           ctx.fx,
           x,
-          y - ctx.grid.cellSize / 2,
+          y - ctx.grid.cellSize(p.col).height / 2,
           f.durationSpins ? `STICKY ${f.durationSpins}` : 'STICKY',
           f.ringColor,
           600 + i * 50,

package/src/slot/grid/AnimatedSymbol.ts

@@ -3,25 +3,32 @@ import { SpriteAnimation } from '../../animation';
 import type { SymbolView } from './SymbolView';
 
 export interface SymbolTextures { base: Texture; idle?: Texture[]; win?: Texture[]; }
-export interface AnimatedSymbolConfig { textures: SymbolTextures; size: number; fps?: number; }
+export interface AnimatedSymbolConfig {
+  textures: SymbolTextures;
+  size: number | { width: number; height: number };
+  fps?: number;
+}
+
+const dims = (size: number | { width: number; height: number }) =>
+  typeof size === 'number' ? { width: size, height: size } : size;
 
 /** Built-in SymbolView: a static base sprite with optional idle/win spritesheet frames. */
 export class AnimatedSymbol extends Container implements SymbolView {
   private _base: Sprite;
   private _anim: AnimatedSprite | null = null;
   private _textures: SymbolTextures;
-  private _size: number;
+  private _w = 0;
+  private _h = 0;
   private _fps: number;
 
   constructor(config: AnimatedSymbolConfig) {
     super();
     this._textures = config.textures;
-    this._size = config.size;
     this._fps = config.fps ?? 24;
     this._base = new Sprite(config.textures.base);
     this._base.anchor.set(0.5);
     this.addChild(this._base);
-    this.resize(this._size);
+    this.resize(config.size);
   }
 
   setTextures(t: SymbolTextures): void {
@@ -30,11 +37,13 @@ export class AnimatedSymbol extends Container implements SymbolView {
     this.showStatic();
   }
 
-  resize(size: number): void {
-    this._size = size;
-    this._base.width = size;
-    this._base.height = size;
-    if (this._anim) { this._anim.width = size; this._anim.height = size; }
+  resize(size: number | { width: number; height: number }): void {
+    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 = width; this._anim.height = height; }
   }
 
   showStatic(): void {
@@ -59,8 +68,8 @@ export class AnimatedSymbol extends Container implements SymbolView {
     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;