HTML5, CSS3 & JS Experiments

By Martin Ivanov

Playing Cards Deck

AcidJs.XDeck is a HTML5 Web Component for rendering playing cards decks, hands and presets with simple but powerful API, methods and custom events. Using it is easy as using basic HTML:

<acidjs-xdeck>
    <acidjs-xdeck-card suit="joker" removeonplay="false"></acidjs-xdeck-card>
    <acidjs-xdeck-card rank="9" suit="spades" removeonplay="false"></acidjs-xdeck-card>
    <acidjs-xdeck-card rank="10" suit="hearts" removeonplay="false"></acidjs-xdeck-card>
    <acidjs-xdeck-card rank="jack" suit="clubs" removeonplay="false"></acidjs-xdeck-card>
</acidjs-xdeck>

Make sure you download AcidJs.XDeck for offline testing, because the distribution contains much more demos and details about the API of the component than this page.

Demo

Open your browser's console to check the data returned by the card:play and card:flip events of the component. Hover to see available actions. For better insight of AcidJsXDeck's API, check the documentation in the AcidJs.XDeck/classes/XDeck.html file. As of October 2014, IE still does not support properly backface-visibility, so flipping does not work consistently on this browser and I did not use hacks on purpose.

Don't Remove Card After Play

Some Cards Facedown

Some Cards Non-flippable or Non-playable

Render Preset Hands (hand data is stored in AcidJs.XDeck/classes/XDeck.Hands.js)

You can use the AcidJs.XDeck/classes/XDeck.Hands.js file to add as many preset hands as you need.

4 Aces
4 Jacks
Royal Flush
4 of a Kind
Full House
Full House

Random 10 Cards

Random 6 Cards Facedown

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XDeck/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XDeck/classes/XDeck.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
            <p>Open your browser's console to check the data returned by 
                the <code>card:play</code> and <code>card:flip</code> events of 
                the component. Hover to see available actions. For better insight 
                of AcidJsXDeck's API, check the documentation 
                in the AcidJs.XDeck/classes/XDeck.html file. As of October 2014, 
                IE still does not support properly
                <code>backface-visibility</code>, so flipping does not work 
                consistently on this browser and I did not use hacks on purpose.</p>
            
            <acidjs-xdeck>
                <acidjs-xdeck-card rank="2" suit="spades"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="3" suit="hearts"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="4" suit="diamonds"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="5" suit="hearts"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="6" suit="hearts"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="7" suit="clubs"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="8" suit="clubs"></acidjs-xdeck-card>
                <acidjs-xdeck-card suit="joker"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="9" suit="spades"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="10" suit="hearts"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="jack" suit="clubs"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="queen" suit="spades"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="king" suit="hearts"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="ace" suit="spades"></acidjs-xdeck-card>
                <acidjs-xdeck-card suit="joker"></acidjs-xdeck-card>
            </acidjs-xdeck>
            
            <h4>Don't Remove Card After Play</h4>
            
            <acidjs-xdeck>
                <acidjs-xdeck-card suit="joker" removeonplay="false"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="9" suit="spades" removeonplay="false"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="10" suit="hearts" removeonplay="false"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="jack" suit="clubs" removeonplay="false"></acidjs-xdeck-card>
            </acidjs-xdeck>
            
            <h4>Some Cards Facedown</h4>
            
            <acidjs-xdeck>
                <acidjs-xdeck-card rank="ace" suit="spades"></acidjs-xdeck-card>
                <acidjs-xdeck-card facedown="true" rank="jack" suit="clubs"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="queen" suit="diamonds"></acidjs-xdeck-card>
                <acidjs-xdeck-card suit="joker"></acidjs-xdeck-card>
                <acidjs-xdeck-card facedown="true" rank="king" suit="hearts"></acidjs-xdeck-card>
            </acidjs-xdeck>
            
            <h4>Some Cards Non-flippable or Non-playable</h4>
            
            <acidjs-xdeck>
                <acidjs-xdeck-card rank="ace" suit="spades"></acidjs-xdeck-card>
                <acidjs-xdeck-card flip="false" facedown="true" rank="jack" suit="clubs"></acidjs-xdeck-card>
                <acidjs-xdeck-card flip="false" rank="queen" suit="diamonds"></acidjs-xdeck-card>
                <acidjs-xdeck-card suit="joker"></acidjs-xdeck-card>
                <acidjs-xdeck-card flip="false" facedown="true" rank="king" suit="hearts"></acidjs-xdeck-card>
                <acidjs-xdeck-card play="false" rank="queen" suit="spades"></acidjs-xdeck-card>
                <acidjs-xdeck-card play="false" flip="false" rank="king" suit="hearts"></acidjs-xdeck-card>
                <acidjs-xdeck-card rank="ace" suit="spades"></acidjs-xdeck-card>
                <acidjs-xdeck-card suit="joker"></acidjs-xdeck-card>
            </acidjs-xdeck>
            
            <h4>Render Preset Hands (hand data is stored in AcidJs.XDeck/classes/XDeck.Hands.js)</h4>
            <p>You can use the AcidJs.XDeck/classes/XDeck.Hands.js file to add as many preset hands as you need.</p>
            
            <div class="table">
                <div>
                    <div>
                        <h5>4 Aces</h5>
                        <acidjs-xdeck hand="4 aces"></acidjs-xdeck>
                    </div>
                    <div>
                        <h5>4 Jacks</h5>
                        <acidjs-xdeck hand="4 jacks"></acidjs-xdeck>
                    </div>
                    <div>
                        <h5>Royal Flush</h5>
                        <acidjs-xdeck hand="royal flush"></acidjs-xdeck>
                    </div>
                </div>
                <div>
                    <div>
                        <h5>4 of a Kind</h5>
                        <acidjs-xdeck hand="4 of a kind"></acidjs-xdeck>
                    </div>
                    <div>
                        <h5>Full House</h5>
                        <acidjs-xdeck hand="full house"></acidjs-xdeck>
                    </div>
                    <div>
                        <h5>Full House</h5>
                        <acidjs-xdeck hand="flush"></acidjs-xdeck>
                    </div>
                </div>
            </div>
            
            <h4>Random 10 Cards</h4>
            
            <acidjs-xdeck random="10"></acidjs-xdeck>
            
            <h4>Random 6 Cards Facedown</h4>
            
            <acidjs-xdeck random="6" facedown="true"></acidjs-xdeck>
        
/*
 * X-Deck Web Component by Martin Ivanov (@wemakesitesnet)
 * Component Stylesheet File
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://martinivanov.net/
 **/

/*
 * USAGE:
 * 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
 * 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required. 
 **/
acidjs-xdeck,
acidjs-xdeck *
{
    margin: 0;
    border: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xdeck,
acidjs-xdeck a
{
    display: block;
}

acidjs-xdeck acidjs-xdeck-card:empty,
acidjs-xdeck acidjs-xdeck-card > div div:last-child li:last-child
{
    display: none;
}

acidjs-xdeck li,
acidjs-xdeck button,
acidjs-xdeck acidjs-xdeck-card
{
    display: inline-block;
}

acidjs-xdeck ul,
acidjs-xdeck .acidjs-xdeck-card-remove,
acidjs-xdeck acidjs-xdeck-card.acidjs-xdeck-card-remove:hover
{
    opacity: 0;
}

acidjs-xdeck a,
acidjs-xdeck ul,
acidjs-xdeck acidjs-xdeck-card > div div
{
    position: absolute;
}

acidjs-xdeck acidjs-xdeck-card,
acidjs-xdeck acidjs-xdeck-card > div 
{
    position: relative;
    
    transition: .5s;
}

acidjs-xdeck .acidjs-xdeck-card-playing,
acidjs-xdeck acidjs-xdeck-card.acidjs-xdeck-card-playing:hover
{
    transform: scale(.85);
}

acidjs-xdeck .acidjs-xdeck-card-remove,
acidjs-xdeck acidjs-xdeck-card.acidjs-xdeck-card-remove:hover
{
    transform: translatey(-117px);
    transition: all .5s cubic-bezier(.6, -.280, .735, .045);
}

acidjs-xdeck acidjs-xdeck-card[facedown="true"] > div,
acidjs-xdeck acidjs-xdeck-card > div div:last-child
{
    transform: rotateY(180deg);
}

acidjs-xdeck button,
acidjs-xdeck acidjs-xdeck-card > div div:first-child
{
    background-repeat: no-repeat;
}

acidjs-xdeck li,
acidjs-xdeck button
{
    vertical-align: top;
}

acidjs-xdeck acidjs-xdeck-card[flip="false"] button[name="flip"],
acidjs-xdeck acidjs-xdeck-card[play="false"] button[name="play"]
{
    opacity: .5;
    cursor: default;
    
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

acidjs-xdeck acidjs-xdeck-card
{
    width: 36px;
    margin: .25em;
    perspective: 500px;
}

acidjs-xdeck acidjs-xdeck-card:hover ul
{
    opacity: 1;
}

acidjs-xdeck acidjs-xdeck-card:hover
{
    z-index: 10;
    transform: scale(1.05);
}

acidjs-xdeck acidjs-xdeck-card > div 
{
    transform-style: preserve-3d;
}

acidjs-xdeck acidjs-xdeck-card > div div
{
    top: 0;
    left: 0;
    box-shadow: 0 0 2px #000;
    border-radius: 7px;
    backface-visibility: hidden;
}

acidjs-xdeck acidjs-xdeck-card > div div:first-child
{
    z-index: 5;
    transform: rotateY(0deg);
}

acidjs-xdeck acidjs-xdeck-card > div div:last-child
{
    border: solid 1px #000;
    background: #3c8c4c url("images/back.png") no-repeat center;
    background-size: 50%;
}

acidjs-xdeck acidjs-xdeck-card *
{
    width: 81px;
    height: 117px;
}

acidjs-xdeck a,
acidjs-xdeck ul,
acidjs-xdeck li,
acidjs-xdeck button
{
    height: 20px;
}

acidjs-xdeck acidjs-xdeck-card > div div:first-child
{
    background-image: url("images/deck.gif");
}

acidjs-xdeck a
{
    text-align: center;
    text-decoration: none;
    font: normal 10px/16px Helvetica, Arial, Sans-serif;
    color: #fff;
}

acidjs-xdeck ul
{
    bottom: 3px;
    left: 3px;
    width: 100%;
    transition: opacity .5s .25s ease-in;
}

acidjs-xdeck li
{
    width: 20px;
}

acidjs-xdeck li:first-child
{
    margin-right: 2px;
}

acidjs-xdeck button
{
    width: 20px;
    line-height: 0;
    background-color: rgba(60, 140, 76, 1);
    background-position: center;
    background-size: 90%;
    border-radius: 5px;
    cursor: pointer;
}

acidjs-xdeck acidjs-xdeck-card > div div:last-child button
{
    background-color: #e34f26;
}

acidjs-xdeck button:-moz-focus-inner
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

acidjs-xdeck button::-moz-focus-inner
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

acidjs-xdeck button[name="play"]
{
    background-image: url("images/play.svg")
}

acidjs-xdeck button[name="flip"]
{
    background-image: url("images/flip.svg")
}

acidjs-xdeck acidjs-xdeck-card[rank="2"][suit="hearts"] > div div:first-child
{
    background-position: 0 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="3"][suit="hearts"] > div div:first-child
{
    background-position: -81px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="4"][suit="hearts"] > div div:first-child
{
    background-position: -162px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="5"][suit="hearts"] > div div:first-child
{
    background-position: -243px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="6"][suit="hearts"] > div div:first-child
{
    background-position: -324px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="7"][suit="hearts"] > div div:first-child
{
    background-position: -405px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="8"][suit="hearts"] > div div:first-child
{
    background-position: -486px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="9"][suit="hearts"] > div div:first-child
{
    background-position: -567px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="10"][suit="hearts"] > div div:first-child
{
    background-position: -648px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="jack"][suit="hearts"] > div div:first-child
{
    background-position: -729px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="queen"][suit="hearts"] > div div:first-child
{
    background-position: -810px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="king"][suit="hearts"] > div div:first-child
{
    background-position: -891px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="ace"][suit="hearts"] > div div:first-child
{
    background-position: -972px 0;
}

acidjs-xdeck acidjs-xdeck-card[rank="2"][suit="diamonds"] > div div:first-child
{
    background-position: 0 -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="3"][suit="diamonds"] > div div:first-child
{
    background-position: -81px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="4"][suit="diamonds"] > div div:first-child
{
    background-position: -162px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="5"][suit="diamonds"] > div div:first-child
{
    background-position: -243px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="6"][suit="diamonds"] > div div:first-child
{
    background-position: -324px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="7"][suit="diamonds"] > div div:first-child
{
    background-position: -405px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="8"][suit="diamonds"] > div div:first-child
{
    background-position: -486px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="9"][suit="diamonds"] > div div:first-child
{
    background-position: -567px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="10"][suit="diamonds"] > div div:first-child
{
    background-position: -648px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="jack"][suit="diamonds"] > div div:first-child
{
    background-position: -729px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="queen"][suit="diamonds"] > div div:first-child
{
    background-position: -810px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="king"][suit="diamonds"] > div div:first-child
{
    background-position: -891px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="ace"][suit="diamonds"] > div div:first-child
{
    background-position: -972px -117px;
}

acidjs-xdeck acidjs-xdeck-card[rank="2"][suit="clubs"] > div div:first-child
{
    background-position: 0 -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="3"][suit="clubs"] > div div:first-child
{
    background-position: -81px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="4"][suit="clubs"] > div div:first-child
{
    background-position: -162px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="5"][suit="clubs"] > div div:first-child
{
    background-position: -243px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="6"][suit="clubs"] > div div:first-child
{
    background-position: -324px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="7"][suit="clubs"] > div div:first-child
{
    background-position: -405px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="8"][suit="clubs"] > div div:first-child
{
    background-position: -486px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="9"][suit="clubs"] > div div:first-child
{
    background-position: -567px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="10"][suit="clubs"] > div div:first-child
{
    background-position: -648px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="jack"][suit="clubs"] > div div:first-child
{
    background-position: -729px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="queen"][suit="clubs"] > div div:first-child
{
    background-position: -810px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="king"][suit="clubs"] > div div:first-child
{
    background-position: -891px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="ace"][suit="clubs"] > div div:first-child
{
    background-position: -972px -235px;
}

acidjs-xdeck acidjs-xdeck-card[rank="2"][suit="spades"] > div div:first-child
{
    background-position: 0 -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="3"][suit="spades"] > div div:first-child
{
    background-position: -81px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="4"][suit="spades"] > div div:first-child
{
    background-position: -162px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="5"][suit="spades"] > div div:first-child
{
    background-position: -243px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="6"][suit="spades"] > div div:first-child
{
    background-position: -324px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="7"][suit="spades"] > div div:first-child
{
    background-position: -405px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="8"][suit="spades"] > div div:first-child
{
    background-position: -486px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="9"][suit="spades"] > div div:first-child
{
    background-position: -567px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="10"][suit="spades"] > div div:first-child
{
    background-position: -648px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="jack"][suit="spades"] > div div:first-child
{
    background-position: -729px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="queen"][suit="spades"] > div div:first-child
{
    background-position: -810px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="king"][suit="spades"] > div div:first-child
{
    background-position: -891px -352px;
}

acidjs-xdeck acidjs-xdeck-card[rank="ace"][suit="spades"] > div div:first-child
{
    background-position: -972px -352px;
}

acidjs-xdeck acidjs-xdeck-card[suit="joker"] > div div:first-child
{
    background-position: -81px -469px;
}