The node returned corresponds to a string of HTML. Combined with the proper CSS rules it will render as a fairly decent graphic representation of a playing card. For example, the HTML for the 3♠ card would look like this:
<div class="card"> <div class="front"> <div class="index">3<br />♠</div> <div class="spotB1">♠</div> <div class="spotB3">♠</div> <div class="spotB5">♠</div> </div> </div>
and appear on the page like this.
The node returned by the method reflects the outer DIV tag. This node can be used just like any other DIV element node in a page. Should the card have an invalid rank or suit value, the node returned will appear as a blank-faced card.
Some images are required for face cards and the card back. To help speed things up, the following code is included to preload the necessary graphics.
var cardImg0 = new Image(); cardImg0.src= "graphics/cardback.gif"; var cardImg1 = new Image(); cardImg1.src= "graphics/jack.gif"; var cardImg2 = new Image(); cardImg2.src= "graphics/queen.gif"; var cardImg3 = new Image(); cardImg3.src= "graphics/king.gif";
Using Card Nodes
These nodes can be added to a page using any of several DOM methods. For example:
var deck, card; deck = new Stack(); deck.makeDeck(1); card = deck.deal(); document.appendChild(card.createNode());
appendChild(), like similar DOM methods, inserts a
copy of the given node into the document and returns a reference to that copy.
In order to access the card node once it's been added to the page you need to
save this reference. Then you can easily locate and remove it if desired.
var node; ... // Add to page. node = document.appendChild(card.createNode()); ... // Remove from page. document.removeChild(node);
Face Down Cards
The outer DIV of the card node uses a graphic background to represent the
back of a playing card. This is normally overlaid by the inner DIV which
represents the card's front. But you can access this DIV element from the card
node and change its
visibility style to "flip" the card over and
make it appear to be face down.
node = document.appendChild(card.createNode()); ... // Face down. node.firstChild.style.visibility = "hidden"; ... // Face up. node.firstChild.style.visibility = "";
The display demo illustrates some of these techniques for working with card nodes using the same basic concept as the previous demo.