Replace id= with class= for the chat panel.

This is in preparation to support multiple tabs, which will provide a
separate chat tab per running game.

Signed-off-by: Matt Mullins <mmullins@mmlx.us>

WebContent/cah.css

@@ -193,7 +193,7 @@ h2,h3,h4 {
   font-size: 14px !important;
 }
 
-#log {
+.log {
   width: 100%;
   height: 198px;
   border-style: none solid solid none;
@@ -212,7 +212,7 @@ h2,h3,h4 {
   float: right;
 }
 
-#chat {
+.chat {
   border: 1px solid black;
   left: -1px;
   bottom: 0px;
@@ -224,7 +224,7 @@ h2,h3,h4 {
   font-size: 12pt;
 }
 
-#chat_submit {
+.chat_submit {
   width: 50px;
   height: 20px;
   position: absolute;

WebContent/game.jsp

@@ -168,9 +168,9 @@ HttpSession hSession = request.getSession(true);
       <textarea id="ignore_list" style="width: 200px; height: 150px"></textarea>
     </div>
     <div id="tab-global">
-      <div id="log"></div>
+      <div class="log"></div>
-      <input type="text" id="chat" maxlength="200" />
+      <input type="text" class="chat" maxlength="200" />
-      <input type="button" id="chat_submit" value="Chat" />
+      <input type="button" class="chat_submit" value="Chat" />
     </div>
   </div>
 </div>

WebContent/js/cah.app.js

@@ -30,6 +30,9 @@
  */
 
 $(document).ready(function() {
+  // Initialize the logger (i.e. the global chat tab) before anything needs it.
+  cah.log.init();
+
   // see if we already exist on the server so we can resume
   cah.Ajax.build(cah.$.AjaxOperation.FIRST_LOAD).run();
 
@@ -40,8 +43,8 @@ $(document).ready(function() {
   $("#nickbox").keyup(nickbox_keyup);
   $("#nickbox").focus();
 
-  $("#chat").keyup(chat_keyup);
+  $(".chat", $("#tab-global")).keyup(chat_keyup);
-  $("#chat_submit").click(chatsubmit_click);
+  $(".chat_submit", $("#tab-global")).click(chatsubmit_click);
 
   // TODO: have some sort of mechanism to alert the server that we have unloaded the page, but
   // have not expressed an interest in being cleared out yet.
@@ -94,7 +97,7 @@ function nicknameconfirm_click() {
  */
 function chat_keyup(e) {
   if (e.which == 13) {
-    $("#chat_submit").click();
+    $(".chat_submit", $('#tab-global')).click();
     e.preventDefault();
   }
 }
@@ -103,7 +106,7 @@ function chat_keyup(e) {
  * Handle a click even on the chat button. Send the message to the server.
  */
 function chatsubmit_click() {
-  var text = $.trim($("#chat").val());
+  var text = $.trim($(".chat", $("#tab-global")).val());
   if (text == "") {
     return;
   }
@@ -120,7 +123,7 @@ function chatsubmit_click() {
     // TODO support an /ignore command
     case '':
       // TODO when I get multiple channels working, this needs to know active and pass it
-      cah.Ajax.build(cah.$.AjaxOperation.CHAT).withMessage(text).run();
+      cah.Ajax.build(cah.$.AjaxOperation.CHAT).withMessage(text).withGameId(cah.Game.id_).run();
       cah.log.status("<" + cah.nickname + "> " + text);
       break;
     case 'kick':
@@ -136,8 +139,8 @@ function chatsubmit_click() {
     default:
   }
 
-  $("#chat").val("");
+  $(".chat", $("#tab-global")).val("");
-  $("#chat").focus();
+  $(".chat", $("#tab-global")).focus();
 }
 
 /**
@@ -210,15 +213,18 @@ function apply_preferences() {
  * This was tested extensively in Chrome. It may not be pixel-perfect in other browsers.
  */
 function app_resize() {
+  var chat = $(".chat", $("#tab-global"));
+  var log = cah.log.log;
+
   var chatWidth = $("#canvas").width() - 257;
   $("#tabs").width(chatWidth + 'px');
-  $("#log").width((chatWidth + 2) + 'px');
+  log.width((chatWidth + 2) + 'px');
-  $("#chat").width((chatWidth - 42) + 'px');
+  chat.width((chatWidth - 42) + 'px');
   var bottomHeight = $(window).height() - $("#main").height() - $("#menubar").height() - 29;
   $("#bottom").height(bottomHeight);
   $("#info_area").height(bottomHeight);
   $("#tabs").height(bottomHeight);
-  $("#log").height(bottomHeight - $("#chat").height() - 40);
+  log.height(bottomHeight - chat.height() - 40);
   // this is ugly and terrible.
   if ($(window).height() < 650) {
     $("body").css("overflow-y", "auto");

WebContent/js/cah.log.js

@@ -31,6 +31,13 @@
 
 cah.log = {};
 
+/**
+ * "Global Chat" tab's chat log
+ */
+cah.log.init = function() {
+  cah.log.log = $('.log', $('#tab-global'));
+};
+
 /**
  * Log a message for the user the see, always, as a status message. This is also used for chat. The
  * current time is displayed with the log message, using the user's locale settings to determine
@@ -44,17 +51,18 @@ cah.log = {};
  */
 cah.log.status = function(text, opt_class) {
   // TODO this doesn't work right on some mobile browsers
-  var scroll = $("#log").prop("scrollHeight") - $("#log").height() - $("#log").prop("scrollTop") <= 5;
+  var scroll = (cah.log.log.prop("scrollHeight") - cah.log.log.height() -
+      cah.log.log.prop("scrollTop")) <= 5;
 
   var node = $("<span></span><br/>");
   $(node[0]).text("[" + new Date().toLocaleTimeString() + "] " + text + "\n");
   if (opt_class) {
     $(node).addClass(opt_class);
   }
-  $("#log").append(node);
+  cah.log.log.append(node);
 
   if (scroll) {
-    $("#log").prop("scrollTop", $("#log").prop("scrollHeight"));
+    cah.log.log.prop("scrollTop", cah.log.log.prop("scrollHeight"));
   }
 };