onComplete not executing

[ElGux]

The onComplete calls aren't being executed.
Even in the example page in the "Randomize your stuff" isn't working

[ItsRainingHP]

Also having this issue.

[ItsRainingHP]

Here is a work around until he fixes it (using CDN in layout.html to implement Vue as const app). Also note: the documentation is misleading. SlotMachine#active does not return the active element but rather an integer, and after some testing not even the correct one.

<template id="slots">
      <div class="d-flex flex-row bg-surface-variant" style="padding: 10px">
        <div id="machine" style="margin: auto; width: 74px; height: 64px">
         <div><img src="/orange/64.png" alt=""></div>
          <div><img src="/apple/64.png" alt=""></div>
          <div><img src="/winner/64.png" alt="" style="width: 64px; height: 64px"></div>
          <div><img src="/banana/64.png" alt=""></div>
          <div><img src="/grape/64.png" alt=""></div>
        </div>
        <div id="machine2" style="margin: auto; width: 74px; height: 64px">
          <div><img src="/orange/64.png" alt=""></div>
          <div><img src="/apple/64.png" alt=""></div>
          <div><img src="/winner/64.png" alt="" style="width: 64px; height: 64px"></div>
          <div><img src="/banana/64.png" alt=""></div>
          <div><img src="/grape/64.png" alt=""></div>
        </div>
        <div id="machine3" style="margin: auto; width: 74px; height: 64px">
         <div><img src="/orange/64.png" alt=""></div>
          <div><img src="/apple/64.png" alt=""></div>
          <div><img src="/winner/64.png" alt="" style="width: 64px; height: 64px"></div>
          <div><img src="/banana/64.png" alt=""></div>
          <di><img src="/grape/64.png" alt=""></div>
        </div>
      </div>
      <div style="padding: 10px;">
        <v-btn id="spin" @click="spin">Spin</v-btn>
      </div>
</template>
<script>
app.component("slots", {
  template: "#slots",
  data() {
    return {
      machine: null,
      machine2: null,
      machine3: null
    }
  },
  mounted() {
    const el = document.querySelector('#machine');
    this.machine = new SlotMachine(el, {
      direction: "down"
    });

    const el2 = document.querySelector('#machine2');
    this.machine2 = new SlotMachine(el2, {
      direction: "down"
    });

    const el3 = document.querySelector('#machine3');
    this.machine3 = new SlotMachine(el3, {
      direction: "down"
    });
  },
  methods: {
    spin() {
      //RUN SPIN
      const spin = document.getElementById('spin');
      spin.disabled = true;
      this.machine.shuffle(15);
      this.machine2.shuffle(20);
      this.machine3.shuffle(25);
      function onComplete(amount) {
        let winners = 0;
        const strings = this.machine.childNodes.item(0).style.transform.toString().split(',');
        const strings2 = this.machine2.childNodes.item(0).style.transform.toString().split(',');
        const strings3 = this.machine3.childNodes.item(0).style.transform.toString().split(',');
        const amount1 = strings[5].substring(0, strings[5].length - 1);
        const amount2 = strings2[5].substring(0, strings2[5].length - 1);
        const amount3 = strings3[5].substring(0, strings3[5].length - 1);
        //Assuming the winner is the 3rd DIV of 5 (3 * 64 = 192)
        if (amount1.trim() === '-192') {
          winners++;
        }
        if (amount2.trim() === '-192') {
          winners++;
        }
        if (amount3.trim() === '-192') {
          winners++;
        }
        console.log('Winners: ' + winners);
      }
      setTimeout(() => {
        onComplete();
        spin.disabled = false;
      }, 5000);
    }
  }
});
</script>