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"

app/assets/stylesheets/main.less

@@ -17,7 +17,7 @@
 }
 
 
-body {
+#lobbies {
   margin-top: 50px;
 }
 
@@ -89,10 +89,10 @@ body {
 }
 
 .mapSelect{
-  margin: 10px;
+  margin: 4px;
   position:relative;
   width: 175px;
-  height: 175px;
+  height: 155px;
   white-space: nowrap;
   overflow: hidden;
 }
@@ -112,58 +112,34 @@ body {
   animation: glowing 1300ms infinite;
 }
 
-.chart-holder, .details-holder {
-  position: absolute;
+#chat{
+  width: 354px;
+  float: right;
+}
+
+#chatbox {
+  text-align:left;
+  margin:0 auto;
+  margin-bottom:3px;
+  padding:10px;
+  background:#fff;
+  height:200px;
+  width:352px;
+  border:1px solid #ACD8F0;
+  overflow:auto; }
+
+.inputMsg{
   width: 100%;
-  height: 250px;
-  top: 0px;
-  left: 0px;
-
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  backface-visibility: hidden;
 }
 
-.chart-holder {
-  z-index: 2;
-  & p {
-    position: absolute;
-    bottom: 7px;
-    right: 20px;
-    font-size: 10px;
-    color: #aaaaaa;
-    font-style: italic;
-  }
+#usermsg {
+  border: 1px solid #ACD8F0;
+  width: 300px;
 }
 
-.details-holder {
-  .transform(180deg);
-  text-align: center;
-  z-index: 1;
-  & h4 {
-    padding: 20px;
-  }
-  & .progress {
-    padding: 20px;
-    background: none;
-    border: none;
 
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-  }
-  & img {
-    height: 128px;
-    width: 128px;
-  }
-}
+#submit { width: 60px; }
 
-.chart {
-  position: relative;
-  width: 920px;
-  height: 210px;
-  margin-top: 30px;
-  margin-bottom: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-}
+.error { color: #ff0000; }
+
+#menu { padding:12.5px 25px 12.5px 25px; }