Рабочий десайдер

app/assets/javascripts/index.js

@@ -3,6 +3,11 @@ var ws;
 var userName = ""
 
 var raceCount = $("#raceCount").html()
+var isSolo = $("#isSolo").html() === 'true'
+
+var isMuted = false;
+var isDraftStarted = false;
+
 
 window.onload = function() {
 
@@ -96,6 +101,15 @@ window.onload = function() {
     }
   });
 
+  $("#mute").click(function(event) {
+    if(isMuted){
+      isMuted = false;
+      $("#mute").html("🔊");
+    }else{
+      isMuted = true;
+      $("#mute").html("🔈");
+    }
+  });
 
   $("#exit").click(function(event) {
     event.preventDefault();
@@ -123,7 +137,6 @@ window.onload = function() {
 
   $("#playerName").html(userName);
 
-
   ws = new WebSocket($("body").data("ws-url"));
   ws.onmessage = function(event) {
     var message;
@@ -131,6 +144,7 @@ window.onload = function() {
     switch (message.type) {
       case "refreshLobby":
         if(message.lobby.status === "SelectRace()" && (!isObserver)){
+          isDraftStarted = false;
           renderRaces();
         }else {
           renderMaps(message.lobby.maps, message.lobby.status);
@@ -140,7 +154,7 @@ window.onload = function() {
       case "switchToLobby":
         console.log(message);
         switchToLobby(message.lobby.maps, message.lobby.status);
-        renderPlayersAndStats(message.lobby);
+        if(!isSolo) renderPlayersAndStats(message.lobby);
         break;
       case "sendMessage":
         console.log(message);
@@ -148,7 +162,7 @@ window.onload = function() {
         break;
       case "sendMapBanMessage":
         console.log(message);
-        addBanMapMessageToChat(message.message);
+        handleMapBanEvent(message.message);
         break;
       case "lobbyError":
         console.log(message);
@@ -295,7 +309,7 @@ function renderRaces() {
         banned = "bannedRace";
         selectedFourthRace = i;
       }
-      resHtml += '<a href = "#" class="'+selected+' thirdRaceIcon" onclick="selectFourthRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
+      resHtml += '<a href = "#" class="'+selected+' fourthRaceIcon" onclick="selectFourthRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
     }
     resHtml += "</center></div>";
   }
@@ -392,7 +406,7 @@ function renderMaps(maps, lobbyStatus) {
       banHtml = "<div class = 'banX'>&#x2715;</div>";
       banClass = "bannedMap";
     }
-    if(lobbyStatus === "NotStarted()"){
+    if(lobbyStatus === "NotStarted()" && !isSolo){
       banClass = "bannedMap";
     }
 
@@ -427,28 +441,30 @@ function renderFinish(maps, firstPlayerInfo, secondPlayerInfo) {
 
   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)+"> ";
-  }
-  if(raceCount >= 4){
-    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.fourthRace)+"> ";
-  }
+  if(!isSolo){
+    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)+"> ";
+    }
+    if(raceCount >= 4){
+      resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.fourthRace)+"> ";
+    }
 
-  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)+"> ";
-  }
-  if(raceCount >= 4){
-    resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(secondPlayerInfo.selectedRaces.fourthRace)+"> ";
+    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)+"> ";
+    }
+    if(raceCount >= 4){
+      resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(secondPlayerInfo.selectedRaces.fourthRace)+"> ";
+    }
   }
 
   resHtml += "</center>"
@@ -566,32 +582,39 @@ function renderPlayersAndStats(lobby) {
       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(!isDraftStarted){
+        isDraftStarted = true;
       }
-      if(raceCount > 2){
-        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.thirdRace)+"> ";
-      }
-      if(raceCount > 3){
-        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.fourthRace)+"> ";
-      }
-      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)+"> ";
-      }
-      if(raceCount > 3){
-        resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user2Info.selectedRaces.fourthRace)+"> ";
+
+      if(!isSolo){
+        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)+"> ";
+        }
+        if(raceCount > 3){
+          resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.fourthRace)+"> ";
+        }
+        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)+"> ";
+        }
+        if(raceCount > 3){
+          resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user2Info.selectedRaces.fourthRace)+"> ";
+        }
+
       }
       break;
     case "Finish()":
@@ -611,7 +634,13 @@ function addMessageToChat(message){
   chatBox.scrollTop(40000);
 }
 
-function addBanMapMessageToChat(message){
+function handleMapBanEvent(message){
+  if(!isMuted){
+    var audioPick = new Audio('/assets/sound/pick.mp3.mpeg');
+    audioPick.volume = 0.1;
+    audioPick.play();
+  }
+
   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);
@@ -688,6 +717,10 @@ function kickSecondPlayer(){
 }
 
 function convertMapName (techMapName) {
-  var mapName = techMapName.replace("2p_", "").replaceAll("_", " ") + " (2)";
+  var mapPlayerSize = techMapName.charAt(0);
+  var mapName = techMapName.replace(mapPlayerSize + "p_", "").replaceAll("_", " ") +
+      " ("+mapPlayerSize+")";
+
+
   return mapName.charAt(0).toUpperCase() + mapName.slice(1);
 }