I created a card game in Silverlight a year ago, in order to learn a bit about Silverlight. I am now wanting to make a HTML5 version of the game in an effort to learn a little bit more about that. I am thinking I'd like to take advantage of stuff like Knockout.js and WebSockets and the canvas element.
Now what I'm confused about is how to lay out the cards on the screen. With Silverlight I was able to make a "Hand" control, which was made up of two sub controls: the cards the player has in their hand and the ones they have on the table. They were made up of Card controls.
I have a client side JSON object called game, which contains an array of players; each player has a hand which is made up of an array of in-hand cards and on-table cards. Ideally I would like to bind these to something using Knockout.js, but I don't know what I could bind to.
How could I lay out some cards on the table, and perhaps make reuse of something for each player? Would I simply position images (of cards) on a canvas? Is there a way to make some kind of hand object that each player could have and that I could bind to?