JSFiddle - React, Tailwind, and code Playground

by Alan Monger

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body>
    <div class="container">
        <div class="row">
            <div class="span12">
                <canvas id="canvas" width="595px" height="160px"></canvas>
            </div>
        </div>
        <div class="row">
            <div class="span12">
                <table class="table table-striped">
                    <thead>
                        <th>Hand</th>
                        <th>Found</th>
                        <th>Sample</th>
                        <th>Percentage</th>
                    </thead>
                    <tr>
                        <td>Royal Flush
                            <div class="bar percentBar royalFlush">
                        </td>
                        <td id="royalFlush">0</td>
                        <td id="count"></td>
                        <td id="royalFlushPercentage"></td>
                    </tr>
                    <tr>
                        <td>Straight Flush
                            <div class="bar percentBar straightFlush">
                        </td>
                        <td id="straightFlush">0</td>
                        <td id="count"></td>
                        <td id="straightFlushPercentage"></td>
                    </tr>
                    <tr>
                        <td>Four of a Kind
                            <div class="bar percentBar fourOfAKind">
                        </td>
                        <td id="fourOfAKind">0</td>
                        <td id="count"></td>
                        <td id="fourOfAKindPercentage"></td>
                    </tr>
                    <tr>
                        <td>Full House
                            <div class="bar percentBar fullHouse">
                        </td>
                        <td id="fullHouse">0</td>
                        <td id="count"></td>
                        <td id="fullHousePercentage"></td>
  ...

CSS

.row {
    background:#fff;
}
div {
    text-align:center;
}
.container {
    margin-top:40px;
}
td {
    position:relative;
    z-index:100;
}
div.percentBar {
    width:50%;
    height:100%;
    background-color:orange;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

JavaScript

var Deck = function () {};
Deck.prototype.gather = function () {
    Deck.prototype.Deck = new Array();
    for (var suit = 0; suit < 4; suit++) { //Add all cards
        for (var rank = 0; rank < 13; rank++) {
            var c = new Card();
            c.init(suit, rank);
            this.add(c);
        }
    }
};
Deck.prototype.add = function (Card) {
    this.Deck.push(Card);
};
Deck.prototype.shuffle = function () {
    var i = this.Deck.length,
        j, tempi, tempj;
    if (i == 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        tempi = this.Deck[i];
        tempj = this.Deck[j];
        this.Deck[i] = tempj;
        this.Deck[j] = tempi;
    }
};
Deck.prototype.topCard = function () {
    var current = this.Deck.pop();
    current.get();
    return current;
};

var Card = function () {};
Card.prototype.suit = 0;
Card.prototype.rank = 0;
Card.prototype.suits = ['Hearts', 'Diamonds', 'Clubs', 'Spades'];
Card.prototype.ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
Card.prototype.init = function (suit, rank) {
    this.suit = suit;
    this.rank = rank;
};
Card.prototype.get = function () {
    //console.log(this.ranks[this.rank], 'of', this.suits[this.suit]);
};
Card.prototype.getNamedSuit = function () {
    return this.suits[this.suit];
}
Card.prototype.getSuit = function () {
    return this.suit;
};
Card.prototype.getNamedRank = function () {
    return this.ranks[this.rank];
}
Card.prototype.getRank = function () {
    return this.rank;
};

var Felt = function () {};
Felt.prototype.count = 0;
Felt.prototype.drawcard = function (Card) {
    canv = document.getElementById("canvas");
    ctx = canv.getContext("2d");
    var cardx = Card.rank;
    var cardy = Card.suit;

    var x = 123 * this.count;
    var y = 0;
    var cardImage = new Image();
    cardImage.onload = function () {
        ctx.drawImage(cardImage, 125 * cardx, 181 * cardy, 125, 180, x, y, 100, 160);
    }
   ...