JSFiddle - React, Tailwind, and code Playground

by amarcrypto

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="wrapper">
  <div id="game">
    <div id="alert" class="alert alert-error hide"><span></span></div>
    <div id="dealer">
      <div id="dhand"></div>
    </div>
    <div id="player">
      <div id="phand"></div>
    </div>
    <div id="money">
      <span id="cash">Cash: $<span></span></span>
      <div id="bank">Winnings: $<span></span></div>
    </div>
  </div>
  <div id="actions">
    <button id="deal" class="btn">Deal!</button>
    <button id="hit" class="btn" disabled>Hit</button>
    <button id="stand" class="btn" disabled>Stand</button>
    <button id="double" class="btn" disabled>Double Down</button>
    <button id="split" class="btn" disabled>Split</button>
    <button id="insurance" class="btn" disabled>Insurance</button>
    <strong>Wager:</strong> $<input id="wager" class="input-small" type="text" />
  </div>
</div>
<div id="myModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Out of cash!</h3>
  </div>
  <div class="modal-body">
    <p>You ran out of cash, but you spot an ATM nearby. Would you like to withdraw another $1,000 and try your luck again?</p>
  </div>
  <div class="modal-footer">
    <a href="#" id="cancel" class="btn">Nah</a>
    <a href="#" id="newGame" class="btn btn-primary">Yes!</a>
  </div>
</div>

CSS

div[id*="pcard"] .popover { left: -95px !important; }
div[id*="dcard"] .popover { left: -105px !important; }

#wrapper {
	margin: 0 auto;
	width: 1000px;
}

h3 {
	margin: 5px 0;
	text-align: center;
}

#game {
	background: transparent url('https://www.clowerweb.com/cors/blackjack/table.png') 0 0 no-repeat;
	border-radius: 5px;
	color: #333;
	font: 14px/17px Helvetica, Arial, Verdana, sans-serif;
	height: 550px;
	margin: 0 auto;
	position: relative;
	width: 1000px;
}

div#dscore {
	position: absolute;
	bottom: 30px;
}

div#pscore {
	position: absolute;
	bottom: 15px;
}

div#phand, div#dhand {
	font-weight: 700;
	/*left: 50%;*/
	position: absolute;
	top: -122px;
	white-space: nowrap;
	width: 1000px;
}

div#phand { }

div#dhand { }

div[class*="card"] {
	background: #FFF;
	border: 6px solid #FFF;
	border-radius: 5px;
	box-shadow: 0 0 1px #000;
	display: inline-block;
	height: 106px;
	margin: 0 5px;
	position: absolute;
	right: 0;
	width: 79px;
}

.down {
	background: #B20000 url('https://www.clowerweb.com/cors/blackjack/card.png') center center no-repeat !important;
}

span.pos-0 {
	left: 0;
	position: absolute;
	top: 0;
}

span.pos-1 {
	bottom: 0;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	position: absolute;
	right: 0;
	transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

span.rank {
	font-size: 18px;
}

span.suit {
	font-size: 22px;
}

.black {
	color: #000;
}

.red {
	color: #F00;
}

#result {
	position: absolute;
	bottom: 0;
}

#actions {
	margin: 15px 0 0 0;
    text-align: center;
}

input#wager { margin-left: 5px; position: relative; top: 4px }

#money, #money:before {
	border-radius: 5px;
	bottom: 0;
	height: 55px;
	padding: 7px;
	position: absolute;
	right: 0;
	width: 250px;
}

#money {
	border: 2px solid #FFC926;
}

#money:before {
	background: #333;
	content: '';
	opacity: 0.8;
}

	#cash, #bank {
		color: #FFF;
		font: 700 18px/20px Helvetica, Arial, Verdana, sans-serif;
		margin:...

JavaScript

/*

A JavaScript Blackjack game created June 2013 by Chris Clower 
(clowerweb.com). Deck class loosely based on a tutorial at:
http://www.codecademy.com/courses/blackjack-part-1

All graphics and code were designed/written by me except for the
chip box on the table, which was taken from the image at:
http://www.marketwallpapers.com/wallpapers/9/wallpaper-52946.jpg

Uses Twitter Bootstrap and jQuery, which also were not created by
me :)

Fonts used:
* "Blackjack" logo: Exmouth
* Symbol/floral graphics: Dingleberries
* All other fonts: Adobe Garamond Pro

All graphics designed in Adobe Fireworks CS6

You are free to use or modify this code for any purpose, but I ask
that you leave this comment intact. Please understand that this is
still very much a work in progress, and is not feature complete nor
without bugs.

I will also try to comment the code better for future updates :D

*/

/*global $, confirm, Game, Player, renderCard, Card, setActions, 
resetBoard, showBoard, showAlert, getWinner, jQuery, wager */

(function () {

/*****************************************************************/
/*************************** Globals *****************************/
/*****************************************************************/

	var game      = new Game(),
			player    = new Player(),
			dealer    = new Player(),
			running   = false,
			blackjack = false,
			insured   = 0,
			deal;

/*****************************************************************/
/*************************** Classes *****************************/
/*****************************************************************/

	function Player() {
		var hand  = [],
				wager = 0,
				cash  = 1000,
				bank  = 0,
				ele   = '',
				score = '';

		this.getElements = function() {
			if(this === player) {
				ele   = '#phand';
				score = '#pcard-0 .popover-content';
			} else {
				ele   = '#dhand';
				score = '#dcard-0 .popover-content';
			}

			return {'ele': ele, 'score': score};
		};

		this.getHand =...