reel-deal 0.1.0-dev.1 → 0.1.1

package/dist/index.es.js

@@ -1,73 +1,68 @@
-const b = {
+const T = {
   minSpins: 2,
   durationMs: 4e3,
   speedPxS: 4e3,
   staggerMs: 300
-}, y = {
-  warpAngleDeg: 90,
-  edgePower: 0.5
-}, I = {
+}, C = {
   maxPx: 4,
   speedAtMax: 2200
-}, g = {
-  amplitudePx: 8,
+}, E = {
+  amplitudePx: 9,
   speedHz: 0.25,
   phaseOffsetRad: 0.9,
-  delayMs: 500,
   rampMs: 800
-}, L = 0.1, x = 0.6, B = (a, e, i) => Math.max(e, Math.min(i, Math.floor(a))), P = (a, e) => (a % e + e) % e, v = (a) => Math.max(0, Math.min(1, a)), U = (a) => {
-  const e = v(a);
-  return e ** 2 * (2 - e);
-}, G = (a) => {
-  const e = v(a);
-  return e + e ** 2 - e ** 3;
-}, X = (a) => {
-  const e = v(a);
-  if (e <= L) {
-    const s = e / L;
-    return U(s) * L;
-  }
-  if (e < x)
-    return e;
-  const i = (e - x) / (1 - x);
-  return x + G(i) * (1 - x);
-}, E = (a, e) => typeof a == "number" && Number.isFinite(a) ? a : e, m = (a, e) => Math.max(0, E(a, e)), p = (a, e) => Math.max(0, Math.floor(E(a, e))), z = 2, D = (a) => {
-  const e = { ...b, ...a ?? {} };
-  return {
-    minSpins: p(e.minSpins, b.minSpins),
-    durationMs: p(e.durationMs, b.durationMs ?? 0),
-    speedPxS: p(e.speedPxS, b.speedPxS ?? 0),
-    staggerMs: p(e.staggerMs, b.staggerMs ?? 0)
-  };
-}, N = (a) => {
-  const e = { ...I, ...a ?? {} };
+}, B = 0.1, A = 0.6, O = (a, t, s) => Math.max(t, Math.min(s, Math.floor(a))), I = (a, t) => (a % t + t) % t, v = (a) => Math.max(0, Math.min(1, a)), F = (a) => {
+  const t = v(a);
+  return t ** 2 * (2 - t);
+}, $ = (a) => {
+  const t = v(a);
+  return t + t ** 2 - t ** 3;
+}, Q = (a) => {
+  const t = v(a);
+  if (t <= B) {
+    const i = t / B;
+    return F(i) * B;
+  }
+  if (t < A)
+    return t;
+  const s = (t - A) / (1 - A);
+  return A + $(s) * (1 - A);
+}, L = (a, t) => typeof a == "number" && Number.isFinite(a) ? a : t, _ = (a, t) => Math.max(0, L(a, t)), w = (a, t) => Math.max(0, Math.floor(L(a, t))), K = 2, X = (a) => {
+  const t = { ...T, ...a ?? {} };
   return {
-    maxPx: m(e.maxPx, I.maxPx),
-    speedAtMax: m(e.speedAtMax, I.speedAtMax)
+    minSpins: w(t.minSpins, T.minSpins),
+    durationMs: w(t.durationMs, T.durationMs ?? 0),
+    speedPxS: w(t.speedPxS, T.speedPxS ?? 0),
+    staggerMs: w(t.staggerMs, T.staggerMs ?? 0)
   };
-}, F = (a) => {
-  const e = { ...y, ...a ?? {} };
+}, Z = (a) => {
+  const t = { ...C, ...a ?? {} };
   return {
-    warpAngleDeg: m(e.warpAngleDeg, y.warpAngleDeg),
-    edgePower: m(e.edgePower, y.edgePower)
+    maxPx: _(t.maxPx, C.maxPx),
+    speedAtMax: _(t.speedAtMax, C.speedAtMax)
   };
-}, V = (a) => {
+}, j = (a) => {
   if (a === !1) return null;
-  const e = { ...g, ...a ?? {} };
+  const t = { ...E, ...a ?? {} };
   return {
-    amplitudePx: m(e.amplitudePx, g.amplitudePx),
-    speedHz: m(e.speedHz, g.speedHz),
-    phaseOffsetRad: E(e.phaseOffsetRad, g.phaseOffsetRad),
-    delayMs: p(e.delayMs, g.delayMs),
-    rampMs: p(e.rampMs, g.rampMs)
+    amplitudePx: _(t.amplitudePx, E.amplitudePx),
+    speedHz: _(t.speedHz, E.speedHz),
+    phaseOffsetRad: L(t.phaseOffsetRad, E.phaseOffsetRad),
+    rampMs: w(t.rampMs, E.rampMs)
   };
-}, k = (a) => Math.max(1, E(a, z)), Y = (a, e) => {
-  const i = document.getElementById(a);
-  if (!i)
-    throw new Error(`${e} not found: ${a}`);
-  return i;
-}, H = (a, e) => typeof a == "string" ? Y(a, e) : a, q = 5, C = 0.72, $ = 0.28, Q = 7, W = 0.85, K = 1 - W;
-class j {
+}, J = (a) => Math.max(1, L(a, K)), tt = (a, t) => {
+  const s = document.getElementById(a);
+  if (!s)
+    throw new Error(`${t} not found: ${a}`);
+  return s;
+}, U = (a, t) => typeof a == "string" ? tt(a, t) : a, et = 5, z = 0.72, st = 0.28, it = 7, V = 0.85, rt = 1 - V, nt = 55, at = 300, ot = 1.25, lt = 0.35, N = {
+  warpAngleDeg: 60,
+  edgePower: 4.8
+}, ht = (a) => ({
+  warpAngleDeg: _(a?.warpAngleDeg, N.warpAngleDeg),
+  edgePower: _(a?.edgePower, N.edgePower)
+});
+class ut {
   canvas;
   container;
   opts;
@@ -109,8 +104,8 @@ class j {
   buttonHandlerAttached = !1;
   spinning = !1;
   queuedSpins = null;
-  constructor(e) {
-    this.opts = e, this.reels = B(e.reels ?? 1, 1, q), this.spinConfig = D(e.spinConfig), this.spinBlur = N(e.spinBlur), this.webglShading = F(e.webglShading), this.idleBob = V(e.idleBob), this.maxDpr = k(e.maxDpr), this.canvas = H(e.canvas, "Canvas"), this.container = H(e.container, "Container"), this.offsets = new Array(this.reels).fill(0), this.velocities = new Array(this.reels).fill(0), this.lastVelOffsets = new Array(this.reels).fill(0), this.idleBaseOffsets = new Array(this.reels).fill(0);
+  constructor(t) {
+    this.opts = t, this.reels = O(t.reels ?? 1, 1, et), this.spinConfig = X(t.spinConfig), this.spinBlur = Z(t.spinBlur), this.webglShading = ht(t.webglShading), this.idleBob = j(t.idleBob), this.maxDpr = J(t.maxDpr), this.canvas = U(t.canvas, "Canvas"), this.container = U(t.container, "Container"), this.offsets = new Array(this.reels).fill(0), this.velocities = new Array(this.reels).fill(0), this.lastVelOffsets = new Array(this.reels).fill(0), this.idleBaseOffsets = new Array(this.reels).fill(0);
   }
   async init() {
     if (await this.loadSprite(), this.tryInitWebGL(), !this.gl)
@@ -126,70 +121,93 @@ class j {
     this.canvas !== this.container && this.container.contains(this.canvas) && (this.canvas.style.width || (this.canvas.style.width = "100%"), this.canvas.style.height || (this.canvas.style.height = "100%"), this.canvas.style.display || (this.canvas.style.display = "block"));
   }
   syncContainerLayoutVars() {
-    const e = this.canvas === this.container ? this.canvas : this.container;
-    e.style.setProperty("--reels", String(this.reels)), e.style.setProperty("--visible-slots", String(this.visibleSlots)), e.style.aspectRatio = `${this.reels} / ${this.visibleSlots * this.heightScale}`, this.canvas !== this.container && (this.container.style.overflow = "hidden");
+    const t = this.canvas === this.container ? this.canvas : this.container;
+    t.style.setProperty("--reels", String(this.reels)), t.style.setProperty("--visible-slots", String(this.visibleSlots)), t.style.aspectRatio = `${this.reels} / ${this.visibleSlots * this.heightScale}`, this.canvas !== this.container && (this.container.style.overflow = "hidden");
   }
-  setSegments(e) {
+  setSegments(t) {
     this.ensureReady();
-    const i = e ?? [];
-    for (let s = 0; s < this.reels; s += 1) {
-      const t = i[s] ?? 0, r = B(t, 0, this.opts.slotCount - 1);
-      this.offsets[s] = r * this.frameHeight - this.centerIndex * this.frameHeight, this.lastVelOffsets[s] = this.offsets[s], this.velocities[s] = 0, this.idleBaseOffsets[s] = this.offsets[s];
+    const s = t ?? [];
+    for (let i = 0; i < this.reels; i += 1) {
+      const e = s[i] ?? 0, r = O(e, 0, this.opts.slotCount - 1);
+      this.offsets[i] = r * this.frameHeight - this.centerIndex * this.frameHeight, this.lastVelOffsets[i] = this.offsets[i], this.velocities[i] = 0, this.idleBaseOffsets[i] = this.offsets[i];
     }
     this.lastVelT = null, this.idleStartTime = null, this.anim = null, this.stop(), this.render(), this.startLoop();
   }
-  setSegment(e) {
-    this.setSegments(new Array(this.reels).fill(e));
+  setSegment(t) {
+    this.setSegments(new Array(this.reels).fill(t));
   }
-  spinOnce(e, i) {
+  spinOnce(t, s) {
     this.ensureReady();
-    const { minSpins: s, staggerMs: t, speedPxS: r, durationMs: o } = this.getSpinConfig(i), n = r > 0, c = new Array(this.reels), f = new Array(this.reels), u = new Array(this.reels);
-    for (let l = 0; l < this.reels; l += 1) {
-      const T = B(e[l] ?? 0, 0, this.opts.slotCount - 1) * this.frameHeight - this.centerIndex * this.frameHeight, A = P(T, this.spriteHeight), O = P(this.offsets[l], this.spriteHeight), w = P(O - A, this.spriteHeight);
-      let _ = -(s * this.spriteHeight + w);
-      if (n && o > 0) {
-        const M = r * o / 1e3, R = Math.max(
-          s,
-          Math.ceil(Math.max(0, M - w) / this.spriteHeight)
+    const { minSpins: i, staggerMs: e, speedPxS: r, durationMs: l } = this.getSpinConfig(s), u = r > 0, f = this.getStopSpringOvershootPx(), c = Math.max(0, at), n = c > 0 && f > 0, h = new Array(this.reels), g = new Array(this.reels), p = new Array(this.reels), d = new Array(this.reels), m = new Array(this.reels);
+    for (let o = 0; o < this.reels; o += 1) {
+      const Y = O(t[o] ?? 0, 0, this.opts.slotCount - 1) * this.frameHeight - this.centerIndex * this.frameHeight, k = I(Y, this.spriteHeight), q = I(this.offsets[o], this.spriteHeight), H = I(q - k, this.spriteHeight);
+      let b = -(i * this.spriteHeight + H);
+      if (u && l > 0) {
+        const R = r * l / 1e3, P = Math.max(
+          i,
+          Math.ceil(Math.max(0, R - H) / this.spriteHeight)
         );
-        _ = -(w + R * this.spriteHeight);
+        b = -(H + P * this.spriteHeight);
+      }
+      if (e > 0 && u) {
+        const R = r * e * o / 1e3, P = Math.ceil(R / this.spriteHeight);
+        b -= P * this.spriteHeight;
       }
-      if (t > 0 && n) {
-        const M = r * t * l / 1e3, R = Math.ceil(M / this.spriteHeight);
-        _ -= R * this.spriteHeight;
+      h[o] = this.offsets[o], m[o] = this.offsets[o] + b;
+      let D = b, G = 0;
+      if (n && b !== 0 && f > 0) {
+        const P = Math.sign(b) * f;
+        D += P, G = c;
       }
-      c[l] = this.offsets[l], f[l] = _, n ? u[l] = Math.max(0, Math.round(Math.abs(_) / r * 1e3)) : u[l] = Math.max(0, o + t * l);
+      g[o] = D, d[o] = G, u ? p[o] = Math.max(0, Math.round(Math.abs(D) / r * 1e3)) : p[o] = Math.max(0, l + e * o);
     }
-    if (f.reduce((l, S) => l + Math.abs(S), 0) === 0 || u.every((l) => l <= 0)) {
-      for (let l = 0; l < this.reels; l += 1)
-        this.offsets[l] = this.offsets[l] + f[l];
+    const S = g.reduce((o, M) => o + Math.abs(M), 0), x = p.every((o) => o <= 0), W = d.every((o) => o <= 0);
+    if (S === 0 || x && W) {
+      for (let o = 0; o < this.reels; o += 1)
+        this.offsets[o] = m[o];
       return this.anim = null, this.resolvePendingSpins(), this.render(), Promise.resolve();
     }
-    const h = performance.now();
-    return this.anim = { startTime: h, startOffsets: c, deltas: f, durationMs: u }, this.idleStartTime = null, this.startLoop(), new Promise((l) => {
-      this.pendingSpinResolvers.push(l);
+    const y = performance.now();
+    return this.anim = {
+      startTime: y,
+      startOffsets: h,
+      deltas: g,
+      durationMs: p,
+      settleDurationMs: d,
+      targets: m
+    }, this.idleStartTime = null, this.startLoop(), new Promise((o) => {
+      this.pendingSpinResolvers.push(o);
     });
   }
-  getSpinConfig(e) {
-    return e ? D({ ...this.spinConfig, ...e }) : this.spinConfig;
+  getSpinConfig(t) {
+    return t ? X({ ...this.spinConfig, ...t }) : this.spinConfig;
+  }
+  getStopSpringOvershootPx() {
+    const t = this.frameHeight * lt, s = Math.max(0, nt);
+    return Math.min(s, t);
   }
-  async spinQueue(e) {
-    for (let i = 0; i < e.length; i += 1) {
-      const s = e[i];
-      await this.spinOnce(s.stopAtSegments), s.callback?.(i, s.stopAtSegments);
+  getStopSpringOffset(t, s) {
+    if (t === 0) return 0;
+    const i = Math.exp(-5 * s), e = Math.PI * 2 * ot * s;
+    return t * i * Math.cos(e);
+  }
+  async spinQueue(t) {
+    for (let s = 0; s < t.length; s += 1) {
+      const i = t[s];
+      await this.spinOnce(i.stopAtSegments), i.callback?.(s, i.stopAtSegments);
     }
   }
   stop() {
     this.rafId !== null && cancelAnimationFrame(this.rafId), this.rafId = null, this.anim = null, this.resolvePendingSpins(), this.lastVelT = null;
-    for (let e = 0; e < this.reels; e += 1)
-      this.velocities[e] = 0;
+    for (let t = 0; t < this.reels; t += 1)
+      this.velocities[t] = 0;
   }
   resolvePendingSpins() {
     if (this.pendingSpinResolvers.length === 0) return;
-    const e = this.pendingSpinResolvers;
+    const t = this.pendingSpinResolvers;
     this.pendingSpinResolvers = [];
-    for (const i of e)
-      i();
+    for (const s of t)
+      s();
   }
   requestResize() {
     this.queueResize();
@@ -203,18 +221,18 @@ class j {
   }
   handleButtonClick = async () => {
     if (this.spinning) return;
-    const e = this.consumeNextSpin() ?? {
+    const t = this.consumeNextSpin() ?? {
       stopAtSegments: this.buildRandomSegments()
     };
     this.spinning = !0, this.setButtonDisabled(!0);
     try {
-      await this.spinOnce(e.stopAtSegments);
+      await this.spinOnce(t.stopAtSegments);
     } finally {
       this.queuedSpins && this.queuedSpins.length === 0 ? this.setButtonDisabled(!0) : this.setButtonDisabled(!1), this.spinning = !1;
     }
   };
   resolveButton() {
-    return this.opts.button ? H(this.opts.button, "Button") : null;
+    return this.opts.button ? U(this.opts.button, "Button") : null;
   }
   resolveSpinQueue() {
     return this.opts.queuedSpinStates ?? null;
@@ -223,13 +241,13 @@ class j {
     return this.queuedSpins || (this.queuedSpins = this.resolveSpinQueue()), !this.queuedSpins || this.queuedSpins.length === 0 ? null : this.queuedSpins.shift() ?? null;
   }
   buildRandomSegments() {
-    const e = Math.max(1, Math.floor(this.opts.slotCount)), i = [];
-    for (let s = 0; s < this.reels; s += 1)
-      i.push(Math.floor(Math.random() * e));
-    return i;
+    const t = Math.max(1, Math.floor(this.opts.slotCount)), s = [];
+    for (let i = 0; i < this.reels; i += 1)
+      s.push(Math.floor(Math.random() * t));
+    return s;
   }
-  setButtonDisabled(e) {
-    this.button && (this.button.disabled = e, e ? this.button.setAttribute("aria-busy", "true") : this.button.removeAttribute("aria-busy"));
+  setButtonDisabled(t) {
+    this.button && (this.button.disabled = t, t ? this.button.setAttribute("aria-busy", "true") : this.button.removeAttribute("aria-busy"));
   }
   shouldAnimate() {
     return this.anim !== null || this.idleBob !== null;
@@ -237,30 +255,39 @@ class j {
   startLoop() {
     this.rafId === null && this.shouldAnimate() && (this.rafId = requestAnimationFrame(this.loop));
   }
-  loop = (e) => {
+  loop = (t) => {
     if (this.anim) {
-      const { startTime: i, durationMs: s, startOffsets: t, deltas: r } = this.anim;
-      let o = !0;
+      const { startTime: s, durationMs: i, startOffsets: e, deltas: r, settleDurationMs: l, targets: u } = this.anim, f = t - s;
+      let c = !0;
       for (let n = 0; n < this.reels; n += 1) {
-        const c = s[n] ?? 0, f = c <= 0 ? 1 : Math.min(1, (e - i) / c), u = X(f);
-        f < 1 && (o = !1);
-        const d = t[n] + r[n] * u;
-        let h = 0;
-        if (f > C && this.frameHeight > 0) {
-          const S = (1 - v((f - C) / $)) ** 2, T = d / this.frameHeight * Math.PI * 2, A = Math.min(Q, this.frameHeight * 0.06);
-          h = Math.sin(T) * S * A;
-        }
-        this.offsets[n] = d + h;
+        const h = i[n] ?? 0, g = l[n] ?? 0, p = u[n] ?? e[n] + r[n];
+        if (h > 0 && f < h) {
+          const d = Math.min(1, f / h), m = Q(d);
+          d < 1 && (c = !1);
+          const S = e[n] + r[n] * m;
+          let x = 0;
+          if (d > z && this.frameHeight > 0) {
+            const y = (1 - v((d - z) / st)) ** 2, o = S / this.frameHeight * Math.PI * 2, M = Math.min(it, this.frameHeight * 0.06);
+            x = Math.sin(o) * y * M;
+          }
+          this.offsets[n] = S + x;
+        } else if (g > 0) {
+          const d = h <= 0 ? f / g : (f - h) / g, m = v(d), S = e[n] + r[n] - p, x = this.getStopSpringOffset(S, m);
+          m < 1 && (c = !1), this.offsets[n] = p + x;
+        } else
+          this.offsets[n] = p;
       }
-      if (this.updateVelocity(e), this.render(), o) {
-        for (let n = 0; n < this.reels; n += 1)
-          this.offsets[n] = this.anim.startOffsets[n] + this.anim.deltas[n], this.idleBaseOffsets[n] = this.offsets[n];
-        this.updateVelocity(e);
+      if (this.updateVelocity(t), this.render(), c) {
+        for (let n = 0; n < this.reels; n += 1) {
+          const h = this.anim.targets[n] ?? this.anim.startOffsets[n] + this.anim.deltas[n];
+          this.offsets[n] = h, this.idleBaseOffsets[n] = this.offsets[n];
+        }
+        this.updateVelocity(t);
         for (let n = 0; n < this.reels; n += 1)
           this.velocities[n] = 0;
         this.anim = null, this.idleStartTime = null, this.render(), this.resolvePendingSpins();
       }
-    } else this.idleBob && (this.updateIdle(e), this.render());
+    } else this.idleBob && (this.updateIdle(t), this.render());
     if (!this.shouldAnimate()) {
       this.rafId = null;
       return;
@@ -270,70 +297,61 @@ class j {
   render() {
     this.spriteImg && (this.width <= 0 || this.height <= 0 || this.gl && this.renderWebGL());
   }
-  getSpinBlurPxForReel(e) {
+  getSpinBlurPxForReel(t) {
     if (!this.anim) return 0;
-    const i = Math.abs(this.velocities[e] ?? 0), s = Math.max(1, this.spinBlur.speedAtMax);
-    return v(i / s) * Math.max(0, this.spinBlur.maxPx);
+    const s = Math.abs(this.velocities[t] ?? 0), i = Math.max(1, this.spinBlur.speedAtMax);
+    return v(s / i) * Math.max(0, this.spinBlur.maxPx);
   }
   renderWebGL() {
     if (!this.gl || !this.glProgram || !this.glAttribs || !this.glUniforms || !this.glTexture || !this.glBuffer || !this.spriteImg) return;
-    const e = this.gl;
-    e.useProgram(this.glProgram), e.bindBuffer(e.ARRAY_BUFFER, this.glBuffer), e.enableVertexAttribArray(this.glAttribs.pos), e.vertexAttribPointer(this.glAttribs.pos, 2, e.FLOAT, !1, 16, 0), e.enableVertexAttribArray(this.glAttribs.uv), e.vertexAttribPointer(this.glAttribs.uv, 2, e.FLOAT, !1, 16, 8), e.activeTexture(e.TEXTURE0), e.bindTexture(e.TEXTURE_2D, this.glTexture), e.uniform1i(this.glUniforms.texture, 0), e.uniform1f(this.glUniforms.frameHeight, this.frameHeight), e.uniform1f(this.glUniforms.spriteHeight, this.spriteHeight), e.uniform1f(this.glUniforms.visibleSlots, this.visibleSlots), e.uniform1f(this.glUniforms.heightScale, this.heightScale), e.uniform1f(this.glUniforms.edgePower, Math.max(0.5, this.webglShading.edgePower));
-    const i = this.webglShading, s = Math.max(0, i.warpAngleDeg) * Math.PI / 180;
-    e.uniform1f(this.glUniforms.warpAngle, s), e.clear(e.COLOR_BUFFER_BIT);
-    const t = 1 / this.reels;
+    const t = this.gl;
+    t.useProgram(this.glProgram), t.bindBuffer(t.ARRAY_BUFFER, this.glBuffer), t.enableVertexAttribArray(this.glAttribs.pos), t.vertexAttribPointer(this.glAttribs.pos, 2, t.FLOAT, !1, 16, 0), t.enableVertexAttribArray(this.glAttribs.uv), t.vertexAttribPointer(this.glAttribs.uv, 2, t.FLOAT, !1, 16, 8), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.glTexture), t.uniform1i(this.glUniforms.texture, 0), t.uniform1f(this.glUniforms.frameHeight, this.frameHeight), t.uniform1f(this.glUniforms.spriteHeight, this.spriteHeight), t.uniform1f(this.glUniforms.visibleSlots, this.visibleSlots), t.uniform1f(this.glUniforms.heightScale, this.heightScale), t.uniform1f(this.glUniforms.edgePower, Math.max(0.5, this.webglShading.edgePower));
+    const s = this.webglShading, i = Math.max(0, s.warpAngleDeg) * Math.PI / 180;
+    t.uniform1f(this.glUniforms.warpAngle, i), t.clear(t.COLOR_BUFFER_BIT);
+    const e = 1 / this.reels;
     for (let r = 0; r < this.reels; r += 1) {
-      e.uniform1f(this.glUniforms.reelX, r * t), e.uniform1f(this.glUniforms.reelW, t);
-      const o = P(this.offsets[r], this.spriteHeight);
-      e.uniform1f(this.glUniforms.offsetPx, o), e.uniform1f(this.glUniforms.blurPx, this.getSpinBlurPxForReel(r)), e.drawArrays(e.TRIANGLE_STRIP, 0, 4);
+      t.uniform1f(this.glUniforms.reelX, r * e), t.uniform1f(this.glUniforms.reelW, e);
+      const l = I(this.offsets[r], this.spriteHeight);
+      t.uniform1f(this.glUniforms.offsetPx, l), t.uniform1f(this.glUniforms.blurPx, this.getSpinBlurPxForReel(r)), t.drawArrays(t.TRIANGLE_STRIP, 0, 4);
     }
   }
-  updateVelocity(e) {
+  updateVelocity(t) {
     if (this.lastVelT === null) {
-      this.lastVelT = e;
-      for (let s = 0; s < this.reels; s += 1)
-        this.lastVelOffsets[s] = this.offsets[s], this.velocities[s] = 0;
+      this.lastVelT = t;
+      for (let i = 0; i < this.reels; i += 1)
+        this.lastVelOffsets[i] = this.offsets[i], this.velocities[i] = 0;
       return;
     }
-    const i = (e - this.lastVelT) / 1e3;
-    if (!(i <= 0)) {
-      for (let s = 0; s < this.reels; s += 1) {
-        const t = (this.offsets[s] - this.lastVelOffsets[s]) / i;
-        this.velocities[s] = this.velocities[s] * W + t * K, this.lastVelOffsets[s] = this.offsets[s];
+    const s = (t - this.lastVelT) / 1e3;
+    if (!(s <= 0)) {
+      for (let i = 0; i < this.reels; i += 1) {
+        const e = (this.offsets[i] - this.lastVelOffsets[i]) / s;
+        this.velocities[i] = this.velocities[i] * V + e * rt, this.lastVelOffsets[i] = this.offsets[i];
       }
-      this.lastVelT = e;
+      this.lastVelT = t;
     }
   }
-  updateIdle(e) {
+  updateIdle(t) {
     if (!this.idleBob) return;
-    this.idleStartTime === null && (this.idleStartTime = e);
-    const { amplitudePx: i, speedHz: s, phaseOffsetRad: t, delayMs: r, rampMs: o } = this.idleBob, n = e - this.idleStartTime;
-    if (n < Math.max(0, r)) {
-      for (let h = 0; h < this.reels; h += 1)
-        this.offsets[h] = this.idleBaseOffsets[h], this.velocities[h] = 0;
-      return;
-    }
-    const c = (n - Math.max(0, r)) / 1e3, f = Math.max(
-      0,
-      Math.min(1, (n - Math.max(0, r)) / Math.max(1, o))
-    ), u = U(f), d = s * Math.PI * 2;
+    this.idleStartTime === null && (this.idleStartTime = t);
+    const { amplitudePx: s, speedHz: i, phaseOffsetRad: e, rampMs: r } = this.idleBob, l = t - this.idleStartTime, u = l / 1e3, f = Math.max(0, Math.min(1, l / Math.max(1, r))), c = F(f), n = i * Math.PI * 2;
     for (let h = 0; h < this.reels; h += 1) {
-      const l = c * d + h * t;
-      this.offsets[h] = this.idleBaseOffsets[h] + Math.sin(l) * (i * u), this.velocities[h] = 0;
+      const g = u * n + h * e;
+      this.offsets[h] = this.idleBaseOffsets[h] + Math.sin(g) * (s * c), this.velocities[h] = 0;
     }
   }
   async loadSprite() {
-    const { sprite: e } = this.opts, i = typeof e == "string" ? new Image() : e;
-    typeof e == "string" && (i.src = e), (!i.complete || i.naturalWidth <= 0) && await new Promise((f, u) => {
-      const d = () => f(), h = () => u(new Error("Failed to load sprite image"));
-      i.addEventListener("load", d, { once: !0 }), i.addEventListener("error", h, { once: !0 });
+    const { sprite: t } = this.opts, s = typeof t == "string" ? new Image() : t;
+    typeof t == "string" && (s.src = t), (!s.complete || s.naturalWidth <= 0) && await new Promise((c, n) => {
+      const h = () => c(), g = () => n(new Error("Failed to load sprite image"));
+      s.addEventListener("load", h, { once: !0 }), s.addEventListener("error", g, { once: !0 });
     });
-    const s = Math.max(1, Math.floor(this.opts.slotCount)), t = i.naturalWidth, r = t, o = r * s, n = i.naturalHeight;
-    if (Math.abs(n - o) > 2)
+    const i = Math.max(1, Math.floor(this.opts.slotCount)), e = s.naturalWidth, r = e, l = r * i, u = s.naturalHeight;
+    if (Math.abs(u - l) > 2)
       throw new Error(
-        `Sprite size mismatch. Expected height ~${Math.round(o)}px (slotCount=${s}, slot aspect 1/1), got ${n}px.`
+        `Sprite size mismatch. Expected height ~${Math.round(l)}px (slotCount=${i}, slot aspect 1/1), got ${u}px.`
       );
-    this.spriteImg = i, this.spriteWidth = t, this.frameHeight = Math.max(1, Math.round(r)), this.spriteHeight = Math.max(1, Math.round(this.frameHeight * s));
+    this.spriteImg = s, this.spriteWidth = e, this.frameHeight = Math.max(1, Math.round(r)), this.spriteHeight = Math.max(1, Math.round(this.frameHeight * i));
   }
   setupResizeWatcher() {
     typeof ResizeObserver > "u" || this.resizeObserver || (this.resizeObserver = new ResizeObserver(() => this.queueResize()), this.resizeObserver.observe(this.container));
@@ -344,32 +362,32 @@ class j {
     }));
   };
   resizeToContainer() {
-    const e = this.container.clientWidth, i = this.container.clientHeight, s = this.visibleSlots * this.heightScale;
-    if (e <= 0 || i <= 0) {
+    const t = this.container.clientWidth, s = this.container.clientHeight, i = this.visibleSlots * this.heightScale;
+    if (t <= 0 || s <= 0) {
       this.applyResize(1, 1);
       return;
     }
-    const t = s, r = this.reels, o = e / r * t;
-    let n = e, c = o;
-    c > i && (c = i, n = i / t * r);
-    const f = Math.max(1, Math.floor(n)), u = Math.max(1, Math.floor(c));
-    this.applyResize(f, u), this.render();
+    const e = i, r = this.reels, l = t / r * e;
+    let u = t, f = l;
+    f > s && (f = s, u = s / e * r);
+    const c = Math.max(1, Math.floor(u)), n = Math.max(1, Math.floor(f));
+    this.applyResize(c, n), this.render();
   }
   applyViewportCrop() {
-    this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.canvas.style.transform = "";
+    this.ensureCanvasCoversContainer(), this.canvas.style.transform = "";
   }
-  applyResize(e, i) {
-    const s = Math.max(1, Math.floor(e)), t = Math.max(1, Math.floor(i)), r = this.getTargetDpr();
-    this.width = s, this.height = t, this.dpr = r, this.canvas.width = Math.floor(this.width * this.dpr), this.canvas.height = Math.floor(this.height * this.dpr), this.gl && this.gl.viewport(0, 0, this.canvas.width, this.canvas.height), this.applyViewportCrop();
+  applyResize(t, s) {
+    const i = Math.max(1, Math.floor(t)), e = Math.max(1, Math.floor(s)), r = this.getTargetDpr();
+    this.width = i, this.height = e, this.dpr = r, this.canvas.width = Math.floor(this.width * this.dpr), this.canvas.height = Math.floor(this.height * this.dpr), this.gl && this.gl.viewport(0, 0, this.canvas.width, this.canvas.height), this.applyViewportCrop();
   }
   getTargetDpr() {
-    const e = window.devicePixelRatio || 1, i = Math.max(1, e);
-    return Math.min(this.maxDpr, i);
+    const t = window.devicePixelRatio || 1, s = Math.max(1, t);
+    return Math.min(this.maxDpr, s);
   }
   tryInitWebGL() {
     if (!this.spriteImg) return;
     this.releaseWebGLResources(), this.webglInitError = null;
-    const e = this.canvas.getContext("webgl2", {
+    const t = this.canvas.getContext("webgl2", {
       antialias: !0,
       alpha: !0
     }) ?? this.canvas.getContext("webgl", {
@@ -379,12 +397,12 @@ class j {
       antialias: !0,
       alpha: !0
     });
-    if (!e) {
-      const u = document.createElement("canvas"), d = typeof WebGLRenderingContext < "u", h = u.getContext("webgl2") ?? u.getContext("webgl");
-      this.webglInitError = `context is null (browser WebGL=${d ? "yes" : "no"}, fallback canvas=${h ? "yes" : "no"})`, console.warn("ReelDeal WebGL:", this.webglInitError);
+    if (!t) {
+      const n = document.createElement("canvas"), h = typeof WebGLRenderingContext < "u", g = n.getContext("webgl2") ?? n.getContext("webgl");
+      this.webglInitError = `context is null (browser WebGL=${h ? "yes" : "no"}, fallback canvas=${g ? "yes" : "no"})`, console.warn("ReelDeal WebGL:", this.webglInitError);
       return;
     }
-    const t = this.createWebGLProgram(e, `
+    const e = this.createWebGLProgram(t, `
       attribute vec2 a_pos;
       attribute vec2 a_uv;
       varying vec2 v_uv;
@@ -412,6 +430,8 @@ class j {
       uniform float u_warpAngle;
       uniform float u_blurPx;
 
+      const float HALF_PI = 1.5707963;
+
       float saturate(float x) { return clamp(x, 0.0, 1.0); }
 
       void main() {
@@ -420,43 +440,33 @@ class j {
         }
 
         float localX = (v_uv.x - u_reelX) / u_reelW;
-        // v_uv.y is authored as 0 at TOP, 1 at BOTTOM (Canvas-like).
         float localY = v_uv.y;
         float hs = max(0.0001, u_heightScale);
         float fullY = localY * hs + (1.0 - hs) * 0.5;
 
         float warp = max(0.0, u_warpAngle);
-        float warpStrength = saturate(warp / 1.2);
-        float center = 0.5;
-        float centerBand = 1.0 / 3.0;
-        float halfBand = centerBand * 0.5;
-        float dist = abs(fullY - center);
-        // Smoother transition: avoid a hard boundary at halfBand.
-        float edgeWeight = smoothstep(halfBand, 0.5, dist);
+        float warpStrength = saturate(warp / HALF_PI);
+        float distNorm = abs(fullY - 0.5) * 2.0;
         float edgePow = max(0.5, u_edgePower);
-        edgeWeight = pow(edgeWeight, edgePow) * warpStrength;
-        float tEase = smoothstep(0.0, 1.0, fullY);
-        float warpedY = mix(fullY, tEase, edgeWeight);
-        float y = (warpedY - 0.5) * 2.0;
-        float theta = y * warp;
-        float edgeWarp = edgeWeight;
+        float edgeWeight = pow(saturate(distNorm), edgePow) * warpStrength;
+
+        float stretchMax = 6.0;
+        float stretch = mix(1.0, stretchMax, edgeWeight);
+        float warpedY = 0.5 + (fullY - 0.5) * stretch;
+
+        float arcY = 0.5 + 0.5 * sin((warpedY - 0.5) * HALF_PI);
+        warpedY = mix(warpedY, arcY, 0.2);
 
         float yPx = u_offsetPx + warpedY * (u_frameHeight * u_visibleSlots);
-        // With UNPACK_FLIP_Y_WEBGL=0 and Canvas-like UVs (v=0 at TOP),
-        // v=0 samples the TOP of the original image, so pixel Y-from-top maps directly to v.
-        // Normalize early to improve precision on mobile GPUs.
         float v = fract((u_offsetPx / u_spriteHeight) +
                         warpedY * ((u_frameHeight * u_visibleSlots) / u_spriteHeight));
 
         vec4 base = texture2D(u_tex, vec2(localX, v));
 
         if (u_blurPx > 0.0) {
-          // Clamp blur step to reduce banding on mobile GPUs.
-          // Scale max step with speed proxy (u_blurPx).
           float maxStepPx = 1.0 + 3.0 * saturate(u_blurPx / 4.0);
           float blurPx = min(u_blurPx, maxStepPx);
           float blurStep = blurPx / max(1.0, u_spriteHeight);
-          // 9-tap gaussian-ish blur to reduce banding on mobile.
           vec4 sum = base * 0.227027;
           sum += texture2D(u_tex, vec2(localX, fract(v + blurStep))) * 0.1945946;
           sum += texture2D(u_tex, vec2(localX, fract(v - blurStep))) * 0.1945946;
@@ -472,72 +482,71 @@ class j {
         gl_FragColor = base;
       }
     `);
-    if (!t) {
+    if (!e) {
       this.webglInitError = "shader program failed to compile/link (see console)", console.warn("ReelDeal WebGL:", this.webglInitError);
       return;
     }
-    const r = e.createBuffer();
+    const r = t.createBuffer();
     if (!r) {
-      this.webglInitError = "failed to create vertex buffer", console.warn("ReelDeal WebGL:", this.webglInitError), e.deleteProgram(t);
+      this.webglInitError = "failed to create vertex buffer", console.warn("ReelDeal WebGL:", this.webglInitError), t.deleteProgram(e);
       return;
     }
-    e.bindBuffer(e.ARRAY_BUFFER, r);
-    const o = new Float32Array([-1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, 1, 1, 1, 0]);
-    e.bufferData(e.ARRAY_BUFFER, o, e.STATIC_DRAW);
-    const n = e.createTexture();
-    if (!n) {
-      this.webglInitError = "failed to create texture", console.warn("ReelDeal WebGL:", this.webglInitError), e.deleteBuffer(r), e.deleteProgram(t);
+    t.bindBuffer(t.ARRAY_BUFFER, r);
+    const l = new Float32Array([-1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, 1, 1, 1, 0]);
+    t.bufferData(t.ARRAY_BUFFER, l, t.STATIC_DRAW);
+    const u = t.createTexture();
+    if (!u) {
+      this.webglInitError = "failed to create texture", console.warn("ReelDeal WebGL:", this.webglInitError), t.deleteBuffer(r), t.deleteProgram(e);
       return;
     }
-    e.bindTexture(e.TEXTURE_2D, n), e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL, 0), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, this.spriteImg);
-    const c = (u) => u > 0 && (u & u - 1) === 0;
-    c(this.spriteWidth) && c(this.spriteHeight) ? (e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.REPEAT), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.REPEAT), e.generateMipmap(e.TEXTURE_2D), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR_MIPMAP_LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR)) : (e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE)), e.useProgram(t), e.clearColor(0, 0, 0, 0), e.enable(e.BLEND), e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA), this.gl = e, this.glProgram = t, this.glBuffer = r, this.glTexture = n, this.glAttribs = {
-      pos: e.getAttribLocation(t, "a_pos"),
-      uv: e.getAttribLocation(t, "a_uv")
+    t.bindTexture(t.TEXTURE_2D, u), t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL, 0), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, this.spriteImg);
+    const f = (n) => n > 0 && (n & n - 1) === 0;
+    f(this.spriteWidth) && f(this.spriteHeight) ? (t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, t.REPEAT), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, t.REPEAT), t.generateMipmap(t.TEXTURE_2D), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.LINEAR_MIPMAP_LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.LINEAR)) : (t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, t.CLAMP_TO_EDGE)), t.useProgram(e), t.clearColor(0, 0, 0, 0), t.enable(t.BLEND), t.blendFunc(t.SRC_ALPHA, t.ONE_MINUS_SRC_ALPHA), this.gl = t, this.glProgram = e, this.glBuffer = r, this.glTexture = u, this.glAttribs = {
+      pos: t.getAttribLocation(e, "a_pos"),
+      uv: t.getAttribLocation(e, "a_uv")
     }, this.glUniforms = {
-      texture: e.getUniformLocation(t, "u_tex"),
-      reelX: e.getUniformLocation(t, "u_reelX"),
-      reelW: e.getUniformLocation(t, "u_reelW"),
-      offsetPx: e.getUniformLocation(t, "u_offsetPx"),
-      frameHeight: e.getUniformLocation(t, "u_frameHeight"),
-      spriteHeight: e.getUniformLocation(t, "u_spriteHeight"),
-      visibleSlots: e.getUniformLocation(t, "u_visibleSlots"),
-      heightScale: e.getUniformLocation(t, "u_heightScale"),
-      edgePower: e.getUniformLocation(t, "u_edgePower"),
-      warpAngle: e.getUniformLocation(t, "u_warpAngle"),
-      blurPx: e.getUniformLocation(t, "u_blurPx")
+      texture: t.getUniformLocation(e, "u_tex"),
+      reelX: t.getUniformLocation(e, "u_reelX"),
+      reelW: t.getUniformLocation(e, "u_reelW"),
+      offsetPx: t.getUniformLocation(e, "u_offsetPx"),
+      frameHeight: t.getUniformLocation(e, "u_frameHeight"),
+      spriteHeight: t.getUniformLocation(e, "u_spriteHeight"),
+      visibleSlots: t.getUniformLocation(e, "u_visibleSlots"),
+      heightScale: t.getUniformLocation(e, "u_heightScale"),
+      edgePower: t.getUniformLocation(e, "u_edgePower"),
+      warpAngle: t.getUniformLocation(e, "u_warpAngle"),
+      blurPx: t.getUniformLocation(e, "u_blurPx")
     };
   }
-  createWebGLProgram(e, i, s) {
-    const t = this.createWebGLShader(e, e.VERTEX_SHADER, i), r = this.createWebGLShader(e, e.FRAGMENT_SHADER, s);
-    if (!t || !r)
-      return t && e.deleteShader(t), r && e.deleteShader(r), null;
-    const o = e.createProgram();
-    if (!o) return null;
-    if (e.attachShader(o, t), e.attachShader(o, r), e.linkProgram(o), !e.getProgramParameter(o, e.LINK_STATUS)) {
-      const n = e.getProgramInfoLog(o) ?? "unknown link error";
-      return this.webglInitError = `program link failed: ${n}`, console.warn("ReelDeal WebGL: program link failed", n), e.deleteProgram(o), e.deleteShader(t), e.deleteShader(r), null;
+  createWebGLProgram(t, s, i) {
+    const e = this.createWebGLShader(t, t.VERTEX_SHADER, s), r = this.createWebGLShader(t, t.FRAGMENT_SHADER, i);
+    if (!e || !r)
+      return e && t.deleteShader(e), r && t.deleteShader(r), null;
+    const l = t.createProgram();
+    if (!l) return null;
+    if (t.attachShader(l, e), t.attachShader(l, r), t.linkProgram(l), !t.getProgramParameter(l, t.LINK_STATUS)) {
+      const u = t.getProgramInfoLog(l) ?? "unknown link error";
+      return this.webglInitError = `program link failed: ${u}`, console.warn("ReelDeal WebGL: program link failed", u), t.deleteProgram(l), t.deleteShader(e), t.deleteShader(r), null;
     }
-    return e.detachShader(o, t), e.detachShader(o, r), e.deleteShader(t), e.deleteShader(r), o;
-  }
-  createWebGLShader(e, i, s) {
-    const t = e.createShader(i);
-    if (!t) return null;
-    if (e.shaderSource(t, s), e.compileShader(t), !e.getShaderParameter(t, e.COMPILE_STATUS)) {
-      const r = e.getShaderInfoLog(t) ?? "unknown compile error";
-      return this.webglInitError = `shader compile failed: ${r}`, console.warn("ReelDeal WebGL: shader compile failed", r), e.deleteShader(t), null;
+    return t.detachShader(l, e), t.detachShader(l, r), t.deleteShader(e), t.deleteShader(r), l;
+  }
+  createWebGLShader(t, s, i) {
+    const e = t.createShader(s);
+    if (!e) return null;
+    if (t.shaderSource(e, i), t.compileShader(e), !t.getShaderParameter(e, t.COMPILE_STATUS)) {
+      const r = t.getShaderInfoLog(e) ?? "unknown compile error";
+      return this.webglInitError = `shader compile failed: ${r}`, console.warn("ReelDeal WebGL: shader compile failed", r), t.deleteShader(e), null;
     }
-    return t;
+    return e;
   }
   releaseWebGLResources() {
     this.gl && (this.glTexture && this.gl.deleteTexture(this.glTexture), this.glBuffer && this.gl.deleteBuffer(this.glBuffer), this.glProgram && this.gl.deleteProgram(this.glProgram), this.glTexture = null, this.glBuffer = null, this.glProgram = null, this.glAttribs = null, this.glUniforms = null, this.gl = null);
   }
 }
 export {
-  j as ReelDeal,
-  g as defaultIdleBob,
-  I as defaultSpinBlur,
-  b as defaultSpinConfig,
-  y as defaultWebGLShading
+  ut as ReelDeal,
+  E as defaultIdleBob,
+  C as defaultSpinBlur,
+  T as defaultSpinConfig
 };
 //# sourceMappingURL=index.es.js.map