title: HTML5 card game
body: <p>I created a card game in silverlight a year or so ago in order to learn a bit about Silverlight.</p>
  
  <p>I am now wanting to make a HTML5 version of the game in an effort to learn a little bit more about that.</p>
  
  <p>I am thinking I'd like to take advantage of stuff like Knockout.js and WebSockets and the <code>canvas</code> element.</p>
  
  <p>Now what I'm confused about is how to lay out the cards on the screen.</p>
  
  <p>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. And they in turn were made up of Card controls.</p>
  
  <p>Now I don't believe there is the concept on a User Control in javascript. So I am possibly thinking about this in entirely the wrong way.</p>
  
  <p>So my question is - how could I lay out some cards on the table and perhaps make reuse of something for each player?</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Any advice? Or sample code you've seen elsewhere?</p>