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.
© 2006 - 2025 Martin Ivanov