Fix defect #480, message display

* cross-site scripting in chatbox seems to be fixed
* improve chatbox message display, now player can see which opponents
  the player has been talked to, also allow player quickly access a game
  once he/she receive a press from the game.
* now game map is always aligned in the center of the browser window

Change-Id: I11256b08aa4b0c71a36d36efb8d08ed85a14f738

apps/web_frontend/www/css/style.css

@@ -122,7 +122,6 @@ img.preloader {
 
 #canvas_div {
     position: absolute;
-    left: 23px;
 }
 
 #canvas_hold {

apps/web_frontend/www/js/chat.js

@@ -242,20 +242,27 @@ function checkChatBoxInputKey(event,chatboxtextarea,chatboxtitle) {
 }
 
 function updateOffGameChatBox(title, who, msg){
-    $("#chatbox_"+title+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+who+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+msg+'</span></div>');
+    var msg_div = $('<div/>', {class: "chatboxmessage" });
+    var from_span = $('<span/>', {text: who+":  ", class: "chatboxmessagefrom" });
+    var msg_span = $('<span/>', {text: msg, class: "chatboxmessagecontent" });
+    var msg_format = msg_div.append(from_span, msg_span);
+    $("#chatbox_"+title+" .chatboxcontent").append(msg_format);
     for (var i=0;i<chatBoxes.length;i++) {
             temp = chatBoxes[i];
             $("#chatbox_"+temp+" .chatboxcontent").scrollTop($("#chatbox_"+temp+" .chatboxcontent")[0].scrollHeight);
-            setTimeout('$("#chatbox_"+temp+" .chatboxcontent").scrollTop($("#chatbox_"+temp+" .chatboxcontent")[0].scrollHeight);', 100); // yet another strange ie bug
     }
 }
 
 function updateInGameChatBox(title, game_id, who, msg){
-    $("#chatbox_"+title+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom"><font color="#229922">-----'+game_id+'-----</font><br>'+who+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+msg+'</span></div>');
+    var msg_div = $('<div/>', {class: "chatboxmessage" });
+    game_id = '<a href="javascript:void(0)" onclick="get_game_overview('+game_id+')">'+game_id+'</a>';
+    var from_span = $('<span/>', {html: who+"@"+game_id+":", class: "chatboxmessagefrom" });
+    var msg_span = $('<span/>', {text: msg, class: "chatboxmessagecontent" });
+    var msg_format = msg_div.append(from_span, msg_span);
+    $("#chatbox_"+title+" .chatboxcontent").append(msg_format);
     for (var i=0;i<chatBoxes.length;i++) {
             temp = chatBoxes[i];
             $("#chatbox_"+temp+" .chatboxcontent").scrollTop($("#chatbox_"+temp+" .chatboxcontent")[0].scrollHeight);
-            setTimeout('$("#chatbox_"+temp+" .chatboxcontent").scrollTop($("#chatbox_"+temp+" .chatboxcontent")[0].scrollHeight);', 100); // yet another strange ie bug
     }
 }
 
@@ -269,17 +276,36 @@ function onRecvInGameMsg(game_id, from, msg){
     chatBoxBlink("in_game");
 }
 
-function onSendMsg(inGame, player){
+function onSendMsg(inGame){
     var chatArea;
     var chatBox;
+    var msg_to;
+    var gid = $('#press_game_id').val();
     if(inGame){
+        var arr=$('#press_to').val();
+        if(arr.length == 1){
+            msg_to = arr[0]+"@";
+        }else if(arr && arr.length < 7){
+            for(var i=0; i<arr.length; i++){
+                arr[i]=arr[i].substr(0,2);
+            }
+            msg_to = "["+arr.join()+"]@";
+        }else{
+            msg_to = "all@";
+        }
+        msg_to += '<a href="javascript:void(0)" onclick="get_game_overview('+gid+')">'+gid+'</a>';
         chatArea = $('#press_msg');
         chatBox = "in_game";
     }else{
         chatArea = $('#chat_msg');
         chatBox = "off_game";
+        msg_to = $('#chat_to').val();
     }
-    updateOffGameChatBox(chatBox, player, chatArea.val());
+    var msg_div = $('<div/>', {class: "chatboxmessage" });
+    var to_span = $('<span/>', {html: "<font color='#229922'>To "+msg_to+":</font>  ", class: "chatboxmessagefrom" });
+    var msg_span = $('<span/>', {text: chatArea.val(), class: "chatboxmessagecontent" });
+    var msg_format = msg_div.append(to_span, msg_span);
+    $("#chatbox_"+chatBox+" .chatboxcontent").append(msg_format);
     chatArea.val('');
     chatArea.focus();
     chatArea.css('height','44px');

apps/web_frontend/www/js/web_client.js

@@ -209,12 +209,12 @@ function event_action(data) {
         clear_message();
         break;
     case "user_msg_success":
-        onSendMsg(false, "["+userObj.nick+"]");
+        onSendMsg(false);
         clear_message();
         break;
     case "power_msg_success":
     case "game_msg_success":
-        onSendMsg(true, "["+userObj.nick+"]");
+        onSendMsg(true);
         clear_message();
         break;
     case "login_success":

apps/web_frontend/www/js/web_client_page.js

@@ -370,7 +370,15 @@ function load_game_overview_data(page_data) {
     acc += "<br>";
     $('#gov_info').html(acc);
     $('#game_id').val(page_data.game_id);
-    $('#mid_area').html('<div id="canvas_div"><canvas id="canvas" width="1200" height="1000"></canvas></div>');
+    $('#mid_area').html('<div id="canvas_div"><canvas id="canvas" width="1154" height="996"></canvas></div>');
+    $('#canvas_div').css('left', ((window.innerWidth-1154)*0.5-7)+'px');
+
+    //Keep the map always in the middle
+    window.onresize = function(){
+        $('#canvas_div').css('left', ((window.innerWidth-1154)*0.5-7)+'px');
+        if(page!=="game")
+            window.onresize = null;
+    }
 
     //after page contents are loaded, draw the map and units
     $('#world').ready(function(){