Tweaking the whole UI.

gemp-lotr/gemp-lotr-web/src/main/webapp/index.html

@@ -20,6 +20,15 @@
         .tablePlayer {
             text-align: center;
         }
+
+        .chatMessage {
+            color: #000000;
+        }
+
+        .warningMessage {
+            color: #ff0000;
+        }
+
     </style>
     <link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
     <link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">
@@ -64,10 +73,10 @@
                         var participantId = getUrlParam("participantId");
                         $("#user").append("You are logged in as <b>" + participantId + "</b>, create a table or join one where other player is waiting.");
 
-                        var hall = new GempLotrHallUI($("#hall"), "/gemp-lotr/server");
-
                         var chat = new ChatBoxUI("default", $("#chat"), "/gemp-lotr/server");
                         chat.setBounds(2, 2, 780 - 4, 200 - 4);
+
+                        var hall = new GempLotrHallUI($("#hall"), "/gemp-lotr/server", chat);
                     }
                 });
     </script>

gemp-lotr/gemp-lotr-web/src/main/webapp/js/chat.js

@@ -7,10 +7,12 @@ var ChatBoxUI = Class.extend({
     talkBoxHeight: 25,
 
     init: function(name, div, url) {
+        var that = this;
         this.name = name;
         this.div = div;
         this.communication = new GempLotrCommunication(url, function() {
-            alert("Chat had a problem communicating with the server, reload the page to continue");
+            that.appendMessage("Chat had a problem communicating with the server, no new messages will be displayed, but your messages still might get sent.", "warningMessage");
+            that.appendMessage("Reload the browser page (press F5) to resume the chat.", "warningMessage");
         });
 
         this.chatMessagesDiv = $("<div class='chatMessages'></div>");

gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js

@@ -392,7 +392,7 @@ var GempLotrGameUI = Class.extend({
             } else if (eventType == "MESSAGE") {
                 this.message(gameEvent);
             } else if (eventType == "WARNING") {
-                this.message(gameEvent);
+                this.warning(gameEvent);
             }
         }
         if (gameEvents.length > 0)

gemp-lotr/gemp-lotr-web/src/main/webapp/js/hallUi.js

@@ -6,10 +6,11 @@ var GempLotrHallUI = Class.extend({
 
     tablesDiv: null,
 
-    init: function(div, url) {
+    init: function(div, url, chat) {
         this.div = div;
         this.comm = new GempLotrCommunication(url, function() {
-            alert("There was a problem communicating with the server, reload this window to continue.");
+            chat.appendMessage("The game hall had a problem communication with the server, no new updates will be displayed.", "warningMessage");
+            chat.appendMessage("Reload the browser page (press F5) to resume the game hall functionality.", "warningMessage");
         });
 
         var width = $(div).width();