310 lines
8.5 KiB
JavaScript
310 lines
8.5 KiB
JavaScript
var ws;
|
||
|
||
var userName = ""
|
||
|
||
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) {
|
||
|
||
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" lobbyId="'+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 +'</td>\n' +
|
||
' <td>'+ lobby.user2Info.name +'</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();
|
||
ws.send(JSON.stringify({
|
||
type: "createDecider"
|
||
}));
|
||
});
|
||
|
||
$("#updateDecider").click(function(event) {
|
||
event.preventDefault();
|
||
ws.send(JSON.stringify({
|
||
type: "updateDecider"
|
||
}));
|
||
});
|
||
|
||
$("#getAllUsers").click(function(event) {
|
||
event.preventDefault();
|
||
ws.send(JSON.stringify({
|
||
type: "getLobbies"
|
||
}));
|
||
});
|
||
|
||
$("#exit").click(function(event) {
|
||
event.preventDefault();
|
||
ws.send(JSON.stringify({
|
||
type: "leaveDecider"
|
||
}));
|
||
$("#decider").hide();
|
||
$("#lobbies").show();
|
||
});
|
||
|
||
if($.cookie('user')=== undefined){
|
||
var result = prompt("Введите ник", );
|
||
$.cookie('user', result, { expires: 7 });
|
||
userName = result;
|
||
}else{
|
||
userName = $.cookie('user');
|
||
}
|
||
|
||
$("#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":
|
||
renderMaps(message.lobby.maps);
|
||
renderPlayersAndStats(message.lobby);
|
||
break;
|
||
case "switchToLobby":
|
||
console.log(message);
|
||
switchToLobby(message.lobby.maps);
|
||
renderPlayersAndStats(message.lobby);
|
||
break;
|
||
case "lobbyError":
|
||
console.log(message);
|
||
disconnectLobby(message.error);
|
||
case "lobbies":
|
||
lobbyList.lobbies = message.lobbies;
|
||
lobbyList.render();
|
||
return console.log(message);
|
||
default:
|
||
}
|
||
};
|
||
ws.onopen = function () {
|
||
ws.send(JSON.stringify({
|
||
type: "userName",
|
||
name: $.cookie('user')
|
||
}));
|
||
}
|
||
|
||
let timerId = setInterval(() =>
|
||
ws.send(JSON.stringify({
|
||
type: "getLobbies"
|
||
})), 2000);
|
||
}
|
||
|
||
function changeNick() {
|
||
result = prompt("Введите ник", $.cookie('user'));
|
||
if(result == null) return;
|
||
$.cookie('user', result, { expires: 7 });
|
||
ws.send(JSON.stringify({
|
||
type: "userName",
|
||
name: $.cookie('user')
|
||
}));
|
||
|
||
userName = $.cookie('user');
|
||
$("#playerName").html(userName);
|
||
|
||
}
|
||
|
||
|
||
// -----ф-ии прихода с сервера
|
||
|
||
function switchToLobby(maps) {
|
||
console.log(maps);
|
||
renderMaps(maps);
|
||
$("#lobbies").hide();
|
||
$("#decider").show();
|
||
}
|
||
|
||
function disconnectLobby(error) {
|
||
$("#decider").hide();
|
||
$("#lobbies").show();
|
||
alert(error);
|
||
}
|
||
|
||
function renderMaps(maps) {
|
||
var resHtml = "";
|
||
|
||
_.each(maps, function (map) {
|
||
|
||
var banHtml = "";
|
||
var banClass = "";
|
||
if(map.isBanned){
|
||
banHtml = "<div class = 'banX'>✕</div>";
|
||
banClass = "bannedMap";
|
||
}
|
||
|
||
|
||
|
||
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">' +
|
||
'</div>'+convertMapName(map.map)+
|
||
banHtml + '</button></div>';
|
||
})
|
||
$("#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'/>";
|
||
|
||
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' 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' onclick='setReady()'>"+notReadyImg+" Not ready "+notReadyImg+"</button>"
|
||
}
|
||
} else {
|
||
if(lobby.user2Info.isReady){
|
||
player2ReadyBtn = readyImg
|
||
}else{
|
||
player2ReadyBtn = notReadyImg
|
||
}
|
||
}
|
||
|
||
switch (lobby.status){
|
||
case "NotStarted()":
|
||
resHtml = "<div style='float: left'>" + lobby.user1Info.name + ": " + player1ReadyBtn +"</div>"
|
||
if(lobby.user2Info.name !== ""){
|
||
var kickBtn = ""
|
||
if(lobby.user1Info.name === userName){
|
||
kickBtn = "<button class='btn btn-danger' onclick='kickSecondPlayer()'>Kick</button>";
|
||
}
|
||
resHtml += "<div style='float: right'>" + lobby.user2Info.name + ": " + player2ReadyBtn + "<br/>" + kickBtn + "</div>"
|
||
}else{
|
||
resHtml += "<div style='float: right'>waiting 2-nd player...</div>"
|
||
}
|
||
break;
|
||
case "Draft()":
|
||
console.log(lobby.turn);
|
||
var playerTurn = (lobby.playerTurn === 1) ? lobby.user1Info.name : lobby.user2Info.name
|
||
resHtml = "<center><b>"+lobby.user1Info.name + " vs " + lobby.user2Info.name +"</b><br/>" + playerTurn +" turn</center>";
|
||
break;
|
||
case "Finish()":
|
||
var lastMap = _.find(lobby.maps, function (map){
|
||
return map.isBanned === false;
|
||
}).map;
|
||
resHtml = "<center><b>"+convertMapName(lastMap)+"</b></center>";
|
||
}
|
||
|
||
resHtml = resHtml + "</center>"
|
||
|
||
$("#playersStatsList").html(resHtml);
|
||
}
|
||
|
||
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 joinDecider(actorName){
|
||
console.log(actorName);
|
||
ws.send(JSON.stringify({
|
||
type: "joinDecider",
|
||
lobbyActorName: actorName
|
||
}));
|
||
}
|
||
|
||
function kickSecondPlayer(){
|
||
ws.send(JSON.stringify({
|
||
type: "kickSecondPlayer"
|
||
}));
|
||
}
|
||
|
||
function convertMapName (techMapName) {
|
||
var mapName = techMapName.replace("2p_", "").replaceAll("_", " ") + " (2)";
|
||
return mapName.charAt(0).toUpperCase() + mapName.slice(1);
|
||
}
|