JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<p>How many players?</p>
<input type='text' id='players' /><br />
<input type='submit' value='Seat Players' id='createPlayers' /><br /> 
<input type='submit' value='Shuffle Up &amp; Deal' id='dealCards' /><br />
<input type='submit' value='Deal Flop' id='dealFlop' /><br />
<input type='submit' value='Deal Turn' id='dealTurn' /><br />
<input type='submit' value='Deal River' id='dealRiver' /><br />
<div>
<p>Here's the flop!</p>
<p id='cardsOutput'></p> 
</div> 

<div id="playerOutput">

</div> 
<div id="cardsOutput">
    
</div>

JavaScript

var $ = function(id) { 
	return document.getElementById(id); 
}; 
// "Array" prototype to add "shuffle" function for randomizing array elements
Array.prototype.shuffle = function() {
    var len = this.length, i = len;
    while (i--) {
        var p = parseInt(Math.random()*len), t = this[i];
        this[i] = this[p];
        this[p] = t;
    }
};

//event listeners
var nPlayers = $('players'),
    cPlayers = $('createPlayers'),
    sPlayers = $('dealCards'),
    dFlop = $('dealFlop'),
    dTurn = $('dealTurn'),
    dRiver = $('dealRiver');

nPlayers.addEventListener('blur', createPlayers, false);
cPlayers.addEventListener('click', seatPlayers, false);
sPlayers.addEventListener('click', dealCards, false);
dFlop.addEventListener('click', dealFlop, false);
dTurn.addEventListener('click', dealTurn, false);
dRiver.addEventListener('click', dealRiver, false);

//function to "create" a "deck" of cards and store in a single array
function buildDeck() {
    var cardRanks = [1,2,3,4,5,6,7,8,9,10,11,12,13];
    var cardSuit = ['s','c','h','d'];
    cardRanks.shuffle();
    cardSuit.shuffle();
    var cards = [];
    for (var x = 0;x<cardSuit.length;x++) {
        for (var i = 0;i<cardRanks.length;i++) {
            cards.push(cardRanks[i] + cardSuit[x]);            
        }     
    }
    return cards;
}
// "shuffle" the deck of cards using Array.shuffle()
function shuffleCards() {
    var cards = buildDeck();
    cards.shuffle();
    return cards;
}     
//function to "create players"
function createPlayers() {
    var numPlayers = $('players').value;
    var numOnly = /[0-9]/;
    if (!(numPlayers.match(numOnly)) || numPlayers > 10 || numPlayers < 2) {
        return -1;
    }
    else {      
        return numPlayers;
    }
}
//function to "seat the players on the site"
function seatPlayers() {   
    var players = createPlayers(),
        startGame = true;
    if (players != -1) {
        var seat = $('playerOutput'); 
        seat.innerHTML = 'Seating ' + players...