some work on the game list

WebContent/cah.css

@@ -47,10 +47,13 @@
 #game_list {
 	height: 100%;
 	width: 100%;
-	background: #c0c0c0;
 	overflow: auto;
 }
 
+#gamelist_lobby_template {
+	display: none;
+}
+
 .gamelist_lobby {
 	width: 32%;
 	height: 100px;
@@ -81,6 +84,14 @@
 	float: right;
 }
 
+.gamelist_lobby_status_joinable {
+	color: green;
+}
+
+.gamelist_lobby_status_unjoinable {
+	color: #c0c0c0;
+}
+
 #chat_area {
 	width: 500px;
 	height: 215px;

WebContent/index.jsp

@@ -55,6 +55,7 @@
   </div>
 </div>
 
+<!-- Template for game lobbies in the game list. -->
 <div id="gamelist_lobby_template" class="gamelist_lobby">
   <div class="gamelist_lobby_left">
     Game <span class="gamelist_lobby_id">###</span>

WebContent/js/cah.constants.js

@@ -87,6 +87,9 @@ cah.$.GameState = function() {
 cah.$.GameState.prototype.dummy = undefined;
 cah.$.GameState.LOBBY = "lobby";
 cah.$.GameState.DEALING = "dealing";
+cah.$.GameState_msg = {};
+cah.$.GameState_msg['lobby'] = "Joinable (Not Started)";
+cah.$.GameState_msg['dealing'] = "Dealing";
 
 cah.$.LongPollEvent = function() {
   // pass

WebContent/js/cah.gamelist.js

@@ -15,12 +15,6 @@ cah.GameList = function() {
    * @private
    */
   this.element_ = $("#game_list")[0];
-
-  var foo = new cah.GameListLobby(0).getElement();
-
-  for ( var i = 0; i < 50; i++) {
-    this.element_.appendChild(new cah.GameListLobby(i).getElement());
-  }
 };
 
 $(document).ready(function() {
@@ -35,21 +29,50 @@ $(document).ready(function() {
  */
 cah.GameList.prototype.update = function(gameData) {
   // TODO clear existing display
+  for ( var key in gameData[cah.$.AjaxResponse.GAMES]) {
+    var game = gameData[cah.$.AjaxResponse.GAMES][key];
+    var lobby = new cah.GameListLobby(this.element_, game);
+  }
 };
 
 /**
  * A single entry in the game list.
  * 
- * @param {number}
- *          id This game's id.
+ * @param {HTMLElement}
+ *          parentElem Element under which to display this.
+ * @param {Object}
+ *          data This game's data.
  * @constructor
  */
-cah.GameListLobby = function(id) {
-  this.id_ = id;
+cah.GameListLobby = function(parentElem, data) {
+  this.id_ = data[cah.$.GameInfo.ID];
   this.element_ = $("#gamelist_lobby_template").clone()[0];
-  this.element_.id = "gamelist_lobby_" + id;
+  this.element_.id = "gamelist_lobby_" + this.id_;
+  parentElem.appendChild(this.element_);
+  $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_id").text(this.id_);
+  $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_host").text(data[cah.$.GameInfo.HOST]);
+  $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_players").text(
+      data[cah.$.GameInfo.PLAYERS].join(", "));
+  var statusClass = "unjoinable";
+  var statusMessage = cah.$.GameState_msg[data[cah.$.GameInfo.STATE]];
+  switch (data[cah.$.GameInfo.STATE]) {
+    case cah.$.GameState.LOBBY:
+      statusClass = "joinable";
+      break;
+    case cah.$.GameState.DEALING:
+      statusClass = "unjoinable";
+      break;
+  }
+  $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_status").text(statusMessage).addClass(
+      "gamelist_lobby_status_" + statusClass);
+  if (statusClass == "unjoinable") {
+    $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_join").attr("disabled", "disabled");
+  } else {
+    $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_join")
+        .click(cah.bind(this, this.joinClick));
+  }
 };
 
-cah.GameListLobby.prototype.getElement = function() {
-  return this.element_;
+cah.GameListLobby.prototype.joinClick = function(e) {
+  debugger;
 };

src/net/socialgamer/cah/Constants.java

@@ -171,20 +171,27 @@ public class Constants {
     public static final String USER = "user";
   }
 
-  public enum GameState {
-    DEALING("dealing"),
-    LOBBY("lobby");
+  public enum GameState implements Localizable {
+    DEALING("dealing", "Dealing"),
+    LOBBY("lobby", "Joinable (Not Started)");
 
     private final String state;
+    private final String message;
 
-    GameState(final String state) {
+    GameState(final String state, final String message) {
       this.state = state;
+      this.message = message;
     }
 
     @Override
     public String toString() {
       return state;
     }
+
+    @Override
+    public String getString() {
+      return message;
+    }
   }
 
   public enum GameInfo {