JSFiddle - React, Tailwind, and code Playground

Please save this file, JSFiddle!

by Joe Cisneros

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="table">
  <div id="Player1">
    <div id="Player1Hand" class="hand"></div>
    <div class="capitol"></div>
  </div>
  <div id="Player2">
    <div id="Player2Hand" class="hand"></div>
    <div class="capitol"></div>
  </div>
</div>

CSS

body {
  background-color: #5C5C5C;
}

#table {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  color: white;
}

#table #cards {
  width: 120px;
  display: inline;
}

.capitol img {
  width: 300px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#table p {
  text-align: center;
}

JavaScript

"use strict";

var URL_IMAGES       = "http://tcisneros.durb.co/KarmaKards/";
var URL_IMAGES_CARDS = URL_IMAGES + "kards/"
/*var numberOfCardsInEachType = 9;

        var cardTypes=new Array("C", "E", "P")//add G for General later.

        var numberOfCardTypes = cardTypes.length;*/

var Card = function(type, number) {
  this.type = type;
  this.image = "Kard" + type + number + ".png";
  //this.behavior = function() {};

  console.log("Card.type: " + this.type +
    "Card.image: " + this.image);
}

var Deck = function() {
  var deck = [], i;
  var typeCCount = 1;
  var typeECount = 9;
  var typePCount = 9;

  this.shuffle = function() {
    return shuffle(deck);
  }

  this.draw = function() {
    return deck.pop();
  }

  this.show = function() {
    for (i = 0; i < deck.length; i++) {
      console.log("deck[" + i + "]:", deck[i].image);
    }
  }

  for (i = 1; i <= typeCCount; i++) {
    deck.push(new Card("C", i));
  }
  for (i = 1; i <= typeECount; i++) {
    deck.push(new Card("E", i));
  }
  for (i = 1; i <= typePCount; i++) {
    deck.push(new Card("P", i));
  }

  shuffle(deck);

  console.log("======DECK ...======")
  this.show();
}

var Hand = function() {
  var hand = [];
  var handSize = 5;

  for (var i = 1; i <= handSize; i++) {
    hand.push(deck.draw());

    console.log("hand " + i + ": " + hand[i-1].image);
  }
  
  this.cards = hand;
}

var Player = function(username, number) {
  this.username = username;
  this.number = number;

  var hand = new Hand();

  console.log("*************** Created Player " +this.number+ ": " +this.username+ " **********");
}


var Room = function() {
  var room = [];

  // Need to create function(player) later..
  //for (var player=1; player <= players.length; player++) { room.push(new Player(players[player-1])); }

  this.addPlayer = function(player) {
    room.push(player);
    console.log(player.username+ " (Player " + player.number+ ") has joined the Room.");
    
    $("#Player" +player.number+...