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 /> -->

<div id="playerOutput">

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

JavaScript

//event listeners
var nPlayers = document.getElementById('players');
nPlayers.addEventListener('blur', createPlayers, false);

var cPlayers = document.getElementById('createPlayers');
cPlayers.addEventListener('click', seatPlayers, false);

var sPlayers = document.getElementById('dealCards');
sPlayers.addEventListener('click', dealCards, false);

/*var dFlop = document.getElementById('dealFlop');
dFlop.addEventListener('click', dealFlop, false);*/


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

//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 = document.getElementById('players').value;
    var numOnly = /[0-9]/;
    
 		//if (!(numPlayers.match(numOnly)) || numPlayers > 10 || numPlayers < 2) { return -1; } else { return numPlayers; }
    (!numPlayers.match(numOnly) || numPlayers > 10 || numPlayers < 2) ? return -1 : return numPlayers; 
}
  
//function to "seat the players on the site"
function seatPlayers() {
    
    var players = createPlayers(),
        startGame = true;
    
    if (players != -1) {
        
        var seat =...