- escape html in chat on client and server

- rework how the gamelist was shown

WebContent/cah.css

@@ -166,3 +166,7 @@ span.debug {
 	left: 0px;
 	margin: 15px;
 }
+
+.hide {
+	display: none;
+}

WebContent/index.jsp

@@ -47,7 +47,7 @@
     </div>
   </div>
   <div id="main">
-    <div id="game_list">
+    <div id="game_list" class="hide">
     </div>
   </div>
   <div id="chat_area">

WebContent/js/cah.ajax.handlers.js

@@ -44,7 +44,8 @@ cah.ajax.after_registered = function() {
   cah.log.debug("done registering");
   // TODO once there are channels, this needs to specify the global channel
   cah.Ajax.build(cah.$.AjaxOperation.NAMES).run();
-  cah.Ajax.build(cah.$.AjaxOperation.GAME_LIST).run();
+  cah.GameList.instance.show();
+  cah.GameList.instance.update();
   cah.longpoll.longPoll();
 };
 
@@ -63,5 +64,13 @@ cah.ajax.SuccessHandlers[cah.$.AjaxOperation.NAMES] = function(data) {
 };
 
 cah.ajax.SuccessHandlers[cah.$.AjaxOperation.GAME_LIST] = function(data) {
-  cah.GameList.instance.update(data);
+  cah.GameList.instance.processUpdate(data);
+};
+
+cah.ajax.SuccessHandlers[cah.$.AjaxOperation.CREATE_GAME] = function(data) {
+  // switch over to the game view and request information about it
+};
+
+cah.ajax.SuccessHandlers[cah.$.AjaxOperation.JOIN_GAME] = function(data) {
+
 };

WebContent/js/cah.app.js

@@ -45,6 +45,9 @@ function chatsubmit_click(e) {
   var text = $.trim($("#chat").val());
   // TODO when I get multiple channels working, this needs to know active and pass it
   cah.Ajax.build(cah.$.AjaxOperation.CHAT).withMessage(text).run();
+  // Note: This is just for local display purposes. The server sanitizes it in a much more proper
+  // way before sending to other clients.
+  text = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   cah.log.status("&lt;" + cah.nickname + "&gt; " + text);
   $("#chat").val("");
   $("#chat").focus();

WebContent/js/cah.card.js

@@ -217,15 +217,15 @@ cah.card.WhiteCard.prototype.getFaceUp_ = function() {
   return temp;
 };
 
-$(document).ready(function() {
-  var card = new cah.card.BlackCard();
-  $("#canvas").append(card.getElement());
-
-  var card2 = new cah.card.BlackCard(true);
-  card2.setText("black card");
-  $("#canvas").append(card2.getElement());
-
-  var card3 = new cah.card.WhiteCard(true);
-  card3.setText("white card");
-  $("#canvas").append(card3.getElement());
-});
+// $(document).ready(function() {
+// var card = new cah.card.BlackCard();
+// $("#canvas").append(card.getElement());
+//
+// var card2 = new cah.card.BlackCard(true);
+// card2.setText("black card");
+// $("#canvas").append(card2.getElement());
+//
+// var card3 = new cah.card.WhiteCard(true);
+// card3.setText("white card");
+// $("#canvas").append(card3.getElement());
+// });

WebContent/js/cah.gamelist.js

@@ -32,20 +32,29 @@ $(document).ready(function() {
   cah.GameList.instance = new cah.GameList();
 });
 
+cah.GameList.prototype.show = function() {
+  $(this.element_).removeClass("hide");
+};
+
+cah.GameList.prototype.hide = function() {
+  $(this.element_).addClass("hide");
+};
+
+cah.GameList.prototype.update = function() {
+  // TODO display a loading indicator of some sort
+  cah.Ajax.build(cah.$.AjaxOperation.GAME_LIST).run();
+};
+
 /**
  * Update the list of games.
  * 
  * @param {Object}
  *          gameData The game data returned by the server.
  */
-cah.GameList.prototype.update = function(gameData) {
+cah.GameList.prototype.processUpdate = function(gameData) {
   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]) {
@@ -79,6 +88,8 @@ cah.GameList.prototype.refreshGames = function() {
   cah.Ajax.build(cah.$.AjaxOperation.GAME_LIST).run();
 };
 
+// ///////////////////////////////////////////////
+
 /**
  * A single entry in the game list.
  * 
@@ -116,10 +127,9 @@ cah.GameListLobby = function(parentElem, data) {
   this.element_.id = "gamelist_lobby_" + this.id_;
   $(parentElem).append(this.element_);
   $(this.element_).removeClass("template");
-  $("#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(", "));
+  jQuery(".gamelist_lobby_id", this.element_).text(this.id_);
+  jQuery(".gamelist_lobby_host", this.element_).text(data[cah.$.GameInfo.HOST]);
+  jQuery(".gamelist_lobby_players", this.element_).text(data[cah.$.GameInfo.PLAYERS].join(", "));
   var statusClass = "unjoinable";
   var statusMessage = cah.$.GameState_msg[data[cah.$.GameInfo.STATE]];
   switch (data[cah.$.GameInfo.STATE]) {
@@ -130,13 +140,12 @@ cah.GameListLobby = function(parentElem, data) {
       statusClass = "unjoinable";
       break;
   }
-  $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_status").text(statusMessage).addClass(
+  jQuery(".gamelist_lobby_status", this.element_).text(statusMessage).addClass(
       "gamelist_lobby_status_" + statusClass);
   if (statusClass == "unjoinable") {
-    $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_join").attr("disabled", "disabled");
+    jQuery(".gamelist_lobby_join", this.element_).attr("disabled", "disabled");
   } else {
-    $("#gamelist_lobby_" + this.id_ + " .gamelist_lobby_join")
-        .click(cah.bind(this, this.joinClick));
+    jQuery(".gamelist_lobby_join", this.element_).click(cah.bind(this, this.joinClick));
   }
 };
 

src/net/socialgamer/cah/handlers/ChatHandler.java

@@ -17,6 +17,8 @@ import net.socialgamer.cah.data.ConnectedUsers;
 import net.socialgamer.cah.data.QueuedMessage.MessageType;
 import net.socialgamer.cah.data.User;
 
+import org.apache.commons.lang3.StringEscapeUtils;
+
 import com.google.inject.Inject;
 
 
@@ -49,7 +51,7 @@ public class ChatHandler extends Handler {
         final HashMap<ReturnableData, Object> broadcastData = new HashMap<ReturnableData, Object>();
         broadcastData.put(LongPollResponse.EVENT, LongPollEvent.CHAT.toString());
         broadcastData.put(LongPollResponse.FROM, user.getNickname());
-        broadcastData.put(LongPollResponse.MESSAGE, message);
+        broadcastData.put(LongPollResponse.MESSAGE, StringEscapeUtils.escapeXml(message));
         // TODO once there are multiple chat channels, put the destination here
         // TODO once there are games and they have their own chat, make it only send to participants
         users.broadcastToAll(MessageType.CHAT, broadcastData);