Hold`em

by wrxsti85

HTML

<div class="table">
    <div class="seats"></div>
    <div class="playmat">
        <div class="flop">
            <div class="slot"></div>
            <div class="slot"></div>
            <div class="slot"></div>
        </div>
        <div class="turn"></div>
        <div class="river"></div>
        <div class="chip-total"></div>
    </div>
</div>
<div class="toolbar">
    <button class="start">Sit at Table</button>
    <button class="check">Check</button>
    <button class="call">Call</button>
    <button class="raise">Raise</button>
    <button class="fold">Fold</button>
    <button class="check-fold">Check/Fold</button>
</div>

CSS

.seats {
    float: left;
}

.seat {
    margin: 15px;
    border: solid 1px #000;
    position: relative;
}

.seat.action {
    border: solid 1px blue;
}

.seat.fold {
    border: solid 1px red;
}

.seat .info {
    float: left;
    vertical-align: top;
}

.seat .avatar {
    width: 60px;
    height: 60px;
    background: url(https://financemd.files.wordpress.com/2015/08/facebook-default-no-profile-pic.jpg);
    background-size: 100%;
    float: left;
    margin-right: 10px;
}

.seat .button {
    float: left;
    color: #fff;
    background: #000;
}

.seat .hand {
    float: left;
    width: 100px;
    height: 40px;
    margin-left: 10px;
}

.seat .bet {
    position: absolute;
    bottom: 2px;
    right: 2px;
}

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

.toolbar {
    position: fixed;
    bottom: 0px;
    height: 30px;
    text-align: center;
}

JavaScript

var playerController = {
	action: 2,
    actionstart: 0,
	players: [{
        name: 'p1',
        chips: 50000,
        hand: [],
        bet: 0,
        state: true
    }, {
        name: 'p2',
        chips: 50000,
        hand: [],
        bet: 0,
        state: true
    }, {
        name: 'p3',
        chips: 50000,
        hand: [],
        bet: 0,
        state: true
    }, {
        name: 'p4',
        chips: 50000,
        hand: [],
        bet: 0,
        state: true
    }, {
        name: 'p5',
        chips: 50000,
        hand: [],
        bet: 0,
        state: true
    }, {
        name: 'p6',
        chips: 50000,
        hand: [],
        bet: 0,
        state: true
    }]
};

var dealerController = {
	deck: [{
        class: 'spade',
        value: 1,
        face: 'A',
        state: false
    }, {
        class: 'spade',
        value: 2,
        face: '2',
        state: false
    }, {
        class: 'spade',
        value: 3,
        face: '3',
        state: false
    }, {
        class: 'spade',
        value: 4,
        face: '4',
        state: false
    }, {
        class: 'spade',
        value: 5,
        face: '5',
        state: false
    }, {
        class: 'spade',
        value: 6,
        face: '6',
        state: false
    }, {
        class: 'spade',
        value: 7,
        face: '7',
        state: false
    }, {
        class: 'spade',
        value: 8,
        face: '8',
        state: false
    }, {
        class: 'spade',
        value: 9,
        face: '9',
        state: false
    }, {
        class: 'spade',
        value: 10,
        face: '10',
        state: false
    }, {
        class: 'spade',
        value: 11,
        face: 'J',
        state: false
    }, {
        class: 'spade',
        value: 12,
        face: 'Q',
        state: false
    }, {
        class: 'spade',
        value: 13,
        face: 'K',
        state: false
    }, {
        class: 'heart',
        value: 1,
        face: 'A',
       ...