JSFiddle - React, Tailwind, and code Playground

by xmenzaa

HTML

<!DOCTYPE html>
<html>

<head>
    <title>slot</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
    <!-- Range -->
    <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
</head>

<body>
    <div class="bg-img text-center">
        <div class='main-container'>
            <div class='reel-container'></div>
        </div>
        <button id="gen">Gen</button>
    </div>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
    <script src="js/range.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
</body>

</html>

CSS

@-moz-keyframes reel-loop {
    from {
        margin-top: 0px;
    }

    to {
        margin-top: -480px;
    }
}

@-webkit-keyframes reel-loop {
    from {
        margin-top: 0px;
    }

    to {
        margin-top: -480px;
    }
}

@keyframes reel-loop {
    from {
        margin-top: 0px;
    }

    to {
        margin-top: -480px;
    }
}

@-moz-keyframes reel-begin {
    0% {
        margin-top: 0px;
    }

    75% {
        margin-top: -60px;
    }

    100% {
        margin-top: 20px;
    }
}

@-webkit-keyframes reel-begin {
    0% {
        margin-top: 0px;
    }

    75% {
        margin-top: -60px;
    }

    100% {
        margin-top: 20px;
    }
}

@keyframes reel-begin {
    0% {
        margin-top: 0px;
    }

    75% {
        margin-top: -60px;
    }

    100% {
        margin-top: 20px;
    }
}

@-moz-keyframes reel-stop {
    from {
        top: -50px;
    }

    to {
        top: 0px;
    }
}

@-webkit-keyframes reel-stop {
    from {
        top: -50px;
    }

    to {
        top: 0px;
    }
}

@keyframes reel-stop {
    from {
        top: -50px;
    }

    to {
        top: 0px;
    }
}

.main-container {
    margin: 0 auto;
}

.reel {
    width: 70px;
    height: 90px;
    background: #DAC290;
    border: 4px solid #C7A365;

    float: left;
    margin-right: 10px;
}

.reel-symbol {
    color: black;
    font-size: 60px;
    line-height: 74px;
    height: 74px;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}

.reel-container {
    height: 90px;
    overflow: hidden;
    position: relative;
}

.reel-loop {
    -moz-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -moz-animation-name: reel-loop;
    -webkit-animation-name: reel-loop;
    animation-name: reel-loop;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
   ...

JavaScript

var reeling_time = 500;
var stop_spinning_time_difference = 350;
var start_spinning_time = 0;
var currency_symbol = "$";

$.fn.slotMachine = function(my_number) {

    var $parentSlot = this;
    var hidden_reels_html = '';
    var hidden_reels_array = [];
    var numberFormat = function number_format(number) {
        number = (number + '');
        return number;
    }

    for (var $j = 0; $j <= 9; $j++) {
        hidden_reels_array[$j] = "";
        for (var $i = 0; $i <= 9; $i++) {
            hidden_reels_array[$j] += '<div class="reel-symbol' + ($i == 0 ? ' reel-loop' : '') + '">' + (($j + $i) % 10) + '</div>';
        }
    }

    var transformNumberToArrayPlusDollar = function(my_number) {
        var my_scale = parseInt(my_number, 10) > 999 ? 0 : 2;

        my_number = numberFormat(my_number, my_scale, ".", ",");

        var my_number_array = my_number.split('');

        // my_number_array.unshift(currency_symbol);

        return my_number_array;
    };

    //Effect for the reel to go up and then down like it is pushed to spin
    var effectBeforeSpin = function() {
        $parentSlot.find('.main-reel-symbol').removeClass('reel-stop').addClass('reel-begin');
    };

    var slotMachine = function(my_number) {

        var my_number_array = transformNumberToArrayPlusDollar(my_number);
        var reels_html = '';

        for (var $i = 0; $i < my_number_array.length; $i++) {
            reels_html += '<div class="reel">' + hidden_reels_array[($i % 10)] + '</div>';
        }

        effectBeforeSpin();

        var startSpinning = function() {

            $parentSlot.html(reels_html);

            var my_timer = reeling_time;

            $.each(my_number_array, function(my_index, my_value) {

                var next_value = /^[0-9]$/.test(my_value) ? (parseInt(my_value, 10) + 1) % 10 : "0";

                var stopSpinning = function() {
                    $parentSlot.find('.reel:eq(' + my_index + ')')
                        .html("<div...