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="cardsOutput">
</div> 

<div id="playerOutput">

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

JavaScript

//last edit 2:00pm 12/19/2013
var $ = function(id) { 
    return document.getElementById(id);   
};
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;
     }
};
var nPlayers = $('players'),
    cPlayers = $('createPlayers'), 
    sPlayers = $('dealCards'),
    dFlop = $('dealFlop'),
    cardsOutput = $('cardsOutput'); 
nPlayers.addEventListener('blur', createPlayers, false);
cPlayers.addEventListener('click', seatPlayers, false);
sPlayers.addEventListener('click', dealCards, false);
dFlop.addEventListener('click', dealFlop, false);
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;
}
function shuffleCards() {
    var cards = buildDeck(); //first invocation of 'cards' array
    cards.shuffle();
    return cards;
}     
function createPlayers() {
    if (numPlayers !== -1) { 
        var numPlayers = $('players').value,
            numOnly = /[0-9]/;
        if (!(numPlayers.match(numOnly)) || numPlayers > 10 || numPlayers < 2) {
            return -1;
        } else { return numPlayers; }
        return numPlayers; 
    }
}
function seatPlayers() {    
    var players = createPlayers(),
        startGame = true;    
    if (players !== -1) {        
        var seat = document.getElementById('playerOutput');         
        seat.innerHTML = 'Seating ' + players + ' Players';            
        for (var i = 0;i<players; i++) {
            seat.innerHTML += '<div id="player'+(i+1)+'">Player ' + (i+1) + ' - </div>';
        }       
        console.log(startGame); 
  ...