Page 1 of 1

CSS Playing Card

Posted: Thu May 07, 2009 9:42 pm
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

Re: CSS Playing Card

Posted: Fri May 08, 2009 6:33 am
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!

Re: CSS Playing Card

Posted: Fri May 08, 2009 7:17 am
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. :)

Re: CSS Playing Card

Posted: Thu May 14, 2009 3:53 pm
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!!!

Re: CSS Playing Card

Posted: Fri May 15, 2009 9:56 am
by Jenk
Or for those of us who actually want to make a living, use images or Javascript like Nifty corners.

Re: CSS Playing Card

Posted: Fri May 15, 2009 10:39 am
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.

Re: CSS Playing Card

Posted: Sat May 16, 2009 7:09 pm
by Jenk
IE is still the dominant of all browsers. I'd be interested to see which browsers consist of the "major 4 browsers". :)

Re: CSS Playing Card

Posted: Thu May 21, 2009 12:06 pm
by kaszu
You can use VML for IE and border-radius for WebKit, FF. Poor Opera :(