Open ElGux opened 1 year ago
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>
The onComplete calls aren't being executed. Even in the example page in the "Randomize your stuff" isn't working