JSFiddle - React, Tailwind, and code Playground

by raviolicode

HTML

<script src="http://demo.st-marron.info/roulette/roulette.js"></script>
<div class="roulette" style="display:none;"> 
	
	<img src="https://s3.amazonaws.com/uploads.hipchat.com/13028/80562/Zkh0VSSmjYvNecx/tux-test.png"/>
	<img src="http://demo.st-marron.info/roulette/sample/mshroom.png"/>
	<img src="http://demo.st-marron.info/roulette/sample/chomp.png"/>
</div> 

<button class="start">START</button> 
<button class="stop">STOP</button>

JavaScript

// initialize!
var option = {
	speed : 15,
	duration : 3,
	stopImageNumber : null,
	startCallback : function() {
		console.log('start');
	},
	slowDownCallback : function() {
		console.log('slowDown');
	},
	stopCallback : function($stopElm) {
		console.log('stop');
        alert('Te ganaste un ' + option.stopImageNumber);
	}
}

$('div.roulette').roulette(option);	

// START!
$('.start').click(function(){
    //$('div.roulette').roulette({stopImageNumber: Math.floor(Math.random()*3)});
	$('div.roulette').roulette('start');	
});

// STOP!
$('.stop').click(function(){
	$('div.roulette').roulette('stop');	
});