Add chat

app/assets/javascripts/index.js

@@ -88,12 +88,15 @@ window.onload = function() {
     }));
   });
 
-  $("#getAllUsers").click(function(event) {
-    event.preventDefault();
-    ws.send(JSON.stringify({
-      type: "getLobbies"
-    }));
+  $("#submitmsg").click(function(event) {
+    sendMessage();
   });
+  $("#usermsg").on('keyup', function (e) {
+    if (e.key === 'Enter' || e.keyCode === 13) {
+      sendMessage()
+    }
+  });
+
 
   $("#exit").click(function(event) {
     event.preventDefault();
@@ -129,13 +132,23 @@ window.onload = function() {
         switchToLobby(message.lobby.maps);
         renderPlayersAndStats(message.lobby);
         break;
+      case "sendMessage":
+        console.log(message);
+        addMessageToChat(message.message);
+        break;
+      case "sendMapBanMessage":
+        console.log(message);
+        addBanMapMessageToChat(message.message);
+        break;
       case "lobbyError":
         console.log(message);
         disconnectLobby(message.error);
+        break;
       case "lobbies":
         lobbyList.lobbies = message.lobbies;
         lobbyList.render();
         return console.log(message);
+        break;
       default:
     }
   };
@@ -173,11 +186,14 @@ function switchToLobby(maps) {
   console.log(maps);
   renderMaps(maps);
   $("#lobbies").hide();
+  $(".navbar").hide();
   $("#decider").show();
+  $("#chatbox").html("");
 }
 
 function disconnectLobby(error) {
   $("#decider").hide();
+  $(".navbar").show();
   $("#lobbies").show();
   alert(error);
 }
@@ -241,23 +257,29 @@ function renderPlayersAndStats(lobby) {
     }
   }
 
+  if (lobby.user1Info.name === userName || lobby.user2Info.name === userName) {
+    $("#inputMsg").show();
+  } else {
+    $("#inputMsg").hide();
+  }
+
   switch (lobby.status){
     case "NotStarted()":
-      resHtml = "<div style='float: left'>" + lobby.user1Info.name + ": " +  player1ReadyBtn +"</div>"
+      resHtml = "<div style='float: left; padding-top: 10px;'> <div>" + lobby.user1Info.name + ": " +  player1ReadyBtn +"</div><br/>"
       if(lobby.user2Info.name !== ""){
         var kickBtn = ""
         if(lobby.user1Info.name === userName){
-          kickBtn = "<button class='btn btn-danger' onclick='kickSecondPlayer()'>Kick</button>";
+          kickBtn = " - <button class='btn btn-danger' onclick='kickSecondPlayer()'>Kick</button>";
         }
-        resHtml += "<div style='float: right'>" + lobby.user2Info.name + ": " +  player2ReadyBtn + "<br/>" + kickBtn + "</div>"
+        resHtml += "<div>" + lobby.user2Info.name + ": " +  player2ReadyBtn +  kickBtn + "</div>"
       }else{
-        resHtml += "<div style='float: right'>waiting 2-nd player...</div>"
+        resHtml += "<div>waiting 2-nd player...</div></div>"
       }
       break;
     case "Draft()":
       console.log(lobby.turn);
       var playerTurn = (lobby.playerTurn === 1) ? lobby.user1Info.name : lobby.user2Info.name
-      resHtml = "<center><b>"+lobby.user1Info.name + " vs " + lobby.user2Info.name +"</b><br/>" + playerTurn +" turn</center>";
+      resHtml = "<center>"+lobby.user1Info.name + " vs " + lobby.user2Info.name +"<br/><b>" + playerTurn +"</b> turn</center>";
       break;
     case "Finish()":
       var lastMap = _.find(lobby.maps, function (map){
@@ -271,6 +293,20 @@ function renderPlayersAndStats(lobby) {
   $("#playersStatsList").html(resHtml);
 }
 
+function addMessageToChat(message){
+  var messageHtml = "<div class='msgln'> <b>" + message.userName + "</b>: " + message.message + "<br></div>";
+  var chatBox = $("#chatbox");
+  chatBox.append(messageHtml);
+  chatBox.scrollTop(40000);
+}
+
+function addBanMapMessageToChat(message){
+  var messageHtml = "<div class='msgln'><span style='color: #2C3D9B'>" + convertMapName(message.mapTechName) + "</span> banned by " + message.user + "<br></div>";
+  var chatBox = $("#chatbox");
+  chatBox.append(messageHtml);
+  chatBox.scrollTop(40000);
+}
+
 function banMap(map){
   ws.send(JSON.stringify({
     type: "banMap",
@@ -304,6 +340,18 @@ function observerDecider(actorName){
   }));
 }
 
+function sendMessage(){
+  var userInput = $("#usermsg");
+  var message = userInput.val();
+  userInput.val("");
+  if(message !== ""){
+    ws.send(JSON.stringify({
+      type: "sendMessage",
+      message: message
+    }));
+  }
+}
+
 function kickSecondPlayer(){
   ws.send(JSON.stringify({
     type: "kickSecondPlayer"