https://vavecasinoholland.nl/js/vave-wheel.js?v=20260907-wheel-locale

1(() => {
2  const source = document.currentScript;
3  if (!source) return;
4
5  const assetBase = new URL("../img/vave/wof/", source.src).href;
6  const moreDetailsHref = new URL("../bonussen/", source.src).href;
7  const SPIN_DURATION_MS = 9000;
8  const FINAL_ROTATION_DEG = -1947.273;
9  const FINAL_RESTING_DEG = -147.273;
10  const prizes = [
11    "200 VP",
12    "100 USDT",
13    "100 VP",
14    "5000 VP",
15    "300 VP",
16    "1 BTC",
17    "100 VP",
18    "10 USDT",
19    "500 VP",
20    "200 VP",
21    "100 VP",
22  ];
23
24  const asset = (name) => `${assetBase}${name}`;
25  const wheelTransform = (degrees) => `translate(-50%, -50%) rotate(${degrees}deg)`;
26  const prizeSectors = prizes.map((prize, index) => `
27    <div class="ui-wof-sector${prize === "1 BTC" ? " ui-wof-sector-btc" : ""}" style="--sector:${index}">
28      <span>${prize}</span>
29      <img src="${asset(`prize-${String(index + 1).padStart(2, "0")}.png`)}" alt="" width="28" height="28">
30    </div>`).join("");
31  const rimLights = Array.from({ length: 15 }, (_, index) => `<i style="--light:${index}"></i>`).join("");
32  const marqueeLights = Array.from({ length: 20 }, (_, index) => `<i style="--bulb:${index}"></i>`).join("");
33  const stageStars = Array.from({ length: 6 }, (_, index) => `
34    <img class="ui-wof-star ui-wof-star-${index + 1}" src="${asset("wof-star.webp")}" alt="">`).join("");
35
36  const overlay = document.createElement("div");
37  overlay.className = "ui-wof-overlay";
38  overlay.hidden = true;
39  overlay.setAttribute("data-vave-wheel-modal", "");
40  overlay.innerHTML = `
41    <div class="ui-wof-dialog" role="dialog" aria-modal="true" aria-labelledby="vave-wof-title">
42      <button class="ui-wof-close" type="button" aria-label="Sluit het rad van fortuin" data-vave-wheel-close>×</button>
43      <section class="ui-wof-game" data-vave-wheel-spin>
44        <h2 id="vave-wof-title">Draai en win tot 1 BTC</h2>
45        <div class="ui-wof-stage">
46          <img class="ui-wof-stage-effect" src="${asset("wof-bg-effect.webp")}" alt="">
47          <img class="ui-wof-firefly ui-wof-firefly-one" src="${asset("wof-effect-firefly.webp")}" alt="">
48          <img class="ui-wof-firefly ui-wof-firefly-two" src="${asset("wof-effect-firefly.webp")}" alt="">
49          ${stageStars}
50          <img class="ui-wof-coin ui-wof-coin-one" src="${asset("wof-coin-1.webp")}" alt="">
51          <img class="ui-wof-coin ui-wof-coin-two" src="${asset("wof-coin-2.webp")}" alt="">
52          <img class="ui-wof-coin ui-wof-coin-three" src="${asset("wof-coin-3.webp")}" alt="">
53          <img class="ui-wof-coin ui-wof-coin-four" src="${asset("wof-coin-4.webp")}" alt="">
54          <div class="ui-wof-wheel-shell">
55            <div class="ui-wof-wheel ui-is-idle" data-vave-wheel-disc>
56              ${prizeSectors}
57            </div>
58            <img class="ui-wof-wheel-frame" src="${asset("wof-frame.webp")}" alt="">
59            <span class="ui-wof-rim-lights" aria-hidden="true">${rimLights}</span>
60            <img class="ui-wof-arrow" src="${asset("wof-arrow.webp")}" alt="">
61            <button class="ui-wof-center" type="button" data-vave-wheel-spin-button aria-label="Draai aan het rad van fortuin">
62              <img src="${asset("wof-button.webp")}" alt=""><span>DRAAI</span>
63            </button>
64          </div>
65        </div>
66        <div class="ui-wof-actions">
67          <span>Nog 1 draai</span>
68          <button class="ui-wof-primary" type="button" data-vave-wheel-spin-button>Draaien</button>
69          <a href="${moreDetailsHref}">Meer informatie</a>
70        </div>
71      </section>
72      <section class="ui-wof-success" data-vave-wheel-success hidden>
73        <div class="ui-wof-success-rays"></div>
74        <div class="ui-wof-marquee" style="background-image:url('${asset("wof-frame-for-text-success-modal.webp")}')">
75          <span class="ui-wof-marquee-lights" aria-hidden="true">${marqueeLights}</span>
76          <strong>GEFELICITEERD!</strong>
77          <b>JE HEBT GEWONNEN</b>
78        </div>
79        <div class="ui-wof-gift">
80          <img class="ui-wof-gift-box" src="${asset("wof-gift-success-modal.webp")}" alt="Prijs">
81          <img class="ui-wof-gift-stars" src="${asset("wof-stars-success-modal.webp")}" alt="">
82        </div>
83        <div class="ui-wof-prize">300 VP</div>
84        <a class="ui-wof-primary ui-wof-claim" data-vave-wheel-claim href="https://top.moxtop.com/redirect.aspx?pid=23555&amp;bid=1481&amp;lpid=210" rel="sponsored nofollow" data-referral-kind="bonus">Claim je prijs</a>
85      </section>
86    </div>`;
87  document.body.append(overlay);
88
89  const dialog = overlay.querySelector(".ui-wof-dialog");
90  const game = overlay.querySelector("[data-vave-wheel-spin]");
91  const success = overlay.querySelector("[data-vave-wheel-success]");
92  const wheel = overlay.querySelector("[data-vave-wheel-disc]");
93  const spinButtons = [...overlay.querySelectorAll("[data-vave-wheel-spin-button]")];
94  let spinTimer = 0;
95  let activeTrigger = null;
96
97  const setSpinDisabled = (disabled) => {
98    spinButtons.forEach((button) => {
99      button.disabled = disabled;
100    });
101  };
102
103  const reset = () => {
104    window.clearTimeout(spinTimer);
105    game.hidden = false;

106    success.hidden = true;
107    dialog.classList.remove("ui-is-success");
108    wheel.classList.remove("ui-is-spinning");
109    wheel.classList.add("ui-is-idle");
110    wheel.style.transition = "none";
111    wheel.style.transform = wheelTransform(0);
112    setSpinDisabled(false);
113  };
114
115  const open = (trigger) => {
116    activeTrigger = trigger;
117    reset();
118    overlay.hidden = false;
119    document.body.classList.add("ui-wof-open");
120    requestAnimationFrame(() => overlay.classList.add("ui-is-visible"));
121    overlay.querySelector("[data-vave-wheel-close]").focus({ preventScroll: true });
122  };
123
124  const close = () => {
125    window.clearTimeout(spinTimer);
126    overlay.classList.remove("ui-is-visible");
127    document.body.classList.remove("ui-wof-open");
128    window.setTimeout(() => {
129      overlay.hidden = true;
130      reset();
131    }, 180);
132    activeTrigger?.focus({ preventScroll: true });
133  };
134
135  const showSuccess = () => {
136    wheel.style.transition = "none";
137    wheel.style.transform = wheelTransform(FINAL_RESTING_DEG);
138    game.hidden = true;
139    success.hidden = false;
140    dialog.classList.add("ui-is-success");
141    overlay.querySelector("[data-vave-wheel-claim]").focus({ preventScroll: true });
142  };
143
144  const spin = () => {
145    if (wheel.classList.contains("ui-is-spinning")) return;
146    const spinDuration = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 1 : SPIN_DURATION_MS;
147    setSpinDisabled(true);
148    wheel.classList.remove("ui-is-idle");
149    wheel.classList.add("ui-is-spinning");
150    wheel.style.transition = "none";
151    wheel.style.transform = wheelTransform(0);
152    wheel.getBoundingClientRect();
153    requestAnimationFrame(() => {
154      wheel.style.transition = `transform ${spinDuration}ms cubic-bezier(0.42, 0, 0.12, 1)`;
155      wheel.style.transform = wheelTransform(FINAL_ROTATION_DEG);
156    });
157    spinTimer = window.setTimeout(showSuccess, spinDuration + (spinDuration === 1 ? 20 : 350));
158  };
159
160  document.addEventListener("click", (event) => {
161    const trigger = event.target.closest("[data-vave-wheel-open]");
162    if (trigger && !overlay.contains(trigger)) open(trigger);
163  });
164  overlay.querySelector("[data-vave-wheel-close]").addEventListener("click", close);
165  spinButtons.forEach((button) => button.addEventListener("click", spin));
166  overlay.addEventListener("click", (event) => {
167    if (event.target === overlay) close();
168  });
169  document.addEventListener("keydown", (event) => {
170    if (event.key === "Escape" && !overlay.hidden) close();
171  });
172})();