changes

app/assets/javascripts/index.js

@@ -4,6 +4,7 @@ var userName = ""
 
 var raceCount = $("#raceCount").html()
 var existAdditionalRaces = $("#existAdditionalRaces").html() === "true"
+var existTextFieldRaces = $("#existTextFieldRaces").html() === "true"
 
 var isMuted = false;
 var isDraftStarted = false;
@@ -227,6 +228,8 @@ function disconnectLobby(error) {
 
 function getRaceImageByNumber(number) {
     switch (number) {
+        case 10:
+            return "/assets/images/raceIcons/cancel.png";
         case 1:
             return "/assets/images/raceIcons/SM.gif";
         case 2:
@@ -248,28 +251,6 @@ function getRaceImageByNumber(number) {
     }
 }
 
-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() {
 
@@ -277,7 +258,7 @@ function renderRaces() {
         var resHtml = "";
         for(var raceNum = 1; raceNum <= raceCount; raceNum++){
             resHtml += "<div class='col-xs-4'><center><h3>" + raceType + " race " + raceNum + "</h3>";
-            for (var i = 1; i <= 9; i++) {
+            for (var i = 1; i <= 10; i++) {
                 var selected = "raceNotSelected";
                 if ($.cookie("race-" + raceType + "-" + raceNum) == i) {
                     selected = "raceSelected";
@@ -293,9 +274,21 @@ function renderRaces() {
         return resHtml;
     }
 
+    function renderInputField() {
+        var raceTextInput = ''
+        if($.cookie("raceTextInput") !== undefined){
+            raceTextInput = $.cookie("raceTextInput")
+        }
+        return '<center><input type="text" class="form-control" id="raceInput" placeholder="Black fists, Imperial angels, Blood templars" oninput="checkRaceSelectFinish()" value="'+ raceTextInput +'"/></center>';
+    }
+
     var resHtml = "";
-    resHtml += getRaceSelectHtml("main", selectedRaces);
-    if(existAdditionalRaces) resHtml += getRaceSelectHtml("additional", selectedAdditionalRaces);
+    if(!existTextFieldRaces){
+        resHtml += getRaceSelectHtml("main", selectedRaces);
+        if(existAdditionalRaces) resHtml += getRaceSelectHtml("additional", selectedAdditionalRaces);
+    }else {
+        resHtml += renderInputField();
+    }
     resHtml += "<div style='clear: both;'></div></br>";
 
     resHtml += "<center><button id = 'selectRace' class='btn btn-primary' disabled onclick='sendSelectedRacesToServer()'>OK</button></center>"
@@ -327,15 +320,23 @@ function selectRace(button, race, raceNum, raceType) {
 function checkRaceSelectFinish() {
     if(selectedRaces.filter(x => x).length >= raceCount){
         $("#selectRace").removeAttr("disabled");
+    } else if($("#raceInput").val().trim() !== ''){
+        $("#selectRace").removeAttr("disabled");
     }
 }
 
 function sendSelectedRacesToServer() {
+    $.cookie('raceTextInput', $("#raceInput").val(), {expires: 1});
+    var selectedInput = $("#raceInput").val();
+    if(selectedInput === undefined){
+        selectedInput = ""
+    }
     console.log(selectedRaces);
     ws.send(JSON.stringify({
         type: "selectRace",
         mainRaces: selectedRaces.filter(x => x),
-        additionalRaces: selectedAdditionalRaces.filter(x => x)
+        additionalRaces: selectedAdditionalRaces.filter(x => x),
+        raceTextInput: selectedInput
     }));
     $("#mapList").html("<center>Waiting another player...</center>");
 }
@@ -524,12 +525,13 @@ function getRenderRaces(userInfo1, userInfo2) {
 
     function getRacesBlock(playerRaces, name){
         let resHtml = "<div style='display: inline-block; border: black 1px solid; background-color: #e3e3e3;'>" + "<h4>" + name + "</h4>";
-        resHtml += "main:";
         playerRaces.mainRaces.forEach((raceId) =>
             resHtml += "<img class=\"raceIcon\" src=" + getRaceImageByNumber(raceId) + "> ");
-        resHtml += "<br/> addt:";
         playerRaces.additionalRaces.forEach((raceId) =>
             resHtml += "<img class=\"raceIcon\" src=" + getRaceImageByNumber(raceId) + "> ");
+        if(existTextFieldRaces){
+            resHtml += "<span style='margin: 10px;'>" + playerRaces.raceTextInput + "</span>";
+        }
         resHtml += "</div>";
         return resHtml;
     }