JSFiddle - React, Tailwind, and code Playground

by Chan Wu

HTML

<button type="button" id="start">start</button>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    float: left;
    margin: 2px;
}
.on {
    border: 2px solid pink;
}

JavaScript

$(function() {
    var start = $('#start');
    var lis = $('li');

    start.on('click', function() {
        var rounds = 40 + Math.floor((Math.random() * lis.size()));

        $(this).prop('disabled', true);
        spin(lis.filter(':first'), rounds);
    });

    function spin(li, rounds) {
        var duration = rounds < 5 ? 1000 : 70;

        lis.clearQueue();
        li.delay(duration).queue(function() {
            var next = $(this).next('li');

            lis.removeClass('on');

            if (next.size() === 0) {
                next = lis.filter(':first');
            }

            li.addClass('on');

            if (rounds - 1 >= 0) {
                spin(next, rounds -1);
            } else {
                start.prop('disabled', false);
            }
        });
    }
});