cascading-reel 0.0.12 → 0.0.13

package/dist/index.es.js

@@ -1,66 +1,55 @@
-const Q = [0.04, 0, -0.04], V = 34, Z = 0.05, K = 5e3, H = 1800, j = 0.1, M = 720, b = 34, x = 20, v = 12, J = [255, 235, 110], tt = [
-  255,
-  255,
-  255,
-  0.78
-], it = 190, I = 650, et = 220, nt = 200;
-function _(t, i, e) {
-  return t < i ? i : t > e ? e : t;
+const q = [0.04, 0, -0.04], y = 34, X = 0.05, k = 5e3, W = 1800, Y = 0.1, T = 720, G = 34, z = [255, 235, 110], $ = 190, L = 520, K = 200;
+function b(e, t, i) {
+  return e < t ? t : e > i ? i : e;
 }
-function D(t) {
-  return 1 - (1 - t) ** 3;
+function Q(e) {
+  return Math.floor(Math.random() * e);
 }
-function st(t) {
-  return Math.floor(Math.random() * t);
+function C(e, t) {
+  return (e % t + t) % t;
 }
-function A(t, i) {
-  return (t % i + i) % i;
+function M(e) {
+  return b(Math.round(e), 0, 255);
 }
-function O(t) {
-  return _(Math.round(t), 0, 255);
-}
-function lt(t) {
-  return _(t, 0, 1);
-}
-function y(t) {
-  const i = [];
-  for (let e = 0; e < 3; e += 1) {
-    const n = [];
-    for (let l = 0; l < 3; l += 1)
-      n.push(st(t));
-    i.push(n);
+function x(e) {
+  const t = [];
+  for (let i = 0; i < 3; i += 1) {
+    const s = [];
+    for (let r = 0; r < 3; r += 1)
+      s.push(Q(e));
+    t.push(s);
   }
-  return i;
+  return t;
 }
-function T(t) {
-  const i = /* @__PURE__ */ new Map();
-  for (let s = 0; s < 3; s += 1)
-    for (let r = 0; r < 3; r += 1) {
-      const u = t[s][r];
-      i.set(u, (i.get(u) ?? 0) + 1);
+function F(e) {
+  const t = /* @__PURE__ */ new Map();
+  for (let n = 0; n < 3; n += 1)
+    for (let o = 0; o < 3; o += 1) {
+      const h = e[n][o];
+      t.set(h, (t.get(h) ?? 0) + 1);
     }
-  let e = t[0][0], n = -1;
-  for (const [s, r] of i.entries())
-    r > n && (n = r, e = s);
-  const l = [];
-  for (let s = 0; s < 3; s += 1)
-    for (let r = 0; r < 3; r += 1)
-      t[s][r] === e && l.push({ col: s, row: r });
-  return l;
-}
-function N() {
+  let i = e[0][0], s = -1;
+  for (const [n, o] of t.entries())
+    o > s && (s = o, i = n);
+  const r = [];
+  for (let n = 0; n < 3; n += 1)
+    for (let o = 0; o < 3; o += 1)
+      e[n][o] === i && r.push({ col: n, row: o });
+  return r;
+}
+function H() {
   return Array.from({ length: 3 }, () => Array.from({ length: 3 }, () => 0));
 }
-function W(t, i) {
-  for (let e = 0; e < 3; e += 1)
-    for (let n = 0; n < 3; n += 1)
-      t[e][n] = i;
+function I(e, t) {
+  for (let i = 0; i < 3; i += 1)
+    for (let s = 0; s < 3; s += 1)
+      e[i][s] = t;
 }
-class rt {
+class V {
   rafId = null;
   step = null;
-  start(i) {
-    this.rafId === null && (this.step = i, this.rafId = requestAnimationFrame(this.tick));
+  start(t) {
+    this.rafId === null && (this.step = t, this.rafId = requestAnimationFrame(this.tick));
   }
   stop() {
     this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.step = null;
@@ -68,134 +57,133 @@ class rt {
   isRunning() {
     return this.rafId !== null;
   }
-  tick = (i) => {
+  tick = (t) => {
     if (!this.step) {
       this.stop();
       return;
     }
-    if (this.step(i) === !1) {
+    if (this.step(t) === !1) {
       this.stop();
       return;
     }
     this.rafId !== null && (this.rafId = requestAnimationFrame(this.tick));
   };
 }
-function ot(t, i, e) {
-  const n = [0, 0, 0];
-  let l = 0;
-  for (let s = 2; s >= 0; s -= 1) {
-    if (t[s] === 0) {
-      n[s] = 0;
+function D(e) {
+  const t = b(e, 0, 1);
+  return t * t * (3 - 2 * t);
+}
+function Z(e, t, i) {
+  const s = [0, 0, 0];
+  let r = 0;
+  for (let n = 2; n >= 0; n -= 1) {
+    if (e[n] === 0) {
+      s[n] = 0;
       continue;
     }
-    n[s] = l;
-    const r = Math.floor(i * Z);
-    l += r + e;
+    s[n] = r;
+    const o = Math.floor(t * X);
+    r += o + i;
   }
-  return n;
+  return s;
+}
+function N(e) {
+  const i = e.height - e.boardY + e.cellH + 2, s = [
+    i,
+    i,
+    i
+  ];
+  return {
+    outgoingDistance: i,
+    incomingFromOffsets: [-e.cellH, -e.cellH * 2, -e.cellH * 3],
+    rowStartDelays: Z(
+      s,
+      L,
+      y
+    ),
+    // Start incoming symbols only after outgoing ones fully complete to avoid
+    // perceived jitter from overlapping opposite-direction visual motion.
+    incomingStartShift: L
+  };
 }
-function ht(t) {
-  let i = !0, e = !0;
-  const l = t.height - t.boardY + t.cellH + 2, s = [
-    l,
-    l,
-    l
-  ], r = [
-    -t.cellH,
-    -t.cellH * 2,
-    -t.cellH * 3
-  ], u = ot(
-    s,
-    I,
-    V
-  ), o = I - et;
-  for (let h = 0; h < t.scriptedOutgoingOffsets.length; h += 1) {
-    const a = t.now - (t.scriptedOutroStartedAt + h * it);
-    for (let c = 0; c < 3; c += 1) {
-      const d = a - u[c];
-      if (d <= 0) {
-        t.scriptedOutgoingOffsets[h][c] = 0, t.scriptedIncomingOffsets[h][c] = Number.NaN, i = !1, e = !1;
+function j(e) {
+  let t = !0, i = !0;
+  for (let s = 0; s < e.scriptedOutgoingOffsets.length; s += 1) {
+    const r = e.now - (e.scriptedOutroStartedAt + s * $);
+    for (let n = 0; n < 3; n += 1) {
+      const o = r - e.motionPlan.rowStartDelays[n];
+      if (o <= 0) {
+        e.scriptedOutgoingOffsets[s][n] = 0, e.scriptedIncomingOffsets[s][n] = Number.NaN, t = !1, i = !1;
         continue;
       }
-      const f = _(d / I, 0, 1), g = D(f);
-      t.scriptedOutgoingOffsets[h][c] = l * g, f < 1 && (i = !1);
-      const p = d - o;
-      if (p <= 0) {
-        t.scriptedIncomingOffsets[h][c] = Number.NaN, e = !1;
+      const h = b(o / L, 0, 1), l = D(h);
+      e.scriptedOutgoingOffsets[s][n] = e.motionPlan.outgoingDistance * l, h < 1 && (t = !1);
+      const c = o - e.motionPlan.incomingStartShift;
+      if (c <= 0) {
+        e.scriptedIncomingOffsets[s][n] = Number.NaN, i = !1;
         continue;
       }
-      const S = _(p / I, 0, 1), w = D(S);
-      t.scriptedIncomingOffsets[h][c] = r[c] * (1 - w), S < 1 && (e = !1);
+      const a = b(c / L, 0, 1), d = D(a);
+      e.scriptedIncomingOffsets[s][n] = e.motionPlan.incomingFromOffsets[n] * (1 - d), a < 1 && (i = !1);
     }
   }
-  return { allOutgoingDone: i, allIncomingDone: e };
-}
-function ct(t) {
-  return t ? [
-    O(t[0]),
-    O(t[1]),
-    O(t[2])
-  ] : J;
+  return { allOutgoingDone: t, allIncomingDone: i };
 }
-function ut(t) {
-  return t === "rainbow" ? "rainbow" : "solid";
+function J(e) {
+  return e ? [
+    M(e[0]),
+    M(e[1]),
+    M(e[2])
+  ] : z;
 }
-function at(t) {
-  return t === "high" || t === "balanced" || t === "low" || t === "auto" ? t : "auto";
+function tt(e) {
+  return e === "rainbow" ? "rainbow" : "solid";
 }
-function dt(t) {
-  return t ? [
-    O(t[0]),
-    O(t[1]),
-    O(t[2]),
-    lt(t[3])
-  ] : tt;
-}
-function G(t) {
-  if (t.length !== 3)
+function P(e) {
+  if (e.length !== 3)
     throw new Error("rows must contain 3 rows");
-  for (let i = 0; i < 3; i += 1)
-    if (!Array.isArray(t[i]) || t[i].length !== 3)
-      throw new Error(`rows[${i}] must contain 3 columns`);
+  for (let t = 0; t < 3; t += 1)
+    if (!Array.isArray(e[t]) || e[t].length !== 3)
+      throw new Error(`rows[${t}] must contain 3 columns`);
   return [
-    [t[0][0], t[1][0], t[2][0]],
-    [t[0][1], t[1][1], t[2][1]],
-    [t[0][2], t[1][2], t[2][2]]
+    [e[0][0], e[1][0], e[2][0]],
+    [e[0][1], e[1][1], e[2][1]],
+    [e[0][2], e[1][2], e[2][2]]
   ];
 }
-function P(t, i) {
-  if (t.length !== 3)
+function v(e, t) {
+  if (e.length !== 3)
     throw new Error("stopGrid must contain 3 columns");
-  const e = [];
-  for (let n = 0; n < 3; n += 1) {
-    const l = t[n];
-    if (!Array.isArray(l) || l.length !== 3)
-      throw new Error(`stopGrid[${n}] must contain 3 rows`);
-    e[n] = [
-      A(l[0], i),
-      A(l[1], i),
-      A(l[2], i)
+  const i = [];
+  for (let s = 0; s < 3; s += 1) {
+    const r = e[s];
+    if (!Array.isArray(r) || r.length !== 3)
+      throw new Error(`stopGrid[${s}] must contain 3 rows`);
+    i[s] = [
+      C(r[0], t),
+      C(r[1], t),
+      C(r[2], t)
     ];
   }
-  return e;
+  return i;
 }
-function ft(t, i) {
-  return P(G(t), i);
+function it(e, t) {
+  return v(P(e), t);
 }
-function gt(t) {
+function et(e) {
   return {
-    stopGrid: t.stopGrid?.map((i) => [...i]),
-    stopRows: t.stopRows?.map((i) => [...i]),
-    finaleSequence: t.finaleSequence?.map((i) => i.map((e) => [...e])),
-    finaleSequenceRows: t.finaleSequenceRows?.map((i) => i.map((e) => [...e])),
-    highlightWin: t.highlightWin,
-    callback: t.callback
+    stopGrid: e.stopGrid?.map((t) => [...t]),
+    stopRows: e.stopRows?.map((t) => [...t]),
+    finaleSequence: e.finaleSequence?.map((t) => t.map((i) => [...i])),
+    finaleSequenceRows: e.finaleSequenceRows?.map((t) => t.map((i) => [...i])),
+    highlightWin: e.highlightWin,
+    callback: e.callback
   };
 }
-class St {
+class st {
   queue;
-  constructor(i) {
-    this.queue = (i ?? []).map((e) => gt(e));
+  constructor(t) {
+    this.queue = (t ?? []).map((i) => et(i));
   }
   hasPending() {
     return this.queue.length > 0;
@@ -204,7 +192,7 @@ class St {
     return this.queue.length === 0 ? null : this.queue.shift() ?? null;
   }
 }
-function pt() {
+function nt() {
   return {
     isSpinning: !1,
     hasStartedFirstSpin: !1,
@@ -216,151 +204,200 @@ function pt() {
     outroStartedAt: 0,
     idleStartedAt: 0,
     preSpinStartedAt: 0,
-    swayEnvelope: 1,
     winEffectsEnvelope: 1
   };
 }
-function Ct(t, i) {
-  t.hasStartedFirstSpin = !0, t.isSpinning = !0, t.phase = "outro", t.outroStartedAt = i.startedAt, t.activeSpinState = i.activeSpinState, t.shouldHighlightCurrentSpin = i.shouldHighlightCurrentSpin;
-}
-function wt(t, i, e) {
-  t.phase = "idle", t.idleStartedAt = e, t.isSpinning = !1, t.shouldHighlightCurrentSpin = !1, t.queueFinished = !i, t.activeSpinState = null;
-}
-function q(t, i) {
-  t.winFlashStartedAt = i, t.phase = "winFlash";
-}
-function Ot(t) {
-  t.isSpinning = !1, t.queueFinished = !0;
-}
-const Rt = 3, _t = 2e-3;
-function F(t, i) {
-  return (Q[t] ?? 0) * i;
-}
-function Et(t) {
-  const i = t.columnSway ?? [0, 0, 0], e = Rt * (Math.PI / 180), n = Math.max(0, Math.min(1, t.swayEnvelope)), l = t.skipWinningCells ?? !1;
-  for (let s = 0; s < 3; s += 1) {
-    const r = t.boardX + s * t.cellW, u = i[s] ?? 0;
-    for (let o = 0; o < 3; o += 1) {
-      if ((l || t.phase === "winFlash" || t.phase === "preSpin") && t.isWinningCell(s, o))
-        continue;
-      const h = t.offsets ? t.offsets[s][o] : 0;
-      if (!Number.isFinite(h)) continue;
-      const a = t.boardY + o * t.cellH + h + u + F(o, t.cellH);
-      if (a > t.height || a + t.cellH < 0) continue;
-      const d = Math.sin(t.now * _t + s * 1.1 + o * 1.3) * e * n, f = r + t.cellW * 0.5, g = a + t.cellH * 0.5;
-      t.ctx.save(), t.ctx.translate(f, g), t.ctx.rotate(d), t.ctx.translate(-t.cellW * 0.5, -t.cellH * 0.5), t.drawSpriteCell(t.grid[s][o], 0, 0, t.cellW, t.cellH), t.ctx.restore();
+function rt(e, t) {
+  e.hasStartedFirstSpin = !0, e.isSpinning = !0, e.phase = "outro", e.outroStartedAt = t.startedAt, e.activeSpinState = t.activeSpinState, e.shouldHighlightCurrentSpin = t.shouldHighlightCurrentSpin;
+}
+function ot(e, t, i) {
+  e.phase = "idle", e.idleStartedAt = i, e.isSpinning = !1, e.shouldHighlightCurrentSpin = !1, e.queueFinished = !t, e.activeSpinState = null;
+}
+function U(e, t) {
+  e.winFlashStartedAt = t, e.phase = "winFlash";
+}
+function ht(e) {
+  e.isSpinning = !1, e.queueFinished = !0;
+}
+const lt = `
+attribute vec2 a_pos;
+uniform vec2 u_resolution;
+uniform vec4 u_destRect;
+varying vec2 v_uv;
+
+void main() {
+  vec2 local = a_pos;
+  vec2 pixel = vec2(
+    u_destRect.x + local.x * u_destRect.z,
+    u_destRect.y + local.y * u_destRect.w
+  );
+
+  vec2 zeroToOne = pixel / u_resolution;
+  vec2 clip = vec2(
+    zeroToOne.x * 2.0 - 1.0,
+    1.0 - zeroToOne.y * 2.0
+  );
+
+  gl_Position = vec4(clip, 0.0, 1.0);
+  v_uv = local;
+}
+`, at = `
+precision mediump float;
+
+uniform sampler2D u_texture;
+uniform vec4 u_srcRect;
+uniform vec4 u_color;
+uniform float u_useTexture;
+uniform float u_shapeMode;
+varying vec2 v_uv;
+
+void main() {
+  if (u_shapeMode > 0.5) {
+    vec2 centered = v_uv - vec2(0.5, 0.5);
+    float dist = length(centered) * 2.0;
+    if (dist > 1.0) {
+      discard;
     }
+    float feather = smoothstep(1.0, 0.72, dist);
+    gl_FragColor = vec4(u_color.rgb, u_color.a * feather);
+  } else if (u_useTexture > 0.5) {
+    vec2 uv = vec2(
+      mix(u_srcRect.x, u_srcRect.z, v_uv.x),
+      mix(u_srcRect.y, u_srcRect.w, v_uv.y)
+    );
+    vec4 tex = texture2D(u_texture, uv);
+    gl_FragColor = tex * u_color;
+  } else {
+    gl_FragColor = u_color;
   }
 }
-function R(t, i, e, n) {
-  const l = Math.sin(t * 127.1 + i * 311.7 + e * 74.7 + n * 19.3) * 43758.5453;
-  return l - Math.floor(l);
-}
-const Y = /* @__PURE__ */ new Map();
-function It(t, i) {
-  const e = `${t},${i}`;
-  let n = Y.get(e);
-  if (n) return n;
-  n = [];
-  for (let l = 0; l < b; l += 1)
-    n.push({
-      seedA: R(t, i, l, 1),
-      seedB: R(t, i, l, 2),
-      seedC: R(t, i, l, 3),
-      phaseOffset: R(t, i, l, 4),
-      twinkleSeed: R(t, i, l, 5)
-    });
-  return Y.set(e, n), n;
-}
-function U(t) {
-  if (t.winningCells.length === 0 || t.phase !== "winFlash" && t.phase !== "preSpin") return;
-  const i = Math.max(0, Math.min(1, t.winEffectsEnvelope)), e = Math.max(0, t.now - t.winFlashStartedAt), n = e % H / H, l = 1 + Math.sin(n * Math.PI * 2) * j;
-  for (const s of t.winningCells) {
-    const r = t.boardX + s.col * t.cellW, u = t.boardY + s.row * t.cellH + F(s.row, t.cellH);
-    Wt(
-      t.ctx,
-      r,
-      u,
-      t.cellW,
-      t.cellH,
-      s.col,
-      s.row,
-      t.winningCellBorderRgba,
-      e,
-      i
+`;
+class ut {
+  canvas;
+  spriteImage;
+  spriteElementsCount;
+  gl;
+  program;
+  uniforms;
+  quadBuffer;
+  texture;
+  viewportW = 1;
+  viewportH = 1;
+  spriteWidth;
+  spriteHeight;
+  spriteSegmentHeight;
+  constructor(t) {
+    this.canvas = t.canvas, this.spriteImage = t.spriteImage, this.spriteElementsCount = Math.max(1, t.spriteElementsCount), this.spriteWidth = this.spriteImage.width, this.spriteHeight = this.spriteImage.height, this.spriteSegmentHeight = this.spriteHeight / this.spriteElementsCount;
+    const i = this.canvas.getContext("webgl2", {
+      alpha: !0,
+      antialias: !1
+    }) ?? this.canvas.getContext("webgl", { alpha: !0, antialias: !1 });
+    if (!i)
+      throw new Error("WebGL context is not available");
+    this.gl = i;
+    const s = this.createShader(this.gl.VERTEX_SHADER, lt), r = this.createShader(this.gl.FRAGMENT_SHADER, at);
+    this.program = this.createProgram(s, r), this.gl.deleteShader(s), this.gl.deleteShader(r);
+    const n = this.gl.createBuffer();
+    if (!n)
+      throw new Error("Failed to create WebGL quad buffer");
+    this.quadBuffer = n, this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.quadBuffer), this.gl.bufferData(
+      this.gl.ARRAY_BUFFER,
+      new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]),
+      this.gl.STATIC_DRAW
     );
-    const o = t.getCell(s.col, s.row), h = 1 + (l - 1) * i, a = t.cellW * h, c = t.cellH * h, d = (t.cellW - a) * 0.5, f = (t.cellH - c) * 0.5;
-    t.ctx.save(), t.drawSpriteCell(o, r + d, u + f, a, c), t.ctx.restore();
-  }
-  if (!(t.particlesPerCell <= 0)) {
-    t.ctx.save(), t.ctx.beginPath(), t.ctx.rect(t.boardX, t.boardY, t.cellW * 3, t.cellH * 3), t.ctx.clip();
-    for (const s of t.winningCells) {
-      const r = t.boardX + s.col * t.cellW, u = t.boardY + s.row * t.cellH + F(s.row, t.cellH);
-      bt({
-        ctx: t.ctx,
-        cell: s,
-        x: r,
-        y: u,
-        elapsed: e,
-        envelope: i,
-        cellW: t.cellW,
-        cellH: t.cellH,
-        particlesPerCell: t.particlesPerCell,
-        particleColorMode: t.particleColorMode,
-        particleColorRgb: t.particleColorRgb
-      });
+    const o = this.gl.createTexture();
+    if (!o)
+      throw new Error("Failed to create WebGL texture");
+    this.texture = o, this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture), this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, 0), this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1), this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.gl.RGBA,
+      this.gl.RGBA,
+      this.gl.UNSIGNED_BYTE,
+      this.spriteImage
+    ), this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE), this.gl.useProgram(this.program);
+    const h = this.gl.getAttribLocation(this.program, "a_pos");
+    this.gl.enableVertexAttribArray(h), this.gl.vertexAttribPointer(h, 2, this.gl.FLOAT, !1, 8, 0), this.uniforms = {
+      resolution: this.gl.getUniformLocation(this.program, "u_resolution"),
+      destRect: this.gl.getUniformLocation(this.program, "u_destRect"),
+      srcRect: this.gl.getUniformLocation(this.program, "u_srcRect"),
+      color: this.gl.getUniformLocation(this.program, "u_color"),
+      useTexture: this.gl.getUniformLocation(this.program, "u_useTexture"),
+      shapeMode: this.gl.getUniformLocation(this.program, "u_shapeMode"),
+      texture: this.gl.getUniformLocation(this.program, "u_texture")
+    }, this.gl.uniform1i(this.uniforms.texture, 0), this.gl.clearColor(0, 0, 0, 0), this.gl.enable(this.gl.BLEND), this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
+  }
+  resize(t, i) {
+    this.viewportW = Math.max(1, Math.floor(t)), this.viewportH = Math.max(1, Math.floor(i)), this.gl.viewport(0, 0, this.viewportW, this.viewportH);
+  }
+  beginFrame() {
+    this.gl.useProgram(this.program), this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.quadBuffer), this.gl.activeTexture(this.gl.TEXTURE0), this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture), this.gl.uniform2f(this.uniforms.resolution, this.viewportW, this.viewportH), this.gl.uniform1f(this.uniforms.shapeMode, 0), this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+  }
+  drawSprite(t, i, s, r, n, o = 1) {
+    const l = C(t, this.spriteElementsCount) * this.spriteSegmentHeight, c = l + this.spriteSegmentHeight, a = 0.5, d = a / this.spriteWidth, g = 1 - a / this.spriteWidth, p = 1 - (c - a) / this.spriteHeight, S = 1 - (l + a) / this.spriteHeight;
+    this.gl.uniform4f(this.uniforms.destRect, i, s, r, n), this.gl.uniform4f(this.uniforms.srcRect, d, p, g, S), this.gl.uniform4f(this.uniforms.color, 1, 1, 1, o), this.gl.uniform1f(this.uniforms.shapeMode, 0), this.gl.uniform1f(this.uniforms.useTexture, 1), this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+  }
+  drawSolidRect(t, i, s, r, n) {
+    this.gl.uniform4f(this.uniforms.destRect, t, i, s, r), this.gl.uniform4f(this.uniforms.srcRect, 0, 0, 1, 1), this.gl.uniform4f(this.uniforms.color, n[0], n[1], n[2], n[3]), this.gl.uniform1f(this.uniforms.shapeMode, 0), this.gl.uniform1f(this.uniforms.useTexture, 0), this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+  }
+  drawSoftCircle(t, i, s, r) {
+    const n = s * 2;
+    this.gl.uniform4f(
+      this.uniforms.destRect,
+      t - s,
+      i - s,
+      n,
+      n
+    ), this.gl.uniform4f(this.uniforms.srcRect, 0, 0, 1, 1), this.gl.uniform4f(this.uniforms.color, r[0], r[1], r[2], r[3]), this.gl.uniform1f(this.uniforms.useTexture, 0), this.gl.uniform1f(this.uniforms.shapeMode, 1), this.gl.drawArrays(this.gl.TRIANGLES, 0, 6), this.gl.uniform1f(this.uniforms.shapeMode, 0);
+  }
+  beginAdditiveBlend() {
+    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
+  }
+  endAdditiveBlend() {
+    this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
+  }
+  dispose() {
+    this.gl.deleteTexture(this.texture), this.gl.deleteBuffer(this.quadBuffer), this.gl.deleteProgram(this.program);
+  }
+  createShader(t, i) {
+    const s = this.gl.createShader(t);
+    if (!s)
+      throw new Error("Failed to create WebGL shader");
+    if (this.gl.shaderSource(s, i), this.gl.compileShader(s), !this.gl.getShaderParameter(s, this.gl.COMPILE_STATUS)) {
+      const r = this.gl.getShaderInfoLog(s) ?? "unknown error";
+      throw this.gl.deleteShader(s), new Error(`WebGL shader compile failed: ${r}`);
     }
-    t.ctx.restore();
-  }
-}
-function Wt(t, i, e, n, l, s, r, u, o, h) {
-  const a = Math.max(1, Math.floor(Math.min(n, l) * 0.04)), c = Math.max(1, Math.floor(Math.min(n, l) * 0.03)), [, , , d] = u, f = (s + 0.5) / 3, g = (r + 0.5) / 3, p = (o * 0.2 + f * 80 + g * 40) % 360, S = Math.min(n, l), w = Math.max(4, Math.floor(S * 0.04)), m = Math.max(3, Math.floor(S * 0.03));
-  t.save(), t.lineWidth = c, t.strokeStyle = `hsla(${p}, 90%, 70%, ${d * h})`, t.setLineDash([w, m]), t.lineDashOffset = -o * 0.03;
-  const E = c * 0.5;
-  t.strokeRect(
-    i + a + E,
-    e + a + E,
-    n - a * 2 - c,
-    l - a * 2 - c
-  ), t.setLineDash([]), t.restore();
-}
-const k = 24;
-function bt(t) {
-  const i = t.x + t.cellW * 0.5, e = t.y + t.cellH * 0.5, n = Math.min(t.cellW, t.cellH) * 0.72, l = Math.min(t.cellW, t.cellH) * 0.028, s = 0.96 * t.envelope, [r, u, o] = t.particleColorRgb, h = t.particleColorMode === "solid";
-  h && (t.ctx.fillStyle = `rgb(${r},${u},${o})`);
-  const a = It(t.cell.col, t.cell.row);
-  for (let c = 0; c < t.particlesPerCell; c += 1) {
-    const d = a[c], f = d.phaseOffset * M, g = t.elapsed - f;
-    if (g < 0) continue;
-    const p = g % M / M, S = d.seedA * Math.PI * 2, w = n * p * (0.35 + d.seedB * 0.65), m = i + Math.cos(S) * w, E = e + Math.sin(S) * w, B = 0.7 + 0.9 * Math.max(0, Math.sin((t.elapsed * 0.012 + d.twinkleSeed * 2) * Math.PI * 2)), z = Math.max(1, l * (0.55 + d.seedC * 0.6) * (1 - p * 0.5)), L = _((0.9 + B * 0.2) * s, 0.9, 1);
-    if (!(L <= 0)) {
-      if (h)
-        t.ctx.globalAlpha = L;
-      else {
-        const X = (d.seedA * 360 + t.elapsed * 0.24 + t.cell.col * 38 + t.cell.row * 22) % 360, $ = Math.floor(X / (360 / k)) * (360 / k);
-        t.ctx.fillStyle = `hsla(${$},98%,64%,${L})`;
-      }
-      t.ctx.beginPath(), t.ctx.arc(m, E, z, 0, Math.PI * 2), t.ctx.fill();
+    return s;
+  }
+  createProgram(t, i) {
+    const s = this.gl.createProgram();
+    if (!s)
+      throw new Error("Failed to create WebGL program");
+    if (this.gl.attachShader(s, t), this.gl.attachShader(s, i), this.gl.linkProgram(s), !this.gl.getProgramParameter(s, this.gl.LINK_STATUS)) {
+      const r = this.gl.getProgramInfoLog(s) ?? "unknown error";
+      throw this.gl.deleteProgram(s), new Error(`WebGL program link failed: ${r}`);
     }
+    return s;
   }
-  t.ctx.globalAlpha = 1;
 }
-class C {
+class u {
+  static RAINBOW_HUE_BUCKETS = 24;
+  static PARTICLE_GLOBAL_ALPHA = 0.9;
+  static PARTICLE_MAX_DISTANCE = 0.72;
+  static PARTICLE_BASE_RADIUS = 0.028;
   canvas;
   container;
   button;
-  ctx;
   spinQueueController;
   spriteUrl;
   spriteElementsCount;
   highlightInitialWinningCells;
   particleColorRgb;
   particleColorMode;
-  winningCellBorderRgba;
-  quality;
   spriteImage = null;
-  rafLoop = new rt();
-  runtime = pt();
+  webglRenderer = null;
+  rafLoop = new V();
+  runtime = nt();
   dpr = 1;
   width = 0;
   height = 0;
@@ -372,33 +409,42 @@ class C {
   scriptedOutgoingGrid = null;
   scriptedPendingGrid = null;
   scriptedOutroStartedAt = 0;
-  scriptedOutgoingOffsets = N();
-  scriptedIncomingOffsets = N();
+  scriptedOutroVirtualElapsedMs = 0;
+  scriptedOutroLastNow = 0;
+  outroMotionPlan = null;
+  scriptedOutgoingOffsets = H();
+  scriptedIncomingOffsets = H();
   winningCells = [];
+  winningCellKeys = /* @__PURE__ */ new Set();
   grid;
+  particlesPerCell = G;
   lastRafTime = 0;
-  particlesPerCell = b;
   initialHighlightRequestedAt = 0;
-  static SWAY_ENVELOPE_TAU_MS = 220;
   static PRE_SPIN_MS = 150;
   static WIN_EFFECTS_ENVELOPE_TAU_MS = 120;
-  constructor(i) {
-    this.canvas = i.canvas, this.container = i.container, this.button = i.button, this.spriteUrl = i.sprite, this.spriteElementsCount = Math.max(
+  static OUTRO_MAX_STEP_MS = 20;
+  static WIN_BORDER_ALPHA = 0.72;
+  static WIN_BORDER_INSET_RATIO = 0.06;
+  static particleSeedsCache = /* @__PURE__ */ new Map();
+  constructor(t) {
+    this.canvas = t.canvas, this.container = t.container, this.button = t.button, this.spriteUrl = t.sprite, this.spriteElementsCount = Math.max(
       1,
-      i.spriteElementsCount ?? 6
-    ), this.highlightInitialWinningCells = i.highlightInitialWinningCells !== !1, this.spinQueueController = new St(i.queuedSpinStates), this.particleColorRgb = ct(i.particleColorRgb), this.particleColorMode = ut(i.particleColorMode), this.winningCellBorderRgba = dt(i.winningCellBorderRgba), this.quality = at(i.quality);
-    const e = this.canvas.getContext("2d");
-    if (!e)
-      throw new Error("2D canvas context is not available");
-    this.ctx = e, this.grid = i.initialSegments ? ft(i.initialSegments, this.spriteElementsCount) : y(this.spriteElementsCount);
+      t.spriteElementsCount ?? 6
+    ), this.highlightInitialWinningCells = t.highlightInitialWinningCells !== !1, this.spinQueueController = new st(t.queuedSpinStates), this.particleColorRgb = J(t.particleColorRgb), this.particleColorMode = tt(t.particleColorMode), this.grid = t.initialSegments ? it(t.initialSegments, this.spriteElementsCount) : x(this.spriteElementsCount);
   }
   async init() {
-    this.bindEvents(), this.resize(), await this.loadSpriteIfProvided(), this.applyInitialHighlightIfNeeded(), this.prewarmWinEffects(), requestAnimationFrame((i) => {
-      this.render(i), this.startLoop();
+    if (this.bindEvents(), this.resize(), await this.loadSpriteIfProvided(), !this.spriteImage)
+      throw new Error("sprite is required for WebGL renderer");
+    this.webglRenderer = new ut({
+      canvas: this.canvas,
+      spriteImage: this.spriteImage,
+      spriteElementsCount: this.spriteElementsCount
+    }), this.webglRenderer.resize(this.width, this.height), this.applyInitialHighlightIfNeeded(), requestAnimationFrame((t) => {
+      this.render(t), this.startLoop();
     });
   }
   destroy() {
-    this.unbindEvents(), this.rafLoop.stop(), Ot(this.runtime), this.clearWinningCells();
+    this.unbindEvents(), this.rafLoop.stop(), ht(this.runtime), this.webglRenderer?.dispose(), this.webglRenderer = null, this.clearWinningCells();
   }
   spin() {
     if (this.runtime.isSpinning || this.runtime.queueFinished) return;
@@ -406,8 +452,8 @@ class C {
       this.runtime.queueFinished = !0, this.button && (this.button.disabled = !0);
       return;
     }
-    const i = this.spinQueueController.consume(), e = i?.highlightWin === !0;
-    this.runtime.isSpinning = !0, this.runtime.phase = "preSpin", this.runtime.preSpinStartedAt = performance.now(), this.runtime.activeSpinState = i, this.runtime.shouldHighlightCurrentSpin = e, this.runtime.hasStartedFirstSpin = !0, this.button && (this.button.disabled = !0);
+    const t = this.spinQueueController.consume(), i = t?.highlightWin === !0;
+    this.runtime.isSpinning = !0, this.runtime.phase = "preSpin", this.runtime.preSpinStartedAt = performance.now(), this.runtime.activeSpinState = t, this.runtime.shouldHighlightCurrentSpin = i, this.runtime.hasStartedFirstSpin = !0, this.button && (this.button.disabled = !0), this.startLoop();
   }
   bindEvents() {
     window.addEventListener("resize", this.resize), this.button?.addEventListener("click", this.onSpinClick);
@@ -422,212 +468,262 @@ class C {
     }
     this.runtime.isSpinning || this.spin();
   };
-  getNextGrid(i) {
-    return i ? P(i, this.spriteElementsCount) : y(this.spriteElementsCount);
+  getNextGrid(t) {
+    return t ? v(t, this.spriteElementsCount) : x(this.spriteElementsCount);
   }
-  update(i) {
+  update(t) {
     if (this.runtime.isSpinning) {
       if (this.runtime.phase === "preSpin") {
-        if (i - this.runtime.preSpinStartedAt < C.PRE_SPIN_MS)
+        if (t - this.runtime.preSpinStartedAt < u.PRE_SPIN_MS)
           return;
-        Ct(this.runtime, {
+        rt(this.runtime, {
           activeSpinState: this.runtime.activeSpinState,
           shouldHighlightCurrentSpin: this.runtime.shouldHighlightCurrentSpin,
-          startedAt: i
+          startedAt: t
         }), this.runtime.preSpinStartedAt = 0;
-        const e = this.runtime.activeSpinState?.finaleSequenceRows ? this.runtime.activeSpinState.finaleSequenceRows.map((s) => G(s)) : this.runtime.activeSpinState?.finaleSequence ?? [];
-        this.scriptedCascadeQueue = e.map((s) => s.map((r) => [...r])), this.clearWinningCells();
-        const n = this.runtime.activeSpinState?.stopRows ? G(this.runtime.activeSpinState.stopRows) : this.runtime.activeSpinState?.stopGrid, l = this.getNextGrid(n);
-        this.startOutroTransition(l, i);
+        const i = this.runtime.activeSpinState?.finaleSequenceRows ? this.runtime.activeSpinState.finaleSequenceRows.map((n) => P(n)) : this.runtime.activeSpinState?.finaleSequence ?? [];
+        this.scriptedCascadeQueue = i.map((n) => n.map((o) => [...o])), this.clearWinningCells();
+        const s = this.runtime.activeSpinState?.stopRows ? P(this.runtime.activeSpinState.stopRows) : this.runtime.activeSpinState?.stopGrid, r = this.getNextGrid(s);
+        this.startOutroTransition(r, t);
       }
       if (this.runtime.phase === "outro") {
-        this.updateScriptedOutro(i);
+        this.updateScriptedOutro(t);
         return;
       }
       if (this.runtime.phase === "winFlash") {
-        !this.runtime.shouldHighlightCurrentSpin && i - this.runtime.winFlashStartedAt >= K && this.finishSpinWithUi();
+        !this.runtime.shouldHighlightCurrentSpin && t - this.runtime.winFlashStartedAt >= k && this.finishSpinWithUi();
         return;
       }
     }
   }
-  updateScriptedOutro(i) {
+  updateScriptedOutro(t) {
     if (!this.scriptedOutgoingGrid || !this.scriptedPendingGrid) {
       this.finishSpinWithUi();
       return;
     }
-    const { allOutgoingDone: e, allIncomingDone: n } = ht({
-      now: i,
+    this.outroMotionPlan || (this.outroMotionPlan = N({
       height: this.height,
       boardY: this.boardY,
-      cellH: this.cellH,
+      cellH: this.cellH
+    }));
+    const i = this.getSmoothedOutroNow(t), { allOutgoingDone: s, allIncomingDone: r } = j({
+      now: i,
       scriptedOutroStartedAt: this.scriptedOutroStartedAt,
       scriptedOutgoingOffsets: this.scriptedOutgoingOffsets,
-      scriptedIncomingOffsets: this.scriptedIncomingOffsets
+      scriptedIncomingOffsets: this.scriptedIncomingOffsets,
+      motionPlan: this.outroMotionPlan
     });
-    if (!(!e || !n)) {
+    if (!(!s || !r)) {
       if (!this.scriptedPendingGrid) {
         this.finishSpinWithUi();
         return;
       }
-      if (this.grid = this.scriptedPendingGrid, this.scriptedOutgoingGrid = null, this.scriptedPendingGrid = null, this.clearWinningCells(), W(this.scriptedOutgoingOffsets, 0), W(this.scriptedIncomingOffsets, 0), !this.tryStartScriptedCascade(i)) {
+      if (this.grid = this.scriptedPendingGrid, this.scriptedOutgoingGrid = null, this.scriptedPendingGrid = null, this.outroMotionPlan = null, this.clearWinningCells(), I(this.scriptedOutgoingOffsets, 0), I(this.scriptedIncomingOffsets, 0), !this.tryStartScriptedCascade(t)) {
         if (!this.runtime.shouldHighlightCurrentSpin) {
           this.finishSpinWithUi();
           return;
         }
-        this.winningCells = T(this.grid), q(this.runtime, i), this.runtime.activeSpinState?.callback?.(), this.button && this.runtime.shouldHighlightCurrentSpin && this.spinQueueController.hasPending() && (this.button.disabled = !1);
+        this.setWinningCells(F(this.grid)), U(this.runtime, t), this.runtime.activeSpinState?.callback?.(), this.button && this.runtime.shouldHighlightCurrentSpin && this.spinQueueController.hasPending() && (this.button.disabled = !1);
       }
     }
   }
-  tryStartScriptedCascade(i) {
+  tryStartScriptedCascade(t) {
     if (this.scriptedCascadeQueue.length === 0) return !1;
-    const e = this.scriptedCascadeQueue.shift();
-    return e ? (this.startOutroTransition(P(e, this.spriteElementsCount), i), !0) : !1;
+    const i = this.scriptedCascadeQueue.shift();
+    return i ? (this.startOutroTransition(v(i, this.spriteElementsCount), t), !0) : !1;
+  }
+  startOutroTransition(t, i) {
+    this.scriptedOutgoingGrid = this.grid.map((s) => [...s]), this.scriptedPendingGrid = t.map((s) => [...s]), this.outroMotionPlan = N({
+      height: this.height,
+      boardY: this.boardY,
+      cellH: this.cellH
+    }), I(this.scriptedIncomingOffsets, Number.NaN), I(this.scriptedOutgoingOffsets, 0), this.clearWinningCells(), this.runtime.phase = "outro", this.scriptedOutroStartedAt = i, this.scriptedOutroVirtualElapsedMs = 0, this.scriptedOutroLastNow = i;
   }
-  startOutroTransition(i, e) {
-    this.scriptedOutgoingGrid = this.grid.map((n) => [...n]), this.scriptedPendingGrid = i.map((n) => [...n]), W(this.scriptedIncomingOffsets, Number.NaN), W(this.scriptedOutgoingOffsets, 0), this.clearWinningCells(), this.runtime.phase = "outro", this.scriptedOutroStartedAt = e;
+  getSmoothedOutroNow(t) {
+    const i = Math.max(0, t - this.scriptedOutroLastNow);
+    this.scriptedOutroLastNow = t;
+    const s = Math.min(i, u.OUTRO_MAX_STEP_MS);
+    return this.scriptedOutroVirtualElapsedMs += s, this.scriptedOutroStartedAt + this.scriptedOutroVirtualElapsedMs;
   }
   /** @param skipCallback true при закрытии подсветки по клику (callback уже вызван по окончании прокрутки) */
-  finishSpinWithUi(i = !1) {
-    const e = this.runtime.activeSpinState, n = i ? void 0 : e?.callback, l = this.spinQueueController.hasPending();
-    wt(this.runtime, l, performance.now()), this.button && (this.button.disabled = this.runtime.queueFinished), n?.();
+  finishSpinWithUi(t = !1) {
+    const i = this.runtime.activeSpinState, s = t ? void 0 : i?.callback, r = this.spinQueueController.hasPending();
+    ot(this.runtime, r, performance.now()), this.button && (this.button.disabled = this.runtime.queueFinished), s?.();
   }
   applyInitialHighlightIfNeeded() {
-    this.highlightInitialWinningCells && (this.winningCells = T(this.grid), this.initialHighlightRequestedAt = performance.now());
+    this.highlightInitialWinningCells && (this.setWinningCells(F(this.grid)), this.initialHighlightRequestedAt = performance.now());
   }
-  static ZERO_SWAY = [0, 0, 0];
-  render(i) {
-    this.initialHighlightRequestedAt > 0 && i - this.initialHighlightRequestedAt >= nt && (q(this.runtime, this.initialHighlightRequestedAt), this.runtime.winEffectsEnvelope = 1, this.initialHighlightRequestedAt = 0, this.button && (this.button.disabled = !1));
-    const e = this.runtime.phase === "outro" || this.runtime.phase === "preSpin" ? 0 : 1, n = this.runtime.phase === "preSpin" ? 0 : this.runtime.phase === "winFlash" ? 1 : 0;
+  render(t) {
+    if (!this.webglRenderer) return;
+    this.initialHighlightRequestedAt > 0 && t - this.initialHighlightRequestedAt >= K && (U(this.runtime, this.initialHighlightRequestedAt), this.runtime.winEffectsEnvelope = 1, this.initialHighlightRequestedAt = 0, this.button && (this.button.disabled = !1));
+    const i = this.runtime.phase === "preSpin" ? 0 : this.runtime.phase === "winFlash" ? 1 : 0;
     if (this.lastRafTime > 0) {
-      const u = Math.min(i - this.lastRafTime, 50), o = 1 - Math.exp(-u / C.SWAY_ENVELOPE_TAU_MS);
-      this.runtime.swayEnvelope += (e - this.runtime.swayEnvelope) * o;
-      const h = 1 - Math.exp(-u / C.WIN_EFFECTS_ENVELOPE_TAU_MS);
-      this.runtime.winEffectsEnvelope += (n - this.runtime.winEffectsEnvelope) * h;
+      const h = Math.min(t - this.lastRafTime, 50), l = 1 - Math.exp(-h / u.WIN_EFFECTS_ENVELOPE_TAU_MS);
+      this.runtime.winEffectsEnvelope += (i - this.runtime.winEffectsEnvelope) * l;
     }
-    this.lastRafTime = i, this.ctx.clearRect(0, 0, this.width, this.height), this.runtime.phase === "outro" && this.scriptedOutgoingGrid && this.scriptedPendingGrid ? (this.drawLayer(
-      this.scriptedOutgoingGrid,
-      this.scriptedOutgoingOffsets,
-      C.ZERO_SWAY,
-      i
-    ), this.drawLayer(
-      this.scriptedPendingGrid,
-      this.scriptedIncomingOffsets,
-      C.ZERO_SWAY,
-      i
-    )) : this.drawBaseGrid(i);
-    const l = this.initialHighlightRequestedAt > 0 ? "winFlash" : this.runtime.phase, s = this.initialHighlightRequestedAt > 0 ? this.initialHighlightRequestedAt : this.runtime.winFlashStartedAt, r = this.initialHighlightRequestedAt > 0 ? 1 : this.runtime.winEffectsEnvelope;
-    U({
-      ctx: this.ctx,
-      now: i,
-      phase: l,
-      winFlashStartedAt: s,
-      winEffectsEnvelope: r,
-      winningCells: this.winningCells,
-      boardX: this.boardX,
-      boardY: this.boardY,
-      cellW: this.cellW,
-      cellH: this.cellH,
-      particlesPerCell: this.runtime.phase === "winFlash" && this.runtime.shouldHighlightCurrentSpin && this.runtime.hasStartedFirstSpin ? this.particlesPerCell : 0,
-      particleColorMode: this.particleColorMode,
-      particleColorRgb: this.particleColorRgb,
-      winningCellBorderRgba: this.winningCellBorderRgba,
-      getCell: this.getCell,
-      drawSpriteCell: this.drawSpriteCell
+    this.lastRafTime = t, this.webglRenderer.beginFrame();
+    const s = this.runtime.phase === "winFlash" || this.runtime.phase === "preSpin" || this.initialHighlightRequestedAt > 0 && this.winningCells.length > 0;
+    this.runtime.phase === "outro" && this.scriptedOutgoingGrid && this.scriptedPendingGrid ? (this.drawGrid(this.scriptedOutgoingGrid, this.scriptedOutgoingOffsets, s), this.drawGrid(this.scriptedPendingGrid, this.scriptedIncomingOffsets, s)) : this.drawGrid(this.grid, null, s);
+    const r = this.initialHighlightRequestedAt > 0 ? "winFlash" : this.runtime.phase, n = this.initialHighlightRequestedAt > 0 ? this.initialHighlightRequestedAt : this.runtime.winFlashStartedAt, o = this.initialHighlightRequestedAt > 0 ? 1 : this.runtime.winEffectsEnvelope;
+    this.drawWinningEffects({
+      now: t,
+      phase: r,
+      winFlashStartedAt: n,
+      winEffectsEnvelope: o
     });
   }
-  drawBaseGrid(i) {
-    this.drawLayer(this.grid, null, C.ZERO_SWAY, i);
+  isWinningCell = (t, i) => this.winningCellKeys.has(`${t}:${i}`);
+  getRowCompactOffset(t) {
+    return (q[t] ?? 0) * this.cellH;
+  }
+  drawGrid(t, i, s) {
+    const r = this.webglRenderer;
+    if (r)
+      for (let n = 0; n < 3; n += 1) {
+        const o = this.boardX + n * this.cellW;
+        for (let h = 0; h < 3; h += 1) {
+          if (s && this.isWinningCell(n, h)) continue;
+          const l = i ? i[n][h] : 0;
+          if (!Number.isFinite(l)) continue;
+          const c = this.boardY + h * this.cellH + l + this.getRowCompactOffset(h);
+          c > this.height || c + this.cellH < 0 || r.drawSprite(t[n][h], o, c, this.cellW, this.cellH, 1);
+        }
+      }
   }
-  drawLayer(i, e, n, l) {
-    const s = this.runtime.phase === "winFlash" || this.runtime.phase === "preSpin" || this.initialHighlightRequestedAt > 0 && this.winningCells.length > 0;
-    Et({
-      ctx: this.ctx,
-      phase: this.runtime.phase,
-      now: l,
-      swayEnvelope: this.runtime.swayEnvelope,
-      grid: i,
-      offsets: e,
-      columnSway: n,
-      boardX: this.boardX,
-      boardY: this.boardY,
-      cellW: this.cellW,
-      cellH: this.cellH,
-      width: this.width,
-      height: this.height,
-      skipWinningCells: s,
-      isWinningCell: this.isWinningCell,
-      drawSpriteCell: this.drawSpriteCell
-    });
+  drawWinningEffects(t) {
+    const i = this.webglRenderer;
+    if (!i || this.winningCells.length === 0 || t.phase !== "winFlash" && t.phase !== "preSpin") return;
+    const s = Math.max(0, Math.min(1, t.winEffectsEnvelope)), r = Math.max(0, t.now - t.winFlashStartedAt), n = r % W / W, o = 1 + Math.sin(n * Math.PI * 2) * Y * s, h = Math.max(1, this.cellW * u.WIN_BORDER_INSET_RATIO), l = Math.max(1, this.cellW * 0.03), c = this.runtime.phase === "winFlash" && this.runtime.shouldHighlightCurrentSpin && this.runtime.hasStartedFirstSpin;
+    for (const a of this.winningCells) {
+      const d = this.boardX + a.col * this.cellW, g = this.boardY + a.row * this.cellH + this.getRowCompactOffset(a.row), p = this.grid[a.col][a.row], S = u.WIN_BORDER_ALPHA * s, f = this.particleColorMode === "rainbow" ? u.hslToRgb01(
+        (r * 0.2 + a.col * 36 + a.row * 22) % 360,
+        0.96,
+        0.64
+      ) : [
+        this.particleColorRgb[0] / 255,
+        this.particleColorRgb[1] / 255,
+        this.particleColorRgb[2] / 255
+      ], _ = this.cellW * o, m = this.cellH * o, R = (this.cellW - _) * 0.5, B = (this.cellH - m) * 0.5;
+      i.drawSprite(p, d + R, g + B, _, m, 1);
+      const E = d + h, w = g + h, O = this.cellW - h * 2, A = this.cellH - h * 2;
+      O <= l * 2 || A <= l * 2 || (i.drawSolidRect(E, w, O, l, [
+        f[0],
+        f[1],
+        f[2],
+        S
+      ]), i.drawSolidRect(E, w + A - l, O, l, [
+        f[0],
+        f[1],
+        f[2],
+        S
+      ]), i.drawSolidRect(E, w, l, A, [
+        f[0],
+        f[1],
+        f[2],
+        S
+      ]), i.drawSolidRect(E + O - l, w, l, A, [
+        f[0],
+        f[1],
+        f[2],
+        S
+      ]), c && this.drawCellParticleBurst({
+        renderer: i,
+        cell: a,
+        centerX: d + this.cellW * 0.5,
+        centerY: g + this.cellH * 0.5,
+        elapsed: r,
+        envelope: s
+      }));
+    }
   }
-  getCell = (i, e) => this.grid[i][e];
-  isWinningCell = (i, e) => this.winningCells.some((n) => n.col === i && n.row === e);
-  drawSpriteCellToCtx(i, e, n, l, s, r) {
-    const u = this.spriteImage;
-    if (!u) return;
-    const o = A(e, this.spriteElementsCount), h = u.height / this.spriteElementsCount, a = Math.floor(o * h), c = Math.floor(h);
-    i.drawImage(u, 0, a, u.width, c, n, l, s, r);
+  drawCellParticleBurst(t) {
+    const i = Math.min(this.cellW, this.cellH) * u.PARTICLE_MAX_DISTANCE, s = Math.min(this.cellW, this.cellH) * u.PARTICLE_BASE_RADIUS, r = u.getParticleSeeds(t.cell.col, t.cell.row), n = [
+      this.particleColorRgb[0] / 255,
+      this.particleColorRgb[1] / 255,
+      this.particleColorRgb[2] / 255
+    ];
+    t.renderer.beginAdditiveBlend();
+    for (let o = 0; o < this.particlesPerCell; o += 1) {
+      const h = r[o], l = h.phaseOffset * T, c = t.elapsed - l;
+      if (c < 0) continue;
+      const a = c % T / T, d = h.seedA * Math.PI * 2, g = i * a * (0.35 + h.seedB * 0.65), p = t.centerX + Math.cos(d) * g, S = t.centerY + Math.sin(d) * g, f = 0.7 + 0.9 * Math.max(0, Math.sin((t.elapsed * 0.012 + h.twinkleSeed * 2) * Math.PI * 2)), _ = Math.max(1, s * (0.55 + h.seedC * 0.6) * (1 - a * 0.5)), m = Math.max(
+        0,
+        Math.min(1, (0.9 + f * 0.2) * u.PARTICLE_GLOBAL_ALPHA * t.envelope)
+      );
+      if (m <= 0) continue;
+      const R = this.particleColorMode === "rainbow" ? u.getRainbowParticleColor(
+        t.elapsed,
+        t.cell.col,
+        t.cell.row,
+        h.seedA
+      ) : n;
+      t.renderer.drawSoftCircle(p, S, _, [R[0], R[1], R[2], m]);
+    }
+    t.renderer.endAdditiveBlend();
+  }
+  static hslToRgb01(t, i, s) {
+    const r = (t % 360 + 360) % 360, n = Math.max(0, Math.min(1, i)), o = Math.max(0, Math.min(1, s)), h = (1 - Math.abs(2 * o - 1)) * n, l = r / 60, c = h * (1 - Math.abs(l % 2 - 1));
+    let a = 0, d = 0, g = 0;
+    l >= 0 && l < 1 ? (a = h, d = c) : l < 2 ? (a = c, d = h) : l < 3 ? (d = h, g = c) : l < 4 ? (d = c, g = h) : l < 5 ? (a = c, g = h) : (a = h, g = c);
+    const p = o - h * 0.5;
+    return [a + p, d + p, g + p];
+  }
+  static getRainbowParticleColor(t, i, s, r) {
+    const n = (r * 360 + t * 0.24 + i * 38 + s * 22) % 360, o = 360 / u.RAINBOW_HUE_BUCKETS, h = Math.floor(n / o) * o;
+    return u.hslToRgb01(h, 0.98, 0.64);
+  }
+  static hash01(t, i, s, r) {
+    const n = Math.sin(t * 127.1 + i * 311.7 + s * 74.7 + r * 19.3) * 43758.5453;
+    return n - Math.floor(n);
+  }
+  static getParticleSeeds(t, i) {
+    const s = `${t},${i}`, r = u.particleSeedsCache.get(s);
+    if (r) return r;
+    const n = [];
+    for (let o = 0; o < G; o += 1)
+      n.push({
+        seedA: u.hash01(t, i, o, 1),
+        seedB: u.hash01(t, i, o, 2),
+        seedC: u.hash01(t, i, o, 3),
+        phaseOffset: u.hash01(t, i, o, 4),
+        twinkleSeed: u.hash01(t, i, o, 5)
+      });
+    return u.particleSeedsCache.set(s, n), n;
   }
-  drawSpriteCell = (i, e, n, l, s) => {
-    this.drawSpriteCellToCtx(this.ctx, i, e, n, l, s);
-  };
   clearWinningCells() {
-    this.winningCells = [];
+    this.winningCells = [], this.winningCellKeys.clear();
+  }
+  setWinningCells(t) {
+    this.winningCells = t, this.winningCellKeys.clear();
+    for (const i of t)
+      this.winningCellKeys.add(`${i.col}:${i.row}`);
   }
   resize = () => {
-    const i = this.container.getBoundingClientRect();
+    const t = this.container.getBoundingClientRect();
     this.dpr = Math.max(1, Math.min(window.devicePixelRatio || 1, 2));
-    const e = Math.max(300, Math.floor(i.width * this.dpr));
-    this.width = e, this.height = e;
-    const n = Math.floor(Math.min(this.width / 3, this.height / 3));
-    this.cellW = n, this.cellH = n, this.boardX = Math.floor((this.width - this.cellW * 3) / 2), this.boardY = Math.floor((this.height - this.cellH * 3) / 2), this.quality === "high" ? this.particlesPerCell = b : this.quality === "balanced" ? this.particlesPerCell = x : this.quality === "low" ? this.particlesPerCell = v : this.particlesPerCell = this.dpr >= 2 ? x : b, this.canvas.width = this.width, this.canvas.height = this.height;
+    const i = Math.max(300, Math.floor(t.width * this.dpr));
+    this.width = i, this.height = i;
+    const s = Math.floor(Math.min(this.width / 3, this.height / 3));
+    this.cellW = s, this.cellH = s, this.boardX = Math.floor((this.width - this.cellW * 3) / 2), this.boardY = Math.floor((this.height - this.cellH * 3) / 2), this.canvas.width = this.width, this.canvas.height = this.height, this.webglRenderer?.resize(this.width, this.height);
   };
   async loadSpriteIfProvided() {
     if (!this.spriteUrl) return;
-    const i = new Image();
-    i.decoding = "async", i.src = this.spriteUrl;
+    const t = new Image();
+    t.decoding = "async", t.src = this.spriteUrl;
     try {
-      await i.decode(), this.spriteImage = i;
+      await t.decode(), this.spriteImage = t;
     } catch {
       this.spriteImage = null;
     }
   }
-  prewarmWinEffects() {
-    if (this.winningCells.length === 0) return;
-    const i = document.createElement("canvas");
-    i.width = this.width, i.height = this.height;
-    const e = i.getContext("2d");
-    if (!e) return;
-    const n = this.runtime.phase, l = this.runtime.winFlashStartedAt;
-    this.runtime.phase = "winFlash", this.runtime.winFlashStartedAt = performance.now() - 300;
-    const s = performance.now(), r = Math.min(this.particlesPerCell, v), u = (o, h, a, c, d) => {
-      this.drawSpriteCellToCtx(e, o, h, a, c, d);
-    };
-    for (let o = 0; o < 2; o += 1)
-      U({
-        ctx: e,
-        now: s + o * 16,
-        phase: "winFlash",
-        winFlashStartedAt: this.runtime.winFlashStartedAt,
-        winEffectsEnvelope: 1,
-        winningCells: this.winningCells,
-        boardX: this.boardX,
-        boardY: this.boardY,
-        cellW: this.cellW,
-        cellH: this.cellH,
-        particlesPerCell: r,
-        particleColorMode: this.particleColorMode,
-        particleColorRgb: this.particleColorRgb,
-        winningCellBorderRgba: this.winningCellBorderRgba,
-        getCell: this.getCell,
-        drawSpriteCell: u
-      });
-    this.runtime.phase = n, this.runtime.winFlashStartedAt = l;
-  }
   startLoop() {
-    this.rafLoop.isRunning() || this.rafLoop.start((i) => (this.update(i), this.render(i), !0));
+    this.rafLoop.isRunning() || this.rafLoop.start((t) => (this.update(t), this.render(t), this.shouldKeepAnimating()));
+  }
+  shouldKeepAnimating() {
+    return this.runtime.isSpinning || this.initialHighlightRequestedAt > 0 ? !0 : this.runtime.winEffectsEnvelope > 1e-3;
   }
 }
 export {
-  C as CascadingReel
+  u as CascadingReel
 };
 //# sourceMappingURL=index.es.js.map