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;
}