JavaScript Code
let options = {
spacing: 10,
acceleration: 350,
fps: 40,
audio: "libs/roulette/click.wav",
selector: ":scope > *",
stopCallback: function({detail: { prize }}) {
console.log("stop");
console.log(`Selected prize index is: ${prize.index}`);
},
startCallback: function({detail: { prize }}) {
console.log("start");
}
};
let roulette = new Roulette(".roulette", options);
document.getElementById("start").addEventListener("click", function() {
roulette.rotateTo(10, { tracks: 1, random: true });
});
document.getElementById("stop").addEventListener("click", function() {
roulette.stop();
});
HTML Code
<div class="roulette">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
...
</div>
<button id="start">Start roulette</button>
<button id="stop">Stop roulette</button>
<link href="libs/vanillaRoulette/vanillaRoulette.min.css" rel="stylesheet">
<script src="libs/vanillaRoulette/vanillaRoulette.min.js"></script>