Видосы и параметризованный выбор кол-ва рас

app/assets/images/maps/allMaps.json

@@ -132,6 +132,8 @@
     "6p_agamar_desert": "Agamar Desert (6)",
     "6p_alvarus": "Alvarus (6)",
     "6p_kaurav_city": "Kaurav City (6)",
+    "6p_snowblind": "Snowblind (6)",
+    "6p_ruined_greatway": "Ruined Greatway (6)",
     "8p_forbidden_jungle": "Forbidden Jungle (8)",
     "8p_rhean_jungle": "Rhean Jungle (8)",
     "8p_thurabis_plateau": "ThurAbis Plateau (8)",

app/assets/javascripts/index.js

@@ -2,6 +2,8 @@ var ws;
 
 var userName = ""
 
+var raceCount = $("#raceCount").html()
+
 window.onload = function() {
 
   'use strict';
@@ -78,6 +80,7 @@ window.onload = function() {
 
   $("#createDecider").click(function(event) {
     event.preventDefault();
+    isObserver = false;
     ws.send(JSON.stringify({
       type: "createDecider",
       deciderName: $("#deciderName").html()
@@ -104,14 +107,20 @@ window.onload = function() {
     $(".navbar").show();
   });
 
-  if($.cookie('user')=== undefined){
-    var result = prompt("Enter nickname: ", );
-    $.cookie('user', result, { expires: 1337 });
-    userName = result;
-  }else{
-    userName = $.cookie('user');
+  function requestName(){
+    if($.cookie('user') === undefined || $.cookie('user')=== "null"|| $.cookie('user')=== ""){
+      var result = prompt("Enter nickname: ", );
+      $.cookie('user', result, { expires: 1337 });
+      userName = result;
+      requestName();
+    }else{
+      userName = $.cookie('user');
+    }
   }
 
+  requestName();
+
+
   $("#playerName").html(userName);
 
 
@@ -121,7 +130,11 @@ window.onload = function() {
     message = JSON.parse(event.data);
     switch (message.type) {
       case "refreshLobby":
-        renderMaps(message.lobby.maps, message.lobby.status);
+        if(message.lobby.status === "SelectRace()" && (!isObserver)){
+          renderRaces();
+        }else {
+          renderMaps(message.lobby.maps, message.lobby.status);
+        }
         renderPlayersAndStats(message.lobby);
         break;
       case "switchToLobby":
@@ -202,6 +215,146 @@ function disconnectLobby(error) {
   alert(error);
 }
 
+// ---------------Выбор рас --------------
+
+function getRaceImageByNumber(number){
+  switch (number) {
+    case 1: return  "/assets/images/raceIcons/SM.gif";
+    case 2: return  "/assets/images/raceIcons/Chaos.gif";
+    case 3: return  "/assets/images/raceIcons/Eldar.gif";
+    case 4: return  "/assets/images/raceIcons/Orks.gif";
+    case 5: return  "/assets/images/raceIcons/IG.gif";
+    case 6: return  "/assets/images/raceIcons/Nec.gif";
+    case 7: return  "/assets/images/raceIcons/Tau.gif";
+    case 8: return  "/assets/images/raceIcons/Sob.gif";
+    case 9: return  "/assets/images/raceIcons/De.gif";
+  }
+}
+
+function getRaceVideoByNumber(number){
+  switch (number) {
+    case 1: return  "/assets/video/races/SM.mp4";
+    case 2: return  "/assets/video/races/Chaos.mp4";
+    case 3: return  "/assets/video/races/Eldar.mp4";
+    case 4: return  "/assets/video/races/Orks.mp4";
+    case 5: return  "/assets/video/races/IG.mp4";
+    case 6: return  "/assets/video/races/Nec.mp4";
+    case 7: return  "/assets/video/races/Tau.mp4";
+    case 8: return  "/assets/video/races/Sob.mp4";
+    case 9: return  "/assets/video/races/SM.mp4";
+  }
+}
+
+function renderRaces() {
+  var resHtml = "";
+  resHtml += "<div class='col-xs-4'><center><h2>First race</h2>";
+  for(var i = 1; i <= 9; i++){
+    var selected = "raceNotSelected";
+    if($.cookie("race1") == i){
+      selected = "raceSelected";
+      selectedMainRace = i;
+    }
+    resHtml += '<a href = "#" class="'+selected+' mainRaceIcon" onclick="selectMainRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
+  }
+  resHtml += "</center></div>";
+
+  if(raceCount >= 2){
+    resHtml += "<div class='col-xs-4'><center><h2>Second race</h2>";
+    for(var i = 1; i <= 9; i++){
+      var selected = "raceNotSelected";
+      if($.cookie("race2") == i){
+        selected = "raceSelected";
+        selectedSecondRace = i;
+      }
+      resHtml += '<a href = "#" class="'+selected+' additionalRaceIcon" onclick="selectSecondRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
+    }
+    resHtml += "</center></div>";
+  }
+
+  if(raceCount >= 3){
+    resHtml += "<div class='col-xs-4'><center><h2>Ban race</h2>";
+    for(var i = 1; i <= 9; i++){
+      var selected = "raceNotSelected";
+      var banned = "";
+      if($.cookie("race3") == i){
+        selected = "raceSelected";
+        banned = "bannedRace";
+        selectedThirdRace = i;
+      }
+      resHtml += '<a href = "#" class="'+selected+' thirdRaceIcon" onclick="selectThirdRace(this, ' +i+')"><img class="raceIcon '+banned+'" src="'+getRaceImageByNumber(i)+'"></a> ';
+    }
+    resHtml += "</center></div>";
+  }
+  resHtml += "<div class='col-xs-4'></div>";
+  resHtml += "<div style='clear: both;'></div></br>";
+
+  resHtml += "<center><button id = 'selectRace' class='btn btn-primary' disabled onclick='sendSelectedRacesToServer()'>OK</button></center>"
+  $("#mapList").html(resHtml);
+  checkRaceSelectFinish();
+}
+
+var selectedMainRace = 0;
+var selectedSecondRace = 0;
+var selectedThirdRace = 0;
+
+function selectMainRace(button, race){
+  selectedMainRace = race;
+  $.cookie("race1", race, { expires: 1 });
+  _.each($(".mainRaceIcon"), function (el){
+    $(el).removeClass("raceSelected");
+    $(el).addClass("raceNotSelected");
+  });
+  $(button).removeClass("raceNotSelected");
+  $(button).addClass("raceSelected");
+  checkRaceSelectFinish();
+
+}
+
+function selectSecondRace(button, race){
+  selectedSecondRace = race;
+  $.cookie("race2", race, { expires: 1 });
+  _.each($(".additionalRaceIcon"), function (el){
+    $(el).removeClass("raceSelected");
+    $(el).addClass("raceNotSelected");
+  });
+  $(button).removeClass("raceNotSelected");
+  $(button).addClass("raceSelected");
+  checkRaceSelectFinish();
+}
+
+function selectThirdRace(button, race){
+  selectedThirdRace = race;
+  $.cookie("race3", race, { expires: 1 });
+  _.each($(".thirdRaceIcon"), function (el){
+    $(el).removeClass("raceSelected");
+    $(el).children('img').removeClass("bannedRace");
+    $(el).addClass("raceNotSelected");
+  });
+  $(button).removeClass("raceNotSelected");
+  $(button).addClass("raceSelected");
+  $(button).children("img").addClass("bannedRace");
+  checkRaceSelectFinish();
+}
+
+function checkRaceSelectFinish(){
+
+  if(selectedMainRace !== 0 && (raceCount < 2 || selectedSecondRace !== 0)  && (raceCount < 3 || selectedThirdRace !== 0)){
+    $("#selectRace").removeAttr("disabled")
+  }
+}
+
+function sendSelectedRacesToServer(){
+  ws.send(JSON.stringify({
+    type: "selectRace",
+    raceFirst: selectedMainRace,
+    raceSecond: selectedSecondRace,
+    raceThird: selectedThirdRace,
+  }));
+  $("#mapList").html("<center>Waiting another player...</center>");
+}
+
+// ---------------------------------------------
+
 function renderMaps(maps, lobbyStatus) {
   var resHtml = "";
 
@@ -217,15 +370,60 @@ function renderMaps(maps, lobbyStatus) {
       banClass = "bannedMap";
     }
 
+    var title = ""
+
+    if(map.description != null){
+      title = "title='"+map.description+"'";
+    }
+
     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">' +
+        '<img class="img-rounded center-block" '+title+' style="width:128px;" src="/assets/images/maps/'+encodeURI(map.map)+'.jpg">' +
         '</div>'+convertMapName(map.map)+
         banHtml + '</button></div>';
   })
   $("#mapList").html(resHtml);
 }
 
+var isObserver = false;
+
+function renderFinish(maps, firstPlayerInfo, secondPlayerInfo) {
+  var resHtml = "<center>";
+
+  _.each(maps, function (map) {
+    if(!map.isBanned){
+      resHtml = resHtml + '<div class="col-xs-4 col-md-3 col-lg-2"><button class = "mapSelect" >'+
+          '<div class="mapImageAndText ">' +
+          '<img class="img-rounded center-block" style="width:128px;" src="/assets/images/maps/'+encodeURI(map.map)+'.jpg">' +
+          '</div>'+convertMapName(map.map)+ '</button></div>';
+    }
+  })
+
+  resHtml += "<div style='clear: both;'>";
+
+  resHtml += "<h2>" +  firstPlayerInfo.name + "</h2>";
+  resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.firstRace)+"> ";
+  if(raceCount >= 2){
+    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.secondRace)+"> ";
+  }
+  if(raceCount >= 3){
+    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.thirdRace)+"> ";
+  }
+
+  resHtml += "<h2>" +  secondPlayerInfo.name + "</h2>";
+  resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(secondPlayerInfo.selectedRaces.firstRace)+"> ";
+  if(raceCount >= 2){
+    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(secondPlayerInfo.selectedRaces.secondRace)+"> ";
+  }
+  if(raceCount >= 3){
+    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(secondPlayerInfo.selectedRaces.thirdRace)+"> ";
+  }
+
+  resHtml += "</center>"
+
+  $("#mapList").html(resHtml);
+}
+
 function renderPlayersAndStats(lobby) {
   var resHtml = "<center>";
   var player1ReadyBtn = "";
@@ -269,15 +467,19 @@ function renderPlayersAndStats(lobby) {
   }
 
   var lobbyTypeText = "";
+  var last1Selected = "";
   var last3Selected = "";
   var last5Selected = "";
-  var superfinalSelected = "";
-  var looserPickSelected = "";
+  var last7Selected = "";
 
   var isNecronsSelected = "";
   if(lobby.isNecrons) isNecronsSelected = "checked";
 
   switch (lobby.selectedType) {
+    case "Last1()":
+      looserPickSelected = "selected";
+      lobbyTypeText = "Play on last map";
+      break;
     case "Last3()":
       last3Selected = "selected";
       lobbyTypeText = "Play on last 3 maps";
@@ -286,16 +488,13 @@ function renderPlayersAndStats(lobby) {
       last5Selected = "selected";
       lobbyTypeText = "Play on last 5 maps";
       break;
-    case "Superfinal()":
-      superfinalSelected = "selected";
-      lobbyTypeText = "Draft to select 9 maps for BO7";
-      break;
-    case "LooserPick()":
-      looserPickSelected = "selected";
-      lobbyTypeText = "Play on last map";
+    case "Last7()":
+      last7Selected = "selected";
+      lobbyTypeText = "Play on last 7 maps";
       break;
   }
 
+  console.log(lobby.status);
   switch (lobby.status) {
     case "NotStarted()":
       resHtml = "<div style='float: left; padding-top: 10px;'> <div>" + lobby.user1Info.name + ": " +  player1ReadyBtn +"</div><br/>"
@@ -318,10 +517,10 @@ function renderPlayersAndStats(lobby) {
 
       //TODO: here from config
       resHtml += "<br/><select class=\"form-control\" id = 'deciderOption' onChange='changeLobbyType()' "+disabledText+" >" +
-          "<option "+looserPickSelected+"  value = 'looserpick'>Play on last map</option>" +
-          //"<option "+last3Selected+"  value = 'last3'>Play on last 3 maps</option>" +
-          //"<option "+last5Selected+"  value = 'last5'>Play on last 5 maps</option>" +
-          //"<option "+superfinalSelected+"  value = 'superfinal'>Superfinal (BO7)</option>" +
+          "<option "+last1Selected+"  value = 'last1'>Play on last map</option>" +
+          "<option "+last3Selected+"  value = 'last3'>Play on last 3 maps</option>" +
+          "<option "+last5Selected+"  value = 'last5'>Play on last 5 maps</option>" +
+          /*"<option "+last7Selected+"  value = 'last7'>Play on last 7 maps</option>" +*/
           "</select>";
 
       if(lobby.user1Info.name !== userName && lobby.user2Info.name !== userName){
@@ -329,26 +528,37 @@ function renderPlayersAndStats(lobby) {
       }else{
         disabledText = "";
       }
-      if($("#necronPresence").html() === "true"){
-        resHtml += "<br/><label><input onchange=\"changeIsNecronSelected()\" id='isNecron' type=\"checkbox\" "+isNecronsSelected +" " + disabledText +">" +
-            " Necrons are present</label>";
-      }
+      /*for(var i = 1; i <= 9; i++){
+        resHtml += '<a href = "#" class="raceNotSelected mainRaceIcon" style="position: absolute; z-index: -1;"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
+      }*/
       resHtml += "</div>";
       break;
+    case "SelectRace()":
+      resHtml = "<center>"+lobby.user1Info.name + " vs " + lobby.user2Info.name + " - " +lobbyTypeText+ "<br/> players select races</center>";
+      break;
     case "Draft()":
       console.log(lobby.turn);
       var playerTurn = (lobby.playerTurn === 1) ? lobby.user1Info.name : lobby.user2Info.name
       resHtml = "<center>"+lobby.user1Info.name + " vs " + lobby.user2Info.name + " - " +lobbyTypeText+ "<br/><b>" + playerTurn +"</b> turn</center>";
+      resHtml += "<center><img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.firstRace)+"> ";
+      if(raceCount > 1){
+        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.secondRace)+"> ";
+      }
+      if(raceCount > 2){
+        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.thirdRace)+"> ";
+      }
+      resHtml += " <span style='font-size: 14px'>VS</span> ";
+      resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user2Info.selectedRaces.firstRace)+">";
+      if(raceCount > 1){
+        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user2Info.selectedRaces.secondRace)+"> ";
+      }
+      if(raceCount > 2){
+        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user2Info.selectedRaces.thirdRace)+"> ";
+      }
       break;
     case "Finish()":
-      var lastMaps = _.filter(lobby.maps, function (map){
-        return map.isBanned === false;
-      });
-      resHtml = "<center><b>";
-      _.forEach(lastMaps,function (map){
-        resHtml += convertMapName(map.map) + "; "
-      })
-      resHtml += "</b></center>";
+      renderFinish(lobby.maps, lobby.user1Info, lobby.user2Info);
+      break;
   }
 
   resHtml = resHtml + "</center>"
@@ -406,6 +616,7 @@ function changeIsNecronSelected(){
 }
 
 function joinDecider(actorName){
+  isObserver = false;
   ws.send(JSON.stringify({
     type: "joinDecider",
     lobbyActorName: actorName
@@ -413,6 +624,7 @@ function joinDecider(actorName){
 }
 
 function observerDecider(actorName){
+  isObserver = true;
   ws.send(JSON.stringify({
     type: "observerDecider",
     lobbyActorName: actorName

app/assets/stylesheets/main.css

@@ -20,6 +20,13 @@
   -webkit-filter: grayscale(1); /* Webkit браузеры */
 }
 
+.bannedRace {
+  height: 96px;
+  background-color: red;
+  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
+  border: 2px solid red;
+}
+
 .mapSelect{
   margin: 4px;
   position:relative;
@@ -29,6 +36,39 @@
   overflow: hidden;
 }
 
+.raceIcon{
+  width: 90px;
+  border-radius: 5px;
+  margin: 3px;
+  border: 1px solid;
+}
+
+.raceNotSelected{
+  -webkit-filter: grayscale(1); /* Webkit браузеры */
+}
+
+.raceNotSelected:hover{
+  -webkit-filter: grayscale(0); /* Webkit браузеры */
+}
+
+.raceSelected{
+  -webkit-filter: brightness(1.3);
+}
+
+.tooltip span{
+  border-radius: 5px 5px 5px 5px;
+  visibility: hidden;
+  position: absolute;
+  left: 200px;
+  background: #fff;
+  box-shadow: -2px 2px 10px -1px #333;
+  border-radius: 2px;
+}
+
+.tooltip:hover span{
+  visibility: visible;
+}
+
 @keyframes glowing {
   0% {
     box-shadow: 0 0 2px #074673;