Skip to content

Instantly share code, notes, and snippets.

@jafstar

jafstar/deck2.html

Last active December 1, 2016 22:00
Show Gist options
  • Save jafstar/6278e2162e48981b8d9ccf7d4fd0a537 to your computer and use it in GitHub Desktop.
Save jafstar/6278e2162e48981b8d9ccf7d4fd0a537 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
deck2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Texas Holdem Simulator</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<!--CONTROL-->
<div id="control">
<button type="button" onclick="ShuffleUpAndDeal();">Shuffle and Deal</button>
<button type="button" onclick="HideShowDeck();">Hide/Show Deck</button>
</div>
<div id="shell">
<!--DECK-->
<div id="deck"></div>
<!--TABLE-->
<div id="table">
<div id="felt">
<div id="community">
<div id="flop"></div>
<div id="turn"></div>
<div id="river"></div>
</div>
</div>
<!--END TABLE-->
<div>
<!--PLAYERS-->
<div id="all_players">
<div id="player1" class="player"><div class="pname">Player 1 - Tom</div><div id="pocket1"></div></div>
<div id="player2" class="player"><div class="pname">Player 2 - Dick</div><div id="pocket2"></div></div>
<div id="player3" class="player"><div class="pname">Player 3 - Jane</div><div id="pocket3"></div></div>
<div id="player4" class="player"><div class="pname">Player 4 - Sally</div><div id="pocket4"></div></div>
</div>
<!--END SHELL-->
</div>
<!--STLYES-->
<style>
body {
/*background: #dcdcdc url('img/retina_wood.png') ;*/
background: #dcdcdc;
}
/***CARD COLOR****/
.card.red, .card.red .suit {
color: #f00 !important;
}
.card.black, .card.black .suit {
color: #000 !important;
}
#deck {
width: 340px;
height: 400px;
background: #333;
padding: 10px;
position: fixed;
right: 0%;
top: 0%;
z-index: 1000;
opacity: 0.7;
display: none;
}
#deck .card {
width: 25px;
height: 40px;
background: #FFF;
border-radius: 3px;
margin: 5px 5px 10px 5px;
float: left;
cursor: pointer;
font: 9px arial;
color: #999;
padding: 2px;
}
#deck .suit {
font: 22px arial;
color: #999;
text-align: center;
padding-top: 0px;
cursor: pointer;
}
#table {
width: 700px;
height: 300px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
margin-left: -350px;
margin-top: -150px;
border-radius: 150px;
}
#felt {
width: 96%;
height: 91%;
/*background: #000 url('img/pool_table.png');*/
background: #000;
margin: 2% 2%;
border-radius: 150px;
}
#community {
width: 400px;
height: 110px;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
margin-top: -55px;
margin-left: -200px;
}
#flop {
position: absolute;
width: 230px;
border: 1px solid #0f0;
}
#turn {
position: absolute;
width: 80px;
left: 240px;
border: 1px solid #00f;
}
#river {
position: absolute;
width: 80px;
left: 330px;
border: 1px solid #f00;
}
.player {
background: #111;
width: 150px;
height: 120px;
}
.player .pname {
background: #333;
text-align: center;
color: #ccc;
font: 14px arial;
}
.player .card {
width: 55px;
height: 80px;
background: #FFF;
border-radius: 3px;
margin: 5px 5px 10px 5px;
float: left;
cursor: pointer;
font: bold 15px arial;
color: #999;
padding: 5px;
}
.player .suit {
font: 44px arial;
color: #999;
text-align: center;
padding-top: 0px;
cursor: pointer;
}
#community {
position: absolute;
}
#table .card {
width: 55px;
height: 80px;
background: #FFF;
border-radius: 3px;
margin: 5px 5px 10px 5px;
float: left;
cursor: pointer;
font: bold 15px arial;
color: #999;
padding: 5px;
}
#table .suit {
font: 44px arial;
color: #999;
text-align: center;
padding-top: 0px;
cursor: pointer;
}
/***************PLAYERS************/
#player1 {
position: fixed;
top: 150px;
left: 50%;
margin-left: -75px;
}
#player2 {
position: fixed;
right: 150px;
top: 50%;
margin-top: -60px;
}
#player3 {
position: fixed;
bottom: 150px;
left: 50%;
margin-left: -75px;
}
#player4 {
position: fixed;
left: 150px;
top: 50%;
margin-top: -60px;
}
</style>
<!--JAVSCRIPT-->
<script type="text/javascript">
//GLOBAL VARS
var DECK_SHOW_BOOL = false;
var DECK_CARDS = [];
var DECK_SUITS = [];
var COMM_CARDS = [];
var COMM_SUITS = [];
var FLOP_CARDS = [];
var TURN_CARD = [];
var RIVER_CARD = [];
var FLOP_SUITS = [];
var TURN_SUITS = [];
var RIVER_SUITS = [];
var Player1_HOLE = [];
var Player2_HOLE = [];
var Player3_HOLE = [];
var Player4_HOLE = [];
var Player1_HOLE_CARDS = [];
var Player2_HOLE_CARDS = [];
var Player3_HOLE_CARDS = [];
var Player4_HOLE_CARDS = [];
var Player1_HOLE_SUITS = [];
var Player2_HOLE_SUITS = [];
var Player3_HOLE_SUITS = [];
var Player4_HOLE_SUITS = [];
var Player1_HAND_CARDS = [];
var Player2_HAND_CARDS = [];
var Player3_HAND_CARDS = [];
var Player4_HAND_CARDS = [];
var Player1_HAND_SUITS = [];
var Player2_HAND_SUITS = [];
var Player3_HAND_SUITS = [];
var Player4_HAND_SUITS = [];
//FUNC CLEAR OLD
function clearOldDeal(){
$('#deck').empty();
$('#flop').empty();
$('#turn').empty();
$('#river').empty();
$('#pocket1').empty();
$('#pocket2').empty();
$('#pocket3').empty();
$('#pocket4').empty();
Player1_HOLE = [];
Player2_HOLE = [];
Player3_HOLE = [];
Player4_HOLE = [];
Player1_HOLE_CARDS = [];
Player2_HOLE_CARDS = [];
Player3_HOLE_CARDS = [];
Player4_HOLE_CARDS = [];
Player1_HOLE_SUITS = [];
Player2_HOLE_SUITS = [];
Player3_HOLE_SUITS = [];
Player4_HOLE_SUITS = [];
DECK_CARDS = [];
DECK_SUITS = [];
COMM_CARDS = [];
COMM_SUITS = [];
FLOP_CARDS = [];
TURN_CARD = [];
RIVER_CARD = [];
FLOP_SUITS = [];
TURN_SUIT = [];
RIVER_SUIT = [];
}
//FUNC
function HideShowDeck(){
if(DECK_SHOW_BOOL){
$('#deck').hide();
DECK_SHOW_BOOL = false;
} else {
$('#deck').show();
DECK_SHOW_BOOL = true;
}
}
//FUNC
function ShuffleUpAndDeal(){
clearOldDeal();
//PLAYERS
var Player1 = [];
var Player2 = [];
var Player3 = [];
var Player4 = [];
/*****************************************CREATE CARDS*******************************/
var suits =['♣','♠','♥','♦']
var cards = ['2','3','4','5','6','7','8','9','10','J','Q','K','A'];
var deck = [];
var players = ['tom','dick','jane','sally'];
//ADDED SORTS
suits.sort(function() { return 0.5 - Math.random() });
cards.sort(function() { return 0.5 - Math.random() });
//console.log(suits);
//console.log(cards);
//CREATE CARDS
$.each(suits, function(index1, suit) {
$.each(cards, function(index2, card) {
if(suit == '♥' || suit == '♦'){
deck.push("<div class='card red'>"+card+"<div class='suit'>" + suit +"</div></div>");
DECK_CARDS.push(card);
DECK_SUITS.push(suit);
} else {
deck.push("<div class='card black'>"+card+"<div class='suit'>" + suit +"</div></div>");
DECK_CARDS.push(card);
DECK_SUITS.push(suit);
}
});
});
/*****************************************SHUFFLE*******************************/
//RANDOM ALGO
var randGen = 0.5 - Math.random();
//SHUFFLE
deck.sort(function() { return randGen});
DECK_CARDS.sort(function() { return randGen});
DECK_SUITS.sort(function() { return randGen});
//SHOW ALL CARDS
$.each(deck, function(index, card) {
$('#deck').append(card);
});
/*****************************************SETUP*******************************/
//COUNT PLAYERS
var totalPlayers = players.length;
//COUNT CARDS
var totalCards = deck.length;
//ROUNDS
//var rounds = totalCards/totalPlayers;
//HOLE CARDS
var totalDealt = totalPlayers * 2;
/*****************************************DEAL*******************************/
//DEAL CARDS
for(var i=0; i < totalDealt; i+=totalPlayers) {
Player1.push(deck[i]);
Player2.push(deck[i + 1]);
Player3.push(deck[i + 2]);
Player4.push(deck[i + 3]);
Player1_HOLE.push(deck[i]);
Player2_HOLE.push(deck[i + 1]);
Player3_HOLE.push(deck[i + 2]);
Player4_HOLE.push(deck[i + 3]);
Player1_HOLE_CARDS.push(DECK_CARDS[i]);
Player2_HOLE_CARDS.push(DECK_CARDS[i + 1]);
Player3_HOLE_CARDS.push(DECK_CARDS[i + 2]);
Player4_HOLE_CARDS.push(DECK_CARDS[i + 3]);
Player1_HOLE_SUITS.push(DECK_SUITS[i]);
Player2_HOLE_SUITS.push(DECK_SUITS[i + 1]);
Player3_HOLE_SUITS.push(DECK_SUITS[i + 2]);
Player4_HOLE_SUITS.push(DECK_SUITS[i + 3]);
//END DEAL
}
//DISPLAY PLAYER CARDS
$.each(Player1, function(index, card) {
$('#pocket1').append(card);
});
$.each(Player2, function(index, card) {
$('#pocket2').append(card);
});
$.each(Player3, function(index, card) {
$('#pocket3').append(card);
});
$.each(Player4, function(index, card) {
$('#pocket4').append(card);
});
/*****************************************FLOP*******************************/
//THE FLOP
var TheFlop = [];
//DEAL FLOP
for(var i=totalDealt; i < totalDealt + 4; i++) {
if(i !== totalDealt){
TheFlop.push(deck[i]);
FLOP_CARDS.push(DECK_CARDS[i]);
FLOP_SUITS.push(DECK_SUITS[i]);
COMM_CARDS.push(DECK_CARDS[i]);
COMM_SUITS.push(DECK_SUITS[i]);
}
}
//DEBUG
//console.log(TheFlop);
//DISPLAY FLOP CARDS
$.each(TheFlop, function(index, card) {
$('#flop').append(card);
});
/*****************************************TURN*******************************/
//THE TURN
var TheTurn = [];
//DEAL TURN
for(var i=totalDealt + 4; i < (totalDealt + 4 + 2); i++) {
if(i !== totalDealt + 4){
TheTurn.push(deck[i]);
TURN_CARD.push(DECK_CARDS[i]);
TURN_SUIT.push(DECK_SUITS[i]);
COMM_CARDS.push(DECK_CARDS[i]);
COMM_SUITS.push(DECK_SUITS[i]);
}
}
//DEBUG
//console.log(TheTurn);
//DISPLAY TURN CARD
$.each(TheTurn, function(index, card) {
$('#turn').append(card);
});
/*****************************************RIVER*******************************/
//THE RIVER
var TheRiver = [];
//DEAL TURN
for(var i=totalDealt + 4 + 2; i < (totalDealt + 4 + 2 +2); i++) {
if(i !== totalDealt + 4 + 2){
TheRiver.push(deck[i]);
RIVER_CARD.push(DECK_CARDS[i]);
RIVER_SUIT.push(DECK_SUITS[i]);
COMM_CARDS.push(DECK_CARDS[i]);
COMM_SUITS.push(DECK_SUITS[i]);
}
}
//DEBUG
//console.log(TheRiver);
//DISPLAY RIVER CARD
$.each(TheRiver, function(index, card) {
$('#river').append(card);
});
checkWinner();
//END FUNCTION
}
//FUNC CHECK WINNER
function checkWinner(){
var P1_C1 = Player1_HOLE[0].replace("<div class='card black'>", "").replace("<div class='card red'>", "").replace("<div class='suit'>", "").replace("</div>", "").replace("</div>", "");
var P1_C2 = Player1_HOLE[1].replace("<div class='card black'>", "").replace("<div class='card red'>", "").replace("<div class='suit'>", "").replace("</div>", "").replace("</div>", "");
var P2_C1 = Player2_HOLE[0].replace("<div class='card black'>", "").replace("<div class='card red'>", "").replace("<div class='suit'>", "").replace("</div>", "").replace("</div>", "");
var P2_C2 = Player2_HOLE[1].replace("<div class='card black'>", "").replace("<div class='card red'>", "").replace("<div class='suit'>", "").replace("</div>", "").replace("</div>", "");
var P3_C1 = Player3_HOLE[0].replace("<div class='card black'>", "").replace("<div class='card red'>", "").replace("<div class='suit'>", "").replace("</div>", "").replace("</div>", "");
var P3_C2 = Player3_HOLE[1].replace("<div class='card black'>", "").replace("<div class='card red'>", "").replace("<div class='suit'>", "").replace("</div>", "").replace("</div>", "");
var P4_C1 = Player4_HOLE[0].replace("<div class='card black'>", "").replace("<div class='card red'>", "").replace("<div class='suit'>", "").replace("</div>", "").replace("</div>", "");
var P4_C2 = Player4_HOLE[1].replace("<div class='card black'>", "").replace("<div class='card red'>", "").replace("<div class='suit'>", "").replace("</div>", "").replace("</div>", "");
/*
console.log(P1_C1, P1_C2);
console.log(P2_C1, P2_C2);
console.log(P3_C1, P3_C2);
console.log(P4_C1, P4_C2);
console.log(COMM_CARDS);
console.log(COMM_SUITS);
console.log(Player1_HOLE_CARDS + "," + Player1_HOLE_SUITS);
console.log(Player2_HOLE_CARDS + "," + Player2_HOLE_SUITS);
console.log(Player3_HOLE_CARDS + "," + Player3_HOLE_SUITS);
console.log(Player4_HOLE_CARDS + "," + Player4_HOLE_SUITS);
*/
Player1_HAND_CARDS = Player1_HOLE_CARDS.concat(COMM_CARDS);
Player2_HAND_CARDS = Player2_HOLE_CARDS.concat(COMM_CARDS);
Player3_HAND_CARDS = Player3_HOLE_CARDS.concat(COMM_CARDS);
Player4_HAND_CARDS = Player4_HOLE_CARDS.concat(COMM_CARDS);
Player1_HAND_SUITS = Player1_HOLE_SUITS.concat(COMM_SUITS);
Player2_HAND_SUITS = Player2_HOLE_SUITS.concat(COMM_SUITS);
Player3_HAND_SUITS = Player3_HOLE_SUITS.concat(COMM_SUITS);
Player4_HAND_SUITS = Player4_HOLE_SUITS.concat(COMM_SUITS);
console.log(Player1_HAND_CARDS + "," + Player1_HAND_SUITS);
console.log(Player2_HAND_CARDS + "," + Player2_HAND_SUITS);
console.log(Player3_HAND_CARDS + "," + Player3_HAND_SUITS);
console.log(Player4_HAND_CARDS + "," + Player4_HAND_SUITS);
//console.log(FLOP_CARDS);
//console.log(FLOP_SUITS);
//console.log(TURN_CARD);
//console.log(TURN_SUIT);
//console.log(RIVER_CARD);
//console.log(RIVER_SUIT);
//CHECK HIGH CARD
//CHECK PAIR
//CHECK TWO PAIR
//CHECK TRIPS
//CHECK STRAIGHT
//CHECK FLUSH
//CHECK HOUSE
//CHECK STRAIGHT FLUSH
//END FUNC
}
//ShuffleUpAndDeal();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment