jQuery-SlotMachine
jQuery-SlotMachine copied to clipboard
onComplete not executing
The onComplete calls aren't being executed. Even in the example page in the "Randomize your stuff" isn't working
Also having this issue.
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>