JSFiddle - React, Tailwind, and code Playground

by Olayinka Otuniyi

HTML

<body oncontextmenu="return false;">
    <img src="/front_menu_gslots/img/g2_logo_blue.png" style="position:absolute; margin-left:755px; margin-top:500px;" />
    <img src="/front_menu_gslots/img/g2_logo_blue.png" style="position:absolute; margin-left:755px; margin-top:1580px;" />

    <div id="body_content" style="opacity: 0;">
        <!-- TOP SCREEN -->
        <div id="top_screen">
            <img id="top_img" src="img/top/bg.png" />

            <img class="demo_banner" src="img/demo.png" style="top: 0px; left: 1720px; position: absolute;" />


            <img id="paytable" src="img/top/prizes/100.png" />

            <div id="jackpot_container">
                <div id="jackpot_vid_container">
                    <video id="jackpot_vid" width="1920" height="1080"><source src="vid/jackpot.webm" type="video/webm"></video>
                </div>
            </div>


        </div>
        <!--  -->


        <!-- BOTTOM SCREEN -->
        <div id="bottom_screen">
            <div id="message_container"></div>

            <!-- REELS -->
            <img src="img/bottom/reels_bg.png" style="position: absolute; top:0px; left: 0px;" />
            <img id="free_spins_reels_bg" src="img/free_spins/free_spins_bg.png" style="position: absolute; top:0px; left: 0px;" />
            <img id="wild_spins_bg" src="img/wild_spins/wild_spins_bg.png" style="position: absolute; top:0px; left: 0px;" />
            <!--            <img id="parade_feature_bg" src="img/parade_feature/parade_feature_bg.png" style="position: absolute; top:0px; left:0px;"/>-->

            <div id="explosion_container"></div>
            <div id="reels_container"></div>
            <div id="logo_bg_container"></div>
            <!--  -->

            <div id="reelus_maximus_reel_container"></div>
            <div id="reelus_maximus_cover_container"></div>

            <div id="wild_cards_container">
                <canvas id="wild_card_0_canvas" width=305 height=690></canvas>
               ...

JavaScript

// gamble ladder


function changeGamble() {
    switch (slotoids.gamble.state) {
        case true:
            var src = 'img/buttons/gamble/gambleon.png';
            break;
        case false:
            var src = 'img/buttons/gamble/gambleoff.png';
            break;
        case 5:
            var src = 'img/buttons/gamble/gamble5.png';
            break;
    }

    $('#gamble_text').attr('src', src);
}

var gambletron = {
    initial_prize: 0,

    featureTimeout: false,
    clearFeatureTimeout: function () {
        // console.info('clear')
        clearTimeout(this.featureTimeout);
        this.featureTimeout = false;
    },

    resetFeatureTimeout: function (func) {
        // console.info('reset');
        this.featureTimeout = setTimeout(function () {
            func();
        }, 300000);
    },

    hello_merlin: false,

    banked: 0,

    to_gamble: 0,

    music: false,

    old_top: 0,

    spinning: false,
    banking: false,
    changingGamble: false,
    haswon: false,
    button_change: false,


    targets: [
        {
            i: 0,
            cash: 5
        }, {
            i: 1,
            cash: 10
        }, {
            i: 2,
            cash: 15
        }, {
            i: 3,
            cash: 20
        }, {
            i: 4,
            cash: 25
        }, {
            i: 5,
            cash: 30
        },
        {
            i: 6,
            cash: 35
        }, {
            i: 7,
            cash: 40
        }, {
            i: 8,
            cash: 45
        }, {
            i: 9,
            cash: 50
        }, {
            i: 10,
            cash: 55
        }, {
            i: 11,
            cash: 60
        },
        {
            i: 12,
            cash: 65
        }, {
            i: 13,
            cash: 70,
        }, {
            i: 14,
            cash: 80
        }, {
            i: 15,
            cash: 90
        }, {
            i: 16,
            cash: 100
        }
	],

    left_arrow_positions:...