JSFiddle - React, Tailwind, and code Playground

by Klawztro

HTML

<div class='card' style='background:#f00; color:#fff '>Cartão 1</div>
<div class='card' style='background:#0f0; color:#222'>Cartão 2</div>
<div class='card' style='background:#00f; color:#fff '>Cartão 3</div>
<div class='card' style='background:#f0f; color:#fff '>Cartão 4</div>
<div class='card' style='background:#ff0; color:#000'>Cartão 5</div>
<div class='card' style='background:#fca; color:#fff '>Cartão 6</div>
<div class='card' style='background:#210; color:#fff '>Cartão 7</div>
<div class='card' style='background:#9ad; color:#fff '>Cartão 8</div>
<div class='card' style='background:#57a; color:#fff '>Cartão 9</div>
<div class='card' style='background:#32a; color:#fff '>Cartão 10</div>
<p id='winner'></p>

CSS

* {
    font-family:Arial;
}

.card {
    width:100px;
    height:50px;
    padding-top:30px;
    border:1px solid #ccc;
    text-align:center;
    position:absolute;
    background:#fff;
    border-radius:3px;
    top:3px;
    left:3px;
}

.front {
    z-index:2;
}

#winner {
    position:absolute; 
    left:120px;
}

JavaScript

$(function() {
    var NUM_CARDS = $(".card").length;
    var MAX_RAND_INTERVAL = 1000;
    
    function sortear(num_sorteios,time_interval) {
        
        var sorteios = num_sorteios;
        
        var int = setInterval(function() {
            //console.log("Sorteando! " + time_interval + " " + sorteios);
            chooseCard();
            sorteios--;
            if (sorteios < 1 ) {
                clearInterval(int);
                if (time_interval > MAX_RAND_INTERVAL) {
                    showWinner();
                } else {
                    num_sorteios = num_sorteios > 1 ? num_sorteios / 2 : 1;
                    sortear(num_sorteios,time_interval * 2);
                }
                
            }
            
        },time_interval);
    }
    
    function getWinner() {
        return $(".card.front").index() + 1;
    }
    
    function showWinner() {
        var bg = $(".front").css("background-color");
        var color = $(".front").css("color");
        
        $("#winner").html("O cartão vencedor é o: <span>" + $(".front").text() + "</span>");
        $("#winner span").css('background-color',bg);
        $("#winner span").css('color',color);
    }
    
    function chooseCard() {
        showCard(randCard());
    }
    
    
    function randCard() {
        return Math.floor((Math.random()*NUM_CARDS)); 
    }
    
    function showCard(card_index) {
        $(".card").removeClass("front");
        $(".card").eq(card_index).addClass('front');
    }
    
    sortear(50,10);

});