727 lines
22 KiB
JavaScript
727 lines
22 KiB
JavaScript
var ws;
|
||
|
||
var userName = ""
|
||
|
||
var raceCount = $("#raceCount").html()
|
||
var isSolo = $("#isSolo").html() === 'true'
|
||
|
||
var isMuted = false;
|
||
var isDraftStarted = false;
|
||
|
||
|
||
window.onload = function() {
|
||
|
||
'use strict';
|
||
|
||
function getRandomInt(max) {
|
||
return Math.floor(Math.random() * Math.floor(max));
|
||
}
|
||
|
||
var LobbyList = Backbone.View.extend({
|
||
|
||
lobbies: undefined,
|
||
|
||
initialize: function () {
|
||
this.elCount = 0;
|
||
},
|
||
|
||
template: _.template('<table id ="deciderList" class="table"><tbody><tr>\n' +
|
||
' <th>Host</th>\n' +
|
||
' <th>Status</th>\n' +
|
||
' <th>Action</th></tr>\n' +
|
||
' </tbody></table>'),
|
||
|
||
events: {
|
||
"click .title": "check" // Обработчик клика на кнопке "Проверить"
|
||
},
|
||
|
||
joinAsPlayer: function () {
|
||
this.elCount = "azaz" + getRandomInt(100000000);
|
||
this.render();
|
||
},
|
||
|
||
render: function() {
|
||
|
||
var lobbiesAsTableRows = _.reduce(this.lobbies, function (memo, lobby) {
|
||
|
||
if ($("#deciderName").html() !== lobby.deciderName) return memo;
|
||
|
||
var joinButton = (lobby.status === "NotStarted()") ? '<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" onclick="observerDecider(\''+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.user1Info.name.substring(0, 20) +'</td>\n' +
|
||
' <td>'+ lobby.user2Info.name.substring(0, 20) +'</td>\n' +
|
||
' <td>'+ lobby.status +'</td>\n' +
|
||
' <td>' + joinButton + ' ' + observerButton +
|
||
' </td>' +
|
||
'</tr>';
|
||
}, "");
|
||
|
||
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);
|
||
lobbyList.render();
|
||
|
||
$("#createDecider").click(function(event) {
|
||
event.preventDefault();
|
||
isObserver = false;
|
||
ws.send(JSON.stringify({
|
||
type: "createDecider",
|
||
deciderName: $("#deciderName").html()
|
||
}));
|
||
});
|
||
|
||
$("#submitmsg").click(function(event) {
|
||
sendMessage();
|
||
});
|
||
$("#usermsg").on('keyup', function (e) {
|
||
if (e.key === 'Enter' || e.keyCode === 13) {
|
||
sendMessage()
|
||
}
|
||
});
|
||
|
||
$("#mute").click(function(event) {
|
||
if(isMuted){
|
||
isMuted = false;
|
||
$("#mute").html("🔊");
|
||
}else{
|
||
isMuted = true;
|
||
$("#mute").html("🔈");
|
||
}
|
||
});
|
||
|
||
$("#exit").click(function(event) {
|
||
event.preventDefault();
|
||
ws.send(JSON.stringify({
|
||
type: "leaveDecider"
|
||
}));
|
||
$("#decider").hide();
|
||
$("#lobbies").show();
|
||
$(".navbar").show();
|
||
});
|
||
|
||
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);
|
||
|
||
ws = new WebSocket($("body").data("ws-url"));
|
||
ws.onmessage = function(event) {
|
||
var message;
|
||
message = JSON.parse(event.data);
|
||
switch (message.type) {
|
||
case "refreshLobby":
|
||
if(message.lobby.status === "SelectRace()" && (!isObserver)){
|
||
isDraftStarted = false;
|
||
renderRaces();
|
||
}else {
|
||
renderMaps(message.lobby.maps, message.lobby.status);
|
||
}
|
||
renderPlayersAndStats(message.lobby);
|
||
break;
|
||
case "switchToLobby":
|
||
console.log(message);
|
||
switchToLobby(message.lobby.maps, message.lobby.status);
|
||
if(!isSolo) renderPlayersAndStats(message.lobby);
|
||
break;
|
||
case "sendMessage":
|
||
console.log(message);
|
||
addMessageToChat(message.message);
|
||
break;
|
||
case "sendMapBanMessage":
|
||
console.log(message);
|
||
handleMapBanEvent(message.message);
|
||
break;
|
||
case "lobbyError":
|
||
console.log(message);
|
||
disconnectLobby(message.error);
|
||
break;
|
||
case "lobbies":
|
||
lobbyList.lobbies = message.lobbies;
|
||
lobbyList.render();
|
||
return console.log(message);
|
||
break;
|
||
default:
|
||
}
|
||
};
|
||
ws.onopen = function () {
|
||
ws.send(JSON.stringify({
|
||
type: "userName",
|
||
name: $.cookie('user')
|
||
}));
|
||
ws.send(JSON.stringify({
|
||
type: "getLobbies"
|
||
}));
|
||
}
|
||
|
||
var timerId = setInterval(() =>
|
||
ws.send(JSON.stringify({
|
||
type: "getLobbies"
|
||
})), 2000);
|
||
}
|
||
|
||
function changeNick() {
|
||
result = prompt("Введите ник", $.cookie('user'));
|
||
if(result == null) return;
|
||
result = result.substr(0, 20);
|
||
$.cookie('user', result, { expires: 7 });
|
||
ws.send(JSON.stringify({
|
||
type: "userName",
|
||
name: $.cookie('user')
|
||
}));
|
||
|
||
userName = $.cookie('user');
|
||
$("#playerName").html(userName);
|
||
|
||
}
|
||
|
||
|
||
// -----ф-ии прихода с сервера
|
||
|
||
function switchToLobby(maps, status) {
|
||
console.log(maps);
|
||
renderMaps(maps, status);
|
||
$("#lobbies").hide();
|
||
$(".navbar").hide();
|
||
$("#decider").show();
|
||
$("#chatbox").html("");
|
||
}
|
||
|
||
function disconnectLobby(error) {
|
||
$("#decider").hide();
|
||
$(".navbar").show();
|
||
$("#lobbies").show();
|
||
ws.send(JSON.stringify({
|
||
type: "getLobbies"
|
||
}));
|
||
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-3'><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-3'><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-3'><center><h2>Third 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" src="'+getRaceImageByNumber(i)+'"></a> ';
|
||
}
|
||
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+' fourthRaceIcon" 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>";
|
||
|
||
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;
|
||
var selectedFourthRace = 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).addClass("raceNotSelected");
|
||
});
|
||
$(button).removeClass("raceNotSelected");
|
||
$(button).addClass("raceSelected");
|
||
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) && (raceCount < 4 || selectedFourthRace !== 0)){
|
||
$("#selectRace").removeAttr("disabled")
|
||
}
|
||
}
|
||
|
||
function sendSelectedRacesToServer(){
|
||
ws.send(JSON.stringify({
|
||
type: "selectRace",
|
||
raceFirst: selectedMainRace,
|
||
raceSecond: selectedSecondRace,
|
||
raceThird: selectedThirdRace,
|
||
raceFourth: selectedFourthRace
|
||
}));
|
||
$("#mapList").html("<center>Waiting another player...</center>");
|
||
}
|
||
|
||
// ---------------------------------------------
|
||
|
||
function renderMaps(maps, lobbyStatus) {
|
||
var resHtml = "";
|
||
|
||
_.each(maps, function (map) {
|
||
|
||
var banHtml = "";
|
||
var banClass = "";
|
||
if(map.isBanned){
|
||
banHtml = "<div class = 'banX'>✕</div>";
|
||
banClass = "bannedMap";
|
||
}
|
||
if(lobbyStatus === "NotStarted()" && !isSolo){
|
||
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" '+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;'>";
|
||
|
||
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 += "</center>"
|
||
|
||
$("#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'/>";
|
||
var warningClass = (lobby.user2Info.name !== "") ? "warningButton" : "";
|
||
|
||
if(lobby.user1Info.name === userName){
|
||
if(lobby.user1Info.isReady){
|
||
player1ReadyBtn = "<button class='btn btn-default' onclick='setNotReady()'>"+readyImg+" Ready "+readyImg+"</button>"
|
||
}else{
|
||
player1ReadyBtn = "<button class='btn btn-default "+warningClass+"' onclick='setReady()'>"+notReadyImg+" Not ready "+notReadyImg+"</button>"
|
||
}
|
||
}else{
|
||
if(lobby.user1Info.isReady){
|
||
player1ReadyBtn = readyImg
|
||
}else{
|
||
player1ReadyBtn = notReadyImg
|
||
}
|
||
}
|
||
|
||
if(lobby.user2Info.name === userName){
|
||
if(lobby.user2Info.isReady){
|
||
player2ReadyBtn = "<button class='btn btn-default' onclick='setNotReady()'>"+readyImg+" Ready "+readyImg+"</button>"
|
||
}else{
|
||
player2ReadyBtn = "<button class='btn btn-default "+warningClass+"' onclick='setReady()'>"+notReadyImg+" Not ready "+notReadyImg+"</button>"
|
||
}
|
||
} else {
|
||
if(lobby.user2Info.isReady){
|
||
player2ReadyBtn = readyImg
|
||
}else{
|
||
player2ReadyBtn = notReadyImg
|
||
}
|
||
}
|
||
|
||
if (lobby.user1Info.name === userName || lobby.user2Info.name === userName) {
|
||
$("#inputMsg").show();
|
||
} else {
|
||
$("#inputMsg").hide();
|
||
}
|
||
|
||
var lobbyTypeText = "";
|
||
var last1Selected = "";
|
||
var last3Selected = "";
|
||
var last5Selected = "";
|
||
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";
|
||
break;
|
||
case "Last5()":
|
||
last5Selected = "selected";
|
||
lobbyTypeText = "Play on last 5 maps";
|
||
break;
|
||
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/>"
|
||
if(lobby.user2Info.name !== ""){
|
||
var kickBtn = ""
|
||
if(lobby.user1Info.name === userName){
|
||
kickBtn = " - <button class='btn btn-danger' onclick='kickSecondPlayer()'>Kick</button>";
|
||
}
|
||
resHtml += "<div>" + lobby.user2Info.name + ": " + player2ReadyBtn + kickBtn + "</div>"
|
||
}else{
|
||
resHtml += "<div>waiting 2-nd player...</div>"
|
||
}
|
||
|
||
var disabledText = "";
|
||
|
||
|
||
if(lobby.user1Info.name !== userName){
|
||
disabledText = "disabled";
|
||
}
|
||
|
||
//TODO: here from config
|
||
resHtml += "<br/><select class=\"form-control\" id = 'deciderOption' onChange='changeLobbyType()' "+disabledText+" >" +
|
||
"<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){
|
||
disabledText = "disabled";
|
||
}else{
|
||
disabledText = "";
|
||
}
|
||
/*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()":
|
||
if(!isDraftStarted){
|
||
isDraftStarted = true;
|
||
}
|
||
|
||
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()":
|
||
renderFinish(lobby.maps, lobby.user1Info, lobby.user2Info);
|
||
break;
|
||
}
|
||
|
||
resHtml = resHtml + "</center>"
|
||
|
||
$("#playersStatsList").html(resHtml);
|
||
}
|
||
|
||
function addMessageToChat(message){
|
||
var messageHtml = "<div class='msgln'> <b>" + message.userName + "</b>: " + message.message + "<br></div>";
|
||
var chatBox = $("#chatbox");
|
||
chatBox.append(messageHtml);
|
||
chatBox.scrollTop(40000);
|
||
}
|
||
|
||
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);
|
||
chatBox.scrollTop(40000);
|
||
}
|
||
|
||
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 changeLobbyType(){
|
||
var lobbyType = $("#deciderOption").val();
|
||
ws.send(JSON.stringify({
|
||
type: "changeLobbyType",
|
||
lobbyType: lobbyType
|
||
}));
|
||
}
|
||
|
||
function changeIsNecronSelected(){
|
||
var isNecronSelected = $("#isNecron").is(':checked');
|
||
ws.send(JSON.stringify({
|
||
type: "changeIsNecronSelected",
|
||
isNecronSelected: isNecronSelected
|
||
}));
|
||
}
|
||
|
||
function joinDecider(actorName){
|
||
isObserver = false;
|
||
ws.send(JSON.stringify({
|
||
type: "joinDecider",
|
||
lobbyActorName: actorName
|
||
}));
|
||
}
|
||
|
||
function observerDecider(actorName){
|
||
isObserver = true;
|
||
ws.send(JSON.stringify({
|
||
type: "observerDecider",
|
||
lobbyActorName: actorName
|
||
}));
|
||
}
|
||
|
||
function sendMessage(){
|
||
var userInput = $("#usermsg");
|
||
var message = userInput.val();
|
||
userInput.val("");
|
||
if(message !== ""){
|
||
ws.send(JSON.stringify({
|
||
type: "sendMessage",
|
||
message: message
|
||
}));
|
||
}
|
||
}
|
||
|
||
function kickSecondPlayer(){
|
||
ws.send(JSON.stringify({
|
||
type: "kickSecondPlayer"
|
||
}));
|
||
}
|
||
|
||
function convertMapName (techMapName) {
|
||
var mapPlayerSize = techMapName.charAt(0);
|
||
var mapName = techMapName.replace(mapPlayerSize + "p_", "").replaceAll("_", " ") +
|
||
" ("+mapPlayerSize+")";
|
||
|
||
|
||
return mapName.charAt(0).toUpperCase() + mapName.slice(1);
|
||
}
|