wheel-fortune/dist/index.es.js

A lightweight, customizable spinning wheel component for web games and raffles

var R = (n) => {
  throw TypeError(n);
};
var D = (n, t, s) => t.has(n) || R("Cannot " + s);
var i = (n, t, s) => (D(n, t, "read from private field"), s ? s.call(n) : t.get(n)), o = (n, t, s) => t.has(n) ? R("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, s), h = (n, t, s, r) => (D(n, t, "write to private field"), r ? r.call(n, s) : t.set(n, s), s), a = (n, t, s) => (D(n, t, "access private method"), s);
var B = (n, t, s, r) => ({
  set _(f) {
    h(n, t, f, s);
  },
  get _() {
    return i(n, t, r);
  }
});
var d, c, g, u, p, y, E, b, M, C, $, S, l, w, m, L, v, x, e, W, I, N, j, z, q, k, P, F;
class T {
  constructor(t) {
    o(this, e);
    o(this, d);
    o(this, c);
    o(this, g);
    o(this, u, null);
    o(this, p, null);
    o(this, y, /* @__PURE__ */ new WeakMap());
    o(this, E);
    o(this, b);
    o(this, M);
    o(this, C);
    o(this, $);
    o(this, S);
    o(this, l);
    o(this, w);
    o(this, m, 0);
    o(this, L, !1);
    o(this, v, !1);
    o(this, x, () => {
      a(this, e, N).call(this);
    });
    var r, f;
    this.options = t, h(this, E, t.rotationCount ?? 6), h(this, b, t.duration ?? 5e3), h(this, M, t.overshootDeg ?? 15), h(this, C, t.returnDuration ?? 1350), h(this, $, ((r = t.swayOptions) == null ? void 0 : r.amplitude) ?? 6), h(this, S, ((f = t.swayOptions) == null ? void 0 : f.period) ?? 1500), h(this, w, [...t.spinStates ?? []]);
    const s = t.rootSelector.trim();
    h(this, l, s.startsWith(".") ? s.slice(1) : s);
  }
  init() {
    const t = document.querySelector(this.options.rootSelector), s = t == null ? void 0 : t.querySelector(this.options.wheelSelector), r = t == null ? void 0 : t.querySelector(this.options.triggerSelector);
    t && s && r && (h(this, d, t), h(this, c, s), h(this, g, r), a(this, e, W).call(this), i(this, g).addEventListener("click", i(this, x)), a(this, e, z).call(this, i(this, c)));
  }
  destroy() {
    var t;
    a(this, e, q).call(this), a(this, e, F).call(this, i(this, c)), (t = i(this, g)) == null || t.removeEventListener("click", i(this, x)), h(this, y, /* @__PURE__ */ new WeakMap());
  }
  reset() {
    this.destroy(), i(this, c).style.transform = "", i(this, d).classList.remove(`${i(this, l)}--spinning`, `${i(this, l)}--completed`, `${i(this, l)}--first-done`, `${i(this, l)}--final-done`), h(this, m, 0), h(this, L, !1), h(this, v, !1), a(this, e, W).call(this), i(this, g).addEventListener("click", i(this, x)), a(this, e, z).call(this, i(this, c));
  }
}
d = new WeakMap(), c = new WeakMap(), g = new WeakMap(), u = new WeakMap(), p = new WeakMap(), y = new WeakMap(), E = new WeakMap(), b = new WeakMap(), M = new WeakMap(), C = new WeakMap(), $ = new WeakMap(), S = new WeakMap(), l = new WeakMap(), w = new WeakMap(), m = new WeakMap(), L = new WeakMap(), v = new WeakMap(), x = new WeakMap(), e = new WeakSet(), W = function() {
  if (i(this, v)) return;
  const t = i(this, c).animate([{ filter: "blur(0)" }, { filter: "blur(0.4px)", offset: 0.5 }, { filter: "blur(0)" }], { duration: 64, fill: "forwards" });
  i(this, c).getBoundingClientRect(), t.onfinish = () => {
    var s;
    (s = t.commitStyles) == null || s.call(t), t.cancel();
  }, a(this, e, I).call(this, i(this, c)), h(this, v, !0);
}, I = function(t) {
  t.querySelectorAll("img").forEach((s) => {
    var r;
    (r = s.decode) == null || r.call(s).catch(() => {
    });
  });
}, N = async function() {
  var s;
  const t = i(this, w)[i(this, m)];
  t && (h(this, L, !0), i(this, d).classList.remove(`${i(this, l)}--completed`), i(this, d).classList.add(`${i(this, l)}--spinning`), a(this, e, q).call(this), await a(this, e, j).call(this, i(this, c), t.targetAngle), i(this, d).classList.remove(`${i(this, l)}--spinning`), i(this, d).classList.add(`${i(this, l)}--completed`), i(this, m) === 0 && i(this, d).classList.add(`${i(this, l)}--first-done`), i(this, m) === i(this, w).length - 1 && i(this, d).classList.add(`${i(this, l)}--final-done`), (s = t.callback) == null || s.call(t), B(this, m)._++);
}, j = async function(t, s) {
  const r = a(this, e, P).call(this, t), f = (a(this, e, k).call(this, s) - a(this, e, k).call(this, r) + 360) % 360, A = r + 360 * i(this, E) + f, G = A + i(this, M), O = i(this, b) + i(this, C), H = i(this, b) / O, J = t.animate([{ transform: `rotate(${r}deg)`, easing: "cubic-bezier(0.86,0,0.07,1)" }, { offset: H, transform: `rotate(${G}deg)`, easing: "cubic-bezier(0.77,0,0.175,1)" }, { transform: `rotate(${A}deg)` }], { duration: O, fill: "forwards" }), K = t.animate([{ filter: "blur(0)" }, { offset: 0.1, filter: "blur(0.4px)" }, { offset: 0.25, filter: "blur(1px)" }, { offset: 0.6, filter: "blur(1px)" }, { offset: 0.9, filter: "blur(0.4px)" }, { offset: 1, filter: "blur(0)" }], { duration: O, fill: "forwards", easing: "ease-in-out" });
  await Promise.all([J.finished, K.finished]), i(this, y).set(t, a(this, e, k).call(this, A));
}, z = function(t) {
  if (i(this, L)) return;
  a(this, e, q).call(this), h(this, p, t);
  const s = i(this, y).get(t) ?? a(this, e, P).call(this, t), r = a(this, e, k).call(this, s);
  h(this, u, t.animate([{ transform: `rotate(${r - i(this, $)}deg)` }, { transform: `rotate(${r + i(this, $)}deg)` }], { duration: i(this, S), direction: "alternate", iterations: 1 / 0, easing: "ease-in-out", delay: -i(this, S) / 2 }));
}, q = function() {
  var r, f;
  if (!i(this, u) || !i(this, p)) return;
  const t = i(this, p), s = getComputedStyle(t).transform;
  (f = (r = i(this, u)).commitStyles) == null || f.call(r), i(this, u).cancel(), t.style.transform = s !== "none" ? s : "", h(this, u, null), h(this, p, null);
}, k = function(t) {
  return (t % 360 + 360) % 360;
}, P = function(t) {
  const s = getComputedStyle(t).transform;
  if (!s || s === "none") return 0;
  const { a: r, b: f } = new DOMMatrixReadOnly(s);
  return 180 * Math.atan2(f, r) / Math.PI;
}, F = function(t) {
  t.getAnimations().forEach((s) => s.cancel());
};
export {
  T as default
};