JSFiddle - React, Tailwind, and code Playground

by rionmonster

HTML

<div id='game'>
    <div id='computer'>
      <div id='computerCount'></div>
        <div id='cCard'></div>
    </div>  
    <div id='player'>
        <div id='playerCount'></div>
        <div id='pCard'></div>
    </div>
    <div id='progress'></div>
    <div id='menu'>
        <div id='str'>STR 0</div>
        <div id='sta'>STA 0</div>
        <div id='agi'>AGI 0</div>
        <div id='int'>INT 0</div>
        <div style='float: right; width: 200px; text-align: center;margin-top: -45px;'>
            <input type='button' value='PLAY' />
        </div>
    </div>
</div>

CSS

#game{ background-color: green; }
#computer { background-color: green; width: 100%}
#player{ background-color: green; width: 100%}
#menu { background-color: ThreeDDarkShadow; width: 100%;}
#progress{ background-color: #000; width: 100%;}
#cCard { height: 200px; width: 160px; background-color: white; position: absolute; left: 40%; top: 5%;}
#pCard { height: 200px; width: 160px; background-color: white; position: absolute; left: 40%; top: 45%;}

JavaScript

$("#computer").height($(window).height()*0.40);
$("#player").height($(window).height()*0.40);
$("#menu").height($(window).height()*0.15);
$("#progress").height($(window).height()*0.02);

var gameDeck,p,c;

$('input').click(function()
{
    gameDeck = new Deck();
    gameDeck.build(1);
    gameDeck.shuffle(7);
    p = new Player();
    c = new Player();
    InitialDeal();
});



//Initial Deal
function InitialDeal()
{
     for(var i = 0; i<52; i++)
     {
            if(i%2==0)
            {
                p.cards.push(gameDeck.deal());
            }
            else
            {
                c.cards.push(gameDeck.deal());   
            }
         
     } 
     $("#playerCount").text(p.cards.length);
}



//Constructor (Player)
function Player()
{
    this.cards = new Array();
    this.str = 0;
    this.sta = 0;
    this.int = 0;
    this.agi = 0;
}


//Constructor (Card)
function Card(rank, suit) {this.rank = rank;this.suit = suit;}

//Constructor (Deck)
function Deck() {
  this.cards     = new Array();
  this.build     = BuildDeck;
  this.shuffle   = Shuffle;
  this.draw      = Draw;
  this.addCard   = AddCard;
  this.count     = Count;
}
//Deck Functions
function BuildDeck(n) {
  var ranks = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9","10", "J", "Q", "K");
  var suits = new Array("C", "D", "H", "S");
  var i, j, k;
  var m;
  m = ranks.length * suits.length;
  this.cards = new Array(n * m);
  for (i = 0; i < n; i++)
    for (j = 0; j < suits.length; j++)
      for (k = 0; k < ranks.length; k++)
        this.cards[i * m + j * ranks.length + k] =
          new Card(ranks[k], suits[j]);
}
function Shuffle(n) {

  var i, j, k;
  var temp;
  for (i = 0; i < n; i++)
    for (j = 0; j < this.cards.length; j++) {
      k = Math.floor(Math.random() * this.cards.length);
      temp = this.cards[j];
      this.cards[j] = this.cards[k];
      this.cards[k] = temp;
    }
}
function Draw(n) {
  var card;
  if (n >= 0 && n < this.cards.length) {
    card =...