X-Deck: Playing Cards HTML5 Web Component

Must admit I’ve never been a huge fan of card games. I thought, however that it may be interesting to see what I could do with HTML5 Web Components in the similar manner I experimented with this chessboard but this time with French cards deck.

The result is AcidJs.XDeck and I really enjoyed developing it. Apart from the cool looks and animations, it supports rendering of preset hands, faceup/facedown, random, play and flip behavior, etc via a small and easy to use API and the deck triggers custom events, which return data that can be used immediately.

After you have enjoyed the demo, make sure you also download it and run it locally, because the distribution page contains more examples and also API and events tester.

Basic Usage

[html]
<acidjs-xdeck>
<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>
[/html]

What you Get

HTML Attributes of the acidjs-xdeck Tag *

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

• random – Optional attribute for rendering random hands. If set, the value should be between "1" and "52".
• facedown – Optional, Boolean. Default value: "false". If set to "true", all cards in the hand will be rendered facedown.
• hand – Optional attribute for rendering preset hands, for example: hand="4 of a kind". The preset hands are stored in the AcidJs.XDeck/classes/XDeck.Hands.js file as a JavaScript object and you can add as many presets as you need.

* Setting of the attributes via setAttribute() will not take effect, use the JavaScript methods instead.

HTML Attributes of the acidjs-xdeck-card Tag *

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

• rank – Required. One of "2", "3", "4", "5", "6", "7", "8", "9", "10", "jack", "queen", "king" or "ace".
• suit – Required. One of "clubs", "diamonds", "hearts", "spades" or "joker".
• facedown – Optional, Boolean. Default value: "false". If set to "true", the card will be rendered facedown.
• removeonplay – Optional, Boolean. Default value: "true". If set to "false", the card will not be removed from teh hand when played.
• flip – Optional, Boolean. Default value: "true". If set to "false", the card will not be flippable.
• play – Optional, Boolean. Default value: "true". If set to "false", the play button of the card will be disabled.

* Setting of the attributes via setAttribute() will not take effect, use the JavaScript methods instead.

Methods

Apart from the standard JavaScript methods, AcidJs.XDeck also supports the following component-specific methods:

• random(length, faceup) – Create a random hand by specified cards length and optional Boolean facedown.
• all(faceup) – Show all cards in the deck faceup or facedown.
• shuffle() – Shuffle the cards.
• hand(object) – Render a hand preset, like “4 of a kind”.

Events

The component triggers the following component-specific events:

• card:play – fired when the “play” play button has been clicked.
• card:flip – fired when the “flip” play button has been clicked.

Both events return an object, containing the current configuration of the card:

[javascript]
{
facedown: false,
flip: true,
play: true,
rank: "ace",
removeonplay: true,
suit: "spades"
}
[/javascript]

Hand Presets

The hand presets can be used to render ready made hands, like “4 of a kind”, “royal flush”, etc. Presets are stored as in an object in the AcidJs.XDeck/classes/XDeck.Hands.js file, which looks like this and is very easy to modify and add more:

[javascript]
window.xtag.AcidJsXDeckHands = {
"royal flush": [{
suit: "hearts",
rank: "ace"
},{
suit: "hearts",
rank: "king"
},{
suit: "hearts",
rank: "queen"
},{
suit: "hearts",
rank: "jack"
},{
suit: "hearts",
rank: 10
}],
"4 of a kind": [{
suit: "diamonds",
rank: 5
},{
suit: "spades",
rank: 5
},{
suit: "hearts",
rank: 5
},{
suit: "clubs",
rank: 5
},{
suit: "hearts",
rank: 3
}],
"full house": [{
suit: "hearts",
rank: "king"
},{
suit: "diamonds",
rank: "king"
},{
suit: "spades",
rank: "king"
},{
suit: "hearts",
rank: 5
},{
suit: "clubs",
rank: 3
}]
};
[/javascript]

Check the code of the demo page or the distribution to see how to bind to them and what they return.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.