Controlling the hand

The rendering of a standard hand layout, <div class='hand> ... </div>, is controlled by the flow, spacing and the width parameters.

Parameter	Description
flow	Determines the direction of the cards (left to right or top to bottom). Either 'horizontal' or 'vertical`. The default is 'horizontal'.
spacing	The percentage of the card that is shown. The default value is 0.2
width	The pixel width of the card image. The height is automatically calculated to maintain the aspect ratio.
cards	The cards to show. Can be either a space separated list of card names or an array of card names, e.g. 'AS KS' or ['AS', 'KS']

html

The parameters for a specific hand layout can be declared with the data-hand attribute

<div class='hand' data-hand='flow: horizontal; spacing: 0.2; width: 90; cards: AS,KS'>
</div>

knockout

The parameters for a specific hand layout are declared with the hand binding of the data-bind attribute. Parameter values can constant or a ko.observable.

<div class='hand' 
     data-bind='hand: {flow: "horizontal", spacing: 0.4, width: 90, cards: cards}'>
</div>

var model = {
  cards: ko.observable("AS KS"),
};
ko.applyBindings(model);
``