Poker Hand Detector

v0.1 Counts how many of each color, suit and face value.

HTML

<div id="hand">
    <span class="card" id="card-0"></span>
    <span class="card" id="card-1"></span>
    <span class="card" id="card-2"></span>
    <span class="card" id="card-3"></span>
    <span class="card" id="card-4"></span>
</div>
<div id="info">-</div>

CSS

#hand {
    padding: 2px;
}

.card {
    margin: 2px;
    display: inline-block;
    width: 72px;
    height: 97px;
}
.spade {
    background-position-y: -197px;
}
.heart {
    background-position-y: -99px;
}
.club {
    background-position-y: -1px;
}
.diamond {
    background-position-y: -295px;
}

._A {
    background-position-x: -1px;
}
._2 {
    background-position-x: -74px;
}
._3 {
    background-position-x: -147px;
}
._4 {
    background-position-x: -220px;
}
._5 {
    background-position-x: -293px;
}
._6 {
    background-position-x: -366px;
}
._7 {
    background-position-x: -439px;
}
._8 {
    background-position-x: -512px;
}
._9 {
    background-position-x: -585px;
}
._10 {
    background-position-x: -658px;
}
._J {
    background-position-x: -731px;
}
._Q {
    background-position-x: -804px;
}
._K {
    background-position-x: -877px;
}
.joker-black {
    background-position: -950px -1px;
}
.joker-red {
    background-position: -950px -100px;
}




.card {
	background-image:...

JavaScript

var dummyData = [
    { suit : 'heart', rank : '_3' },
    { suit : 'spade', rank : '_A' },
    { suit : 'heart', rank : '_5' },
    { suit : 'club', rank : '_8' },
    { suit : 'diamond', rank : '_Q' }
];

$(function () {
    //Set up dummy data for each card
    $('.card').each(function (index) {
        $(this).data('suit', dummyData[index].suit);
        $(this).data('rank', dummyData[index].rank);
        $(this).addClass(dummyData[index].suit);
        $(this).addClass(dummyData[index].rank);
        
    });
    
    //On mousedown, increment the rank. On RMBdown, change suits.
    $('.card').mousedown(function (event) {
        
        if (event.which == 1) {
            var currentRank = 0;
            var newRank = 0;
            
            //Find what class we currently set it to
            currentRank = $(this).data('rank');
            newRank = cardIds.indexValues[
                (cardIds.indexValues.indexOf(currentRank) + 1) % 
                (cardIds.indexValues.length - 1)
            ];
            
            if (currentRank) {
                $(this)
                    .data('rank', newRank)
                    .removeClass(currentRank)
                    .addClass(newRank);
            }
        }
        else if (event.which == 3) {
            if ($(this).data('suit') == 'spade') {
                $(this)
                    .data('suit', 'heart')
                    .removeClass('spade')
                    .addClass('heart');
            }
            else if ($(this).data('suit') == 'heart') {
                $(this)
                    .data('suit', 'club')
                    .removeClass('heart')
                    .addClass('club');
            }
            else if ($(this).data('suit') == 'club') {
                $(this)
                    .data('suit', 'diamond')
                    .removeClass('club')
                    .addClass('diamond');
            }
            else if ($(this).data('suit') == 'diamond') {
   ...