CSS Playing Card

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

CSS Playing Card

Post by Jenk »

Having got bored of using images for all playing cards, I created a class in smalltalk for rendering cards with CSS, and have now translated to PHP for the hell of it.

Style:

Code: Select all

 
.card {
    border-style: solid;
    border-width: 1px;
    border-color: #eeeeee #000000 #000000 #eeeeee;
    width: 3.75em;
    height: 5em;
    margin: 0.1em;
    float: left;
    position: relative;
    font-size: 24pt;
}
.front {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    position: absolute;
}
.hearts, .diams {
    color: #ff0000;
}
.index {
    position: absolute;
    left: 0.25em;
    font-size: 50%;
    font-weight: bold;
}
.a1 { position: absolute; left: 0.75em; top: 0.25em; }
.a2 { position: absolute; left: 0.75em; top: 1.35em; }
.a3 { position: absolute; left: 0.75em; top: 1.85em; }
.a4 { position: absolute; left: 0.75em; top: 2.5em; }
.a5 { position: absolute; left: 0.75em; top: 3.5em; }
.b1 { position: absolute; left: 1.62em; top: 0.75em; }
.b2 { position: absolute; left: 1.62em; top: 0.9em; }
.b3 { position: absolute; left: 1.62em; top: 2em; }
.b4 { position: absolute; left: 1.62em; top: 2.8em; }
.b5 { position: absolute; left: 1.62em; top: 3.25em; }
.c1 { position: absolute; left: 2.45em; top: 0.25em; }
.c2 { position: absolute; left: 2.45em; top: 1.35em; }
.c3 { position: absolute; left: 2.45em; top: 1.85em; }
.c4 { position: absolute; left: 2.45em; top: 2.5em; }
.c5 { position: absolute; left: 2.45em; top: 3.5em; }
.J, .Q, .K {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 100%;
    width: 100%;
    position: absolute;
}
.A {
    font-size: 300%;
    position: absolute;
    left: 0.3em;
    top: 0.2em;
}
.J {
    background-image: url(jack.gif);
}
.Q {
    background-image: url(queen.gif);
}
.K {
    background-image: url(king.gif);
}
 
Playing card class:

Code: Select all

class PlayingCard {
 
    public static $Clubs = "clubs";
    public static $Diamonds = "diams";
    public static $Hearts = "hearts";
    public static $Spades = "spades";
 
    public $suit;
    public $rank;
    
    function __construct($suit, $rank)
    {
        $this->suit = $suit;
        $this->rank = $rank;
    }
    
    function getRankText()
    {
        switch ($this->rank)
        {
            case 1:
                return 'A';
                break;
            case 11:
                return 'J';
                break;
            case 12:
                return 'Q';
                break;
            case 13:
                return 'K';
                break;
            default:
                return (string)$this->rank;
        }
    }
    
    function positionsForRank()
    {
        switch ($this->rank)
        {
            case 1:
                return array('');
                break;
            case 2:
                return array('b1', 'b5');
                break;
            case 3:
                return array('b1', 'b3', 'b5');
                break;
            case 4:
                return array('a1', 'a5', 'c1', 'c5');
                break;
            case 5:
                return array('a1', 'a5', 'b3', 'c1', 'c5');
                break;
            case 6:
                return array('a1', 'a3', 'a5', 'c1', 'c3', 'c5');
                break;
            case 7:
                return array('a1', 'a3', 'a5', 'b2', 'c1', 'c3', 'c5');
                break;
            case 8:
                return array('a1', 'a3', 'a5', 'b2', 'b4', 'c1', 'c3', 'c5');
                break;
            case 9:
                return array('a1', 'a2', 'a4', 'a5', 'b3', 'c1', 'c2', 'c4', 'c5');
                break;
            case 10:
                return array('a1', 'a2', 'a4', 'a5', 'b2', 'b4', 'c1', 'c2', 'c4', 'c5');
                break;
            default:
                if ($this->rank > 10)
                    return array('a1', 'c5');
                else
                    return array();
        }
    }           
    
    function getSuitText()
    {
        return '&' . $this->suit . ';';
    }
    
    function getIndexHtml()
    {
        $output = '<div class="index">'
            . $this->getRankText()
            . '<br />'
            . $this->getSuitText()
            . '</div>';
            
        return $output;
    }
    
    function getPositionsHtml()
    {
        $output = '<div class="'
            . $this->getRankText()
            . '">';
        foreach ($this->positionsForRank() as $position)
        {
            $output .= '<div class=" '
                . $position
                . '">'
                . $this->getSuitText()
                . '</div>';
        }
        $output .= '</div>';
        return $output;
    }
    
    function getHtml()
    {
        $output = '<div class="card">'
            . '<div class="front '
            . $this->suit
            . '">'
            . $this->getIndexHtml()
            . $this->getPositionsHtml()
            . '</div>'
            . '</div>';
        return $output;
    }
}
Example usage:

Code: Select all

// suits are on static members of the class
// ranks are 1-13 (Ace = 1, King  = 13)
$card = new PlayingCard(PlayingCard::$Hearts, 12); // queen of hearts 
echo $card->getHtml();
Demos:
http://jenk.co.uk/cards/
http://jenk.co.uk/cards/all.php
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: CSS Playing Card

Post by jayshields »

Very nice. One improvement - upside-down rank in bottom right corner of card.

Edit: Also, The Kings/Queens/Jacks are different depending on suit (isn't there some trivia question like which King doesn't have a moustache?). I see you've just used the same King image for all suits. You probably already know this and did it on purpose for simplicities sake!

Edit: Rounded corners!
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Re: CSS Playing Card

Post by Jenk »

Rounded corners are my next "trick" which I will be working on when I get a moment. :) I did not know of the pictures being different for each suit, I'll look into that. :)
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

Re: CSS Playing Card

Post by crazycoders »

PS, for rounded corners, please don't implement it with images, only with -moz and -webkit borders and css3 rounded corners... i wish people stopped trying to make IE compatible, it'll make them learn the hard way to actually respect the standards and work harder!!!
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Re: CSS Playing Card

Post by Jenk »

Or for those of us who actually want to make a living, use images or Javascript like Nifty corners.
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

Re: CSS Playing Card

Post by crazycoders »

Lol i make a living, but i tell my clients that their clients won't see rounded corners on their site unless they use one of the major 4 browsers. If they use IE, they will see straight corners. You'd be surprised how many clients tell me it's ok and to go with CSS/-moz/-webkit.
User avatar
Jenk
DevNet Master
Posts: 3587
Joined: Mon Sep 19, 2005 6:24 am
Location: London

Re: CSS Playing Card

Post by Jenk »

IE is still the dominant of all browsers. I'd be interested to see which browsers consist of the "major 4 browsers". :)
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS Playing Card

Post by kaszu »

You can use VML for IE and border-radius for WebKit, FF. Poor Opera :(
Post Reply