Add fourth player, add 4x4 maps

app/actors/LobbieActor.scala

@@ -258,7 +258,7 @@ case class ChangeIsNecronSelected(isSelected: Boolean)
 
 case object InfoQuery
 
-case class SelectedRaces(firstRace: Int, secondRace: Int, thirdRace: Int)
+case class SelectedRaces(firstRace: Int, secondRace: Int, thirdRace: Int, fourthRace: Int)
 
 case class UserInfo(name: String, isReady: Boolean, selectedRaces: Option[SelectedRaces] = None)
 

app/actors/UserActor.scala

@@ -176,7 +176,8 @@ class UserActor(out: ActorRef,
           val firstRace = (json \ "raceFirst").as[Int]
           val secondRace = (json \ "raceSecond").as[Int]
           val thirdRace = (json \ "raceThird").as[Int]
-          lobbieActor.foreach(lobby => lobby ! SelectedRaces(firstRace, secondRace, thirdRace))
+          val fourthRace = (json \ "raceFourth").as[Int]
+          lobbieActor.foreach(lobby => lobby ! SelectedRaces(firstRace, secondRace, thirdRace, fourthRace))
 
         case Some("getLobbies") =>
           logger.debug("Get all lobby request")

app/assets/javascripts/index.js

@@ -247,7 +247,7 @@ function getRaceVideoByNumber(number){
 
 function renderRaces() {
   var resHtml = "";
-  resHtml += "<div class='col-xs-4'><center><h2>First race</h2>";
+  resHtml += "<div class='col-xs-3'><center><h2>First race</h2>";
   for(var i = 1; i <= 9; i++){
     var selected = "raceNotSelected";
     if($.cookie("race1") == i){
@@ -259,7 +259,7 @@ function renderRaces() {
   resHtml += "</center></div>";
 
   if(raceCount >= 2){
-    resHtml += "<div class='col-xs-4'><center><h2>Second race</h2>";
+    resHtml += "<div class='col-xs-3'><center><h2>Second race</h2>";
     for(var i = 1; i <= 9; i++){
       var selected = "raceNotSelected";
       if($.cookie("race2") == i){
@@ -272,7 +272,7 @@ function renderRaces() {
   }
 
   if(raceCount >= 3){
-    resHtml += "<div class='col-xs-4'><center><h2>Third race</h2>";
+    resHtml += "<div class='col-xs-3'><center><h2>Third race</h2>";
     for(var i = 1; i <= 9; i++){
       var selected = "raceNotSelected";
       var banned = "";
@@ -285,6 +285,20 @@ function renderRaces() {
     }
     resHtml += "</center></div>";
   }
+  if(raceCount >= 4){
+    resHtml += "<div class='col-xs-3'><center><h2>Fourth race</h2>";
+    for(var i = 1; i <= 9; i++){
+      var selected = "raceNotSelected";
+      var banned = "";
+      if($.cookie("race4") == i){
+        selected = "raceSelected";
+        banned = "bannedRace";
+        selectedFourthRace = i;
+      }
+      resHtml += '<a href = "#" class="'+selected+' thirdRaceIcon" onclick="selectFourthRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
+    }
+    resHtml += "</center></div>";
+  }
   resHtml += "<div class='col-xs-4'></div>";
   resHtml += "<div style='clear: both;'></div></br>";
 
@@ -296,6 +310,7 @@ function renderRaces() {
 var selectedMainRace = 0;
 var selectedSecondRace = 0;
 var selectedThirdRace = 0;
+var selectedFourthRace = 0;
 
 function selectMainRace(button, race){
   selectedMainRace = race;
@@ -334,9 +349,21 @@ function selectThirdRace(button, race){
   checkRaceSelectFinish();
 }
 
+function selectFourthRace(button, race){
+  selectedFourthRace = race;
+  $.cookie("race4", race, { expires: 1 });
+  _.each($(".fourthRaceIcon"), function (el){
+    $(el).removeClass("raceSelected");
+    $(el).addClass("raceNotSelected");
+  });
+  $(button).removeClass("raceNotSelected");
+  $(button).addClass("raceSelected");
+  checkRaceSelectFinish();
+}
+
 function checkRaceSelectFinish(){
 
-  if(selectedMainRace !== 0 && (raceCount < 2 || selectedSecondRace !== 0)  && (raceCount < 3 || selectedThirdRace !== 0)){
+  if(selectedMainRace !== 0 && (raceCount < 2 || selectedSecondRace !== 0)  && (raceCount < 3 || selectedThirdRace !== 0) && (raceCount < 4 || selectedFourthRace !== 0)){
     $("#selectRace").removeAttr("disabled")
   }
 }
@@ -347,6 +374,7 @@ function sendSelectedRacesToServer(){
     raceFirst: selectedMainRace,
     raceSecond: selectedSecondRace,
     raceThird: selectedThirdRace,
+    raceFourth: selectedFourthRace
   }));
   $("#mapList").html("<center>Waiting another player...</center>");
 }
@@ -407,6 +435,9 @@ function renderFinish(maps, firstPlayerInfo, secondPlayerInfo) {
   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)+"> ";
@@ -416,6 +447,9 @@ function renderFinish(maps, firstPlayerInfo, secondPlayerInfo) {
   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>"
 
@@ -545,6 +579,9 @@ function renderPlayersAndStats(lobby) {
       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){
@@ -553,6 +590,9 @@ function renderPlayersAndStats(lobby) {
       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()":
       renderFinish(lobby.maps, lobby.user1Info, lobby.user2Info);