Decider v 0.9

app/assets/javascripts/index.js

@@ -1,8 +1,7 @@
-
-var updateDecider;
-
 var ws;
 
+var userName = ""
+
 window.onload = function() {
 
   'use strict';
@@ -11,36 +10,6 @@ window.onload = function() {
     return Math.floor(Math.random() * Math.floor(max));
   }
 
-  var DeciderLobby = Backbone.View.extend({
-
-    lobbies: undefined,
-
-    initialize: function (number) {
-      console.log(number);
-      this.elCount = number;
-    },
-
-    template: _.template('<td><%= title %></td>' +
-        '<td><%= title %></td>' +
-        '<td><%= content %></td>'),
-
-    events: {
-      "click .title": "check" // Обработчик клика на кнопке "Проверить"
-    },
-
-    check: function () {
-      this.elCount = "azaz" + getRandomInt(100000000);
-      this.render();
-    },
-
-    render: function() {
-      console.log("render");
-      this.$el.html(this.template({title: "Vasyan " + this.elCount, content: "noob"}));
-      console.log(this.$el);
-      return this;
-    }
-  });
-
   var LobbyList = Backbone.View.extend({
 
     lobbies: undefined,
@@ -59,28 +28,50 @@ window.onload = function() {
       "click .title": "check" // Обработчик клика на кнопке "Проверить"
     },
 
-    check: function () {
+    joinAsPlayer: function () {
       this.elCount = "azaz" + getRandomInt(100000000);
       this.render();
     },
 
     render: function() {
-      this.$el.html(this.template());
+
       var lobbiesAsTableRows = _.reduce(this.lobbies, function (memo, lobby) {
-        console.log(lobby, memo);
+
+        var joinButton = '<button class="btn btn-primary join-as-player" onclick="joinDecider(\''+lobby.lobbyActorName+'\')">' +
+            '<img src="assets/images/buttons/isAuto.png" style="height: 25px;"> Join lobby <img src="assets/images/buttons/isAuto.png" style="height: 25px;">' +
+            '</button>';
+        var observerButton = '<button class="btn btn-success join-as-observer" lobbyId="'+lobby.lobbyActorName+'">' +
+            '<img src="assets/images/buttons/Ulthwe.png" style="height: 25px;"> Observer <img src="assets/images/buttons/Ulthwe.png" style="height: 25px;">' +
+            '</button>';
+
         return memo + '<tr>\n' +
-      '           <td>'+ lobby.lobbyName +'</td>\n' +
+      '           <td>'+ lobby.user1Name +'</td>\n' +
+      '           <td>'+ lobby.user2Name +'</td>\n' +
       '           <td>'+ lobby.status +'</td>\n' +
-      '           <td>Action</td>' +
+      '           <td>' + joinButton + ' ' + observerButton +
+            ' </td>' +
         '</tr>';
       }, "");
-      $("#deciderList tbody", this.el).append(lobbiesAsTableRows);
-      return this;
+
+      var tableStart = '<table id ="deciderList" class="table"><tbody><tr>\n' +
+          '                <th>Player1</th>\n' +
+          '                <th>Player2</th>\n' +
+          '                <th>Status</th>\n' +
+          '                <th style="width: 400px;">Action</th></tr>\n';
+
+      var tableEnd = '</tbody></table>';
+
+      var res = tableStart + lobbiesAsTableRows + tableEnd;
+
+      $("#deciderList tbody", res).append(lobbiesAsTableRows);
+      console.log(res);
+
+      this.$el.html(res);
     }
   });
 
   var lobbyList = new LobbyList;
-  $("#lobbiesList").append(lobbyList.el);
+  $("#lobbiesList").append(lobbyList.$el);
   lobbyList.render();
 
   $("#createDecider").click(function(event) {
@@ -104,25 +95,45 @@ window.onload = function() {
     }));
   });
 
+  $("#exit").click(function(event) {
+    event.preventDefault();
+    ws.send(JSON.stringify({
+      type: "leaveDecider"
+    }));
+    $("#decider").hide();
+    $("#lobbies").show();
+  });
+
   if($.cookie('user')=== undefined){
-    result = prompt("Введите ник", );
+    var result = prompt("Введите ник", );
     $.cookie('user', result, { expires: 7 });
+    userName = result;
   }else{
-    console.log("Welcome, " + $.cookie('user'));
+    userName = $.cookie('user');
   }
 
+  $("#playerName").html(userName);
+
+
   ws = new WebSocket($("body").data("ws-url"));
   ws.onmessage = function(event) {
     var message;
     message = JSON.parse(event.data);
     switch (message.type) {
-      case "maps":
-        return updateDecider(message);
-      default:
+      case "refreshLobby":
+        renderMaps(message.lobby.maps);
+        renderPlayersAndStats(message.lobby);
+        break;
+      case "switchToLobby":
+        console.log(message);
+        switchToLobby(message.lobby.maps);
+        renderPlayersAndStats(message.lobby);
+        break;
       case "lobbies":
         lobbyList.lobbies = message.lobbies;
         lobbyList.render();
         return console.log(message);
+      default:
     }
   };
   ws.onopen = function () {
@@ -140,15 +151,144 @@ window.onload = function() {
 
 function changeNick() {
   result = prompt("Введите ник", $.cookie('user'));
+  if(result == null) return;
   $.cookie('user', result, { expires: 7 });
   ws.send(JSON.stringify({
     type: "userName",
     name: $.cookie('user')
   }));
+
+  userName = $.cookie('user');
+  $("#playerName").html(userName);
+
 }
 
 
-updateDecider = function(message) {
-  console.log(message.deciderMaps);
-};
+// -----ф-ии прихода с сервера
 
+function switchToLobby(maps) {
+  console.log(maps);
+  renderMaps(maps);
+  $("#lobbies").hide();
+  $("#decider").show();
+}
+
+function renderMaps(maps) {
+  var resHtml = "";
+
+  _.each(maps, function (map) {
+
+    var banHtml = "";
+    var banClass = "";
+    if(map.isBanned){
+      banHtml = "<div class = 'banX'>&#x2715;</div>";
+      banClass = "bannedMap";
+    }
+
+
+
+    resHtml = resHtml + '<div class="col-xs-4 col-md-3 col-lg-2"><button class = "mapSelect" onmousedown="banMap(\''+map.map+'\')">'+
+        '<div class="mapImageAndText '+banClass+'">' +
+        '<img class="img-rounded center-block" style="width:128px;" src="/assets/images/maps/'+encodeURI(map.map)+'.jpg">' +
+        '</div>'+convertMapName(map.map)+
+        banHtml + '</button></div>';
+  })
+  $("#mapList").html(resHtml);
+}
+
+function renderPlayersAndStats(lobby) {
+  var resHtml = "<center>";
+  var player1ReadyBtn = "";
+  var player2ReadyBtn = "";
+  var readyImg = "<img src='/assets/images/buttons/isAuto.png' class='readyImg'/>";
+  var notReadyImg = "<img src='/assets/images/buttons/isNotAuto.png' class='readyImg'/>";
+
+  if(lobby.user1Name === userName){
+    if(lobby.user1Ready){
+      player1ReadyBtn = "<button class='btn btn-default' onclick='setNotReady()'>"+readyImg+" Ready "+readyImg+"</button>"
+    }else{
+      player1ReadyBtn = "<button class='btn btn-default' onclick='setReady()'>"+notReadyImg+" Not ready "+notReadyImg+"</button>"
+    }
+  }else{
+    if(lobby.user1Ready){
+      player1ReadyBtn = readyImg
+    }else{
+      player1ReadyBtn = notReadyImg
+    }
+  }
+
+  if(lobby.user2Name === userName){
+    if(lobby.user2Ready){
+      player2ReadyBtn = "<button class='btn btn-default' onclick='setNotReady()'>"+readyImg+" Ready "+readyImg+"</button>"
+    }else{
+      player2ReadyBtn = "<button class='btn btn-default' onclick='setReady()'>"+notReadyImg+" Not ready "+notReadyImg+"</button>"
+    }
+  } else {
+    if(lobby.user2Ready){
+      player2ReadyBtn = readyImg
+    }else{
+      player2ReadyBtn = notReadyImg
+    }
+  }
+
+  console.log(lobby);
+
+  switch (lobby.status){
+    case "NotStarted()":
+      resHtml = "<div style='float: left'>" + lobby.user1Name + ": " +  player1ReadyBtn +"</div>"
+      if(lobby.user2Name !== ""){
+        var kickBtn = ""
+        if(lobby.user1Name === userName){
+          kickBtn = "<button class='btn btn-danger'>Kick</button>";
+        }
+        resHtml += "<div style='float: right'>" + lobby.user2Name + ": " +  player2ReadyBtn + "<br/>" + kickBtn + "</div>"
+      }else{
+        resHtml += "<div style='float: right'>waiting 2-nd player...</div>"
+      }
+      break;
+    case "Draft()":
+      resHtml = "<center><b>"+lobby.user1Name+ " vs " + lobby.user2Name +"</b></center>";
+      break;
+    case "Finish()":
+      var lastMap = _.find(lobby.maps, function (map){
+        return map.isBanned === false;
+      }).map;
+      resHtml = "<center><b>"+convertMapName(lastMap)+"</b></center>";
+  }
+
+  resHtml = resHtml + "</center>"
+
+  $("#playersStatsList").html(resHtml);
+}
+
+function banMap(map){
+  ws.send(JSON.stringify({
+    type: "banMap",
+    map: map
+  }));
+}
+
+function setReady(){
+  ws.send(JSON.stringify({
+    type: "setReady"
+  }));
+}
+
+function setNotReady(){
+  ws.send(JSON.stringify({
+    type: "setNotReady"
+  }));
+}
+
+function joinDecider(actorName){
+  console.log(actorName);
+  ws.send(JSON.stringify({
+    type: "joinDecider",
+    lobbyActorName: actorName
+  }));
+}
+
+function convertMapName (techMapName) {
+  var mapName = techMapName.replace("2p_", "").replaceAll("_", " ") + " (2)";
+  return mapName.charAt(0).toUpperCase() + mapName.slice(1);
+}

app/assets/stylesheets/main.less

@@ -67,6 +67,36 @@ body {
   }
 }
 
+.readyImg{
+  height: 25px;
+}
+
+#playerName{
+  color: white;
+}
+
+.banX{
+  font-size: 128px;
+  margin-top: -174px;
+  left: 34px;
+  color: red;
+  position: absolute;
+  z-index: 1;
+}
+
+.bannedMap{
+  -webkit-filter: grayscale(1); /* Webkit браузеры */
+}
+
+.mapSelect{
+  margin: 10px;
+  position:relative;
+  width: 175px;
+  height: 175px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .chart-holder, .details-holder {
   position: absolute;
   width: 100%;