add templates for cards. change how game list lobbies are cleaned up

WebContent/cah.css

@@ -139,3 +139,30 @@ span.error {
 span.debug {
 	color: blue;
 }
+
+.card {
+	width: 200px;
+	height: 200px;
+	border: 1px solid gray;
+	padding: 15px;
+	position: relative;
+	font-family: Arial, Verdana, san-serif;
+	font-size: 16pt;
+}
+
+.blackcard {
+	background: #231f20;
+	color: white;
+}
+
+.whitecard {
+  background: white;
+  color: black;
+}
+
+.cah {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	margin: 15px;
+}

WebContent/index.jsp

@@ -71,5 +71,25 @@
   </div>
 </div>
 
+<!-- Template for face-up black cards -->
+<div id="black_up_template" class="card blackcard">
+  <span id="black_up_template_text">The quick brown fox jumped over the lazy dog.</span>
+  <img src="img/cah-black.png" class="cah" alt="Cards Against Humanity" />
+</div>
+
+<!-- Template for face-down black cards -->
+<div id="black_down_template" class="card blackcard">
+</div>
+
+<!-- Template for face-up white cards -->
+<div id="white_up_template" class="card whitecard">
+  <span id="white_up_template_text">The quick brown fox jumped over the lazy dog.</span>
+  <img src="img/cah-white.png" class="cah" alt="Cards Against Humanity" />
+</div>
+
+<!-- Template for face-down white cards -->
+<div id="white_down_template" class="card whitecard">
+</div>
+
 </body>
 </html>

WebContent/js/cah.gamelist.js

@@ -19,7 +19,7 @@ cah.GameList = function() {
   /**
    * Array of all game lobby objects.
    * 
-   * @type {Array}
+   * @type {Array[cah.GameListLobby]}
    * @private
    */
   this.games_ = new Array();
@@ -39,9 +39,13 @@ $(document).ready(function() {
  *          gameData The game data returned by the server.
  */
 cah.GameList.prototype.update = function(gameData) {
-  while (this.element_.hasChildNodes()) {
-    this.element_.removeChild(this.element_.firstChild);
+  for ( var key in this.games_) {
+    this.games_[key].dispose();
   }
+
+  // while (this.element_.hasChildNodes()) {
+  // this.element_.removeChild(this.element_.firstChild);
+  // }
   this.games_ = new Array();
 
   for ( var key in gameData[cah.$.AjaxResponse.GAMES]) {
@@ -93,6 +97,14 @@ cah.GameListLobby = function(parentElem, data) {
    */
   this.id_ = data[cah.$.GameInfo.ID];
 
+  /**
+   * The element we live under.
+   * 
+   * @type {HTMLElement}
+   * @private
+   */
+  this.parentElem_ = parentElem;
+
   /**
    * This game lobby's dom element.
    * 
@@ -130,3 +142,8 @@ cah.GameListLobby = function(parentElem, data) {
 cah.GameListLobby.prototype.joinClick = function(e) {
   cah.Ajax.build(cah.$.AjaxOperation.JOIN_GAME).withGameId(this.id_).run();
 };
+
+cah.GameListLobby.prototype.dispose = function() {
+  this.parentElem_.removeChild(this.element_);
+  $("#gamelist_lobby_" + this.id_).unbind();
+};