X-Deck: Playing Cards HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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.

thumb

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

x-deck-blog

HTML Attributes of the acidjs-xdeck Tag *

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

* 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:

* 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:

Events

The component triggers the following component-specific events:

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.

Categories and Tags
Links

© 2006 - 2025 Martin Ivanov