<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.1.3" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-4">
How many players (2-8):
</div>
<div class="col-md-1">
<input class="form-control" type="number" min="2" max="8" id="numPlayers"/>
</div>
<div class="col-md-1">
<button class="btn btn-primary" onclick="deal()">Deal</button>
</div>
</div>
<div id="players" class="container">
</div>
<div id="table" class="container">
<div class="row" >
<div class="col-md-2">
<h3>Table</h3>
</div>
</div>
<div class="row" id="tableCards" >
</div>
</div>
<!--
<div class="row " style="margin-left:20px;">
ME:
<div id="me" class="hand"></div>
</div>
<div class="row" style="margin-left:20px;">
<div id="totalme"></div>
</div>
<div class="row " style="margin-left:20px;">
Dealer:
<div id="dealer" class="hand"></div>
</div>
<div class="row" style="margin-left:20px;">
<div id="totaldealer"></div>
</div>
<h1 id="result"></h1>-->
</div>
</body>
</html>
// Code goes here
var Card = function(v, t) {
this.value = v;
this.suit = t;
}
var Deck = function() {
var Deck = this;
var values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
var suits = ['♠', '♦', '♥', '♣'];
Deck.cards = [];
for (var i = 0; i < values.length; i++) {
for (var j = 0; j < suits.length; j++) {
this.cards.push(new Card(values[i], suits[j]))
}
}
/* Shuffle Algorithm Taken from online */
Deck.shuffle = function() {
var o = Deck.cards;
for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
Deck.cards = o;
}
Deck.draw = function(num_cards) {
if (num_cards > Deck.cards.length) {
return Deck.cards.splice(0, this.cards.length);
} else {
return Deck.cards.splice(0, num_cards);
}
}
Deck.shuffle();
Deck.shuffle();
Deck.shuffle();
Deck.shuffle();
Deck.shuffle();
}
var deck = new Deck();
function deal(){
var players = parseInt($('#numPlayers').val());
var hands = [];
if(players && (players >= 2 && players <= 8)){
var deck = new Deck();
for(var i = 0;i < players; i++){
hands[i] = deck.draw(2);
}
var burns= [];
var table = [];
burns = burns.concat(deck.draw(1));
table = table.concat(deck.draw(3));
burns = burns.concat(deck.draw(1));
table = table.concat(deck.draw(1));
burns = burns.concat(deck.draw(1));
table = table.concat(deck.draw(1));
render(hands,table,burns);
}else{
alert('Enter a valid number of players!');
}
}
function render(hands,table,burns){
var playerarea = $('#players');
console.log(hands);
console.log(table);
playerarea.empty();
var row1 = '<div class="row" id="row1"></div>';
var row2 = '<div class="row" id="row2"></div>';
/* separate players into 2 rows to look pretty*/
playerarea.append(row1);
if(hands.length >= 4){
playerarea.append(row2);
}
for(var i = 0;i < hands.length; i++){
if(i < 4){
buildPlayer($('#row1'),hands[i],i);
}else{
buildPlayer($('#row2'),hands[i],i)
}
}
buildTable(table);
}
function buildPlayer(row,hand,player){
var playerText = player===0?'Me':'AI '+player;
row.append('<div class="col-md-3 col-sm-3 container" ><div class="row col-md-12 col-sm-12">'+playerText+':</div><div class="row col-md-12 col-sm-12" id="player'+player+'"></div></div>')
var playerHand = $('#player'+player);
for(var i =0;i<hand.length;i++){
buildCard(hand[i],playerHand)
}
}
function buildCard(card,playerHand){
if (card.suit == '♥' || card.suit == '♦') {
var elem = $('<div class="card col-md-6 col-sm-6"><span style="color:red;">' + card.value + card.suit + '<span></div>');
} else {
var elem = $('<div class="card col-md-6 col-sm-6"><span>' + card.value + card.suit + '<span></div>');
}
playerHand.append(elem);
}
function buildTable(table){
var tableArea = $('#tableCards');
tableArea.empty();
for(var i =0; i < table.length;i++){
buildCard(table[i],tableArea);
}
}
.card{
border: 2px solid black;
height: 100px;
width:65px;
background-color:white;
margin-left:5px;
float: left;
text-align:center;
display:table;
}
.card span{
display: table-cell;
vertical-align:middle;
}
.hand{
}
#container{
margin-left:20px;
}
#table{
margin-top:20px;
border:2px solid black;
height:200px;
background-color:Peru;
}