Anibus/Soulstorm-tournament-decider
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Видосы и параметризованный выбор кол-ва рас

Browse Source
This commit is contained in:
v.holodov
2022-06-03 21:07:54 +03:00
parent aa692419cf
commit d3e90fb01e
34 changed files with 685 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/javascripts/index.js
+245 -33
View File
@@ -2,6 +2,8 @@ var ws;
var userName = ""
var raceCount = $("#raceCount").html()
window.onload = function() {
'use strict';
@@ -78,6 +80,7 @@ window.onload = function() {
$("#createDecider").click(function(event) {
event.preventDefault();
isObserver = false;
ws.send(JSON.stringify({
type: "createDecider",
deciderName: $("#deciderName").html()
@@ -104,14 +107,20 @@ window.onload = function() {
$(".navbar").show();
});
if($.cookie('user')=== undefined){
var result = prompt("Enter nickname: ", );
$.cookie('user', result, { expires: 1337 });
userName = result;
}else{
userName = $.cookie('user');
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);
@@ -121,7 +130,11 @@ window.onload = function() {
message = JSON.parse(event.data);
switch (message.type) {
case "refreshLobby":
renderMaps(message.lobby.maps, message.lobby.status);
if(message.lobby.status === "SelectRace()" && (!isObserver)){
renderRaces();
}else {
renderMaps(message.lobby.maps, message.lobby.status);
}
renderPlayersAndStats(message.lobby);
break;
case "switchToLobby":
@@ -202,6 +215,146 @@ function disconnectLobby(error) {
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-4'><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-4'><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-4'><center><h2>Ban 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 '+banned+'" 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;
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).children('img').removeClass("bannedRace");
$(el).addClass("raceNotSelected");
});
$(button).removeClass("raceNotSelected");
$(button).addClass("raceSelected");
$(button).children("img").addClass("bannedRace");
checkRaceSelectFinish();
}
function checkRaceSelectFinish(){
if(selectedMainRace !== 0 && (raceCount < 2 || selectedSecondRace !== 0) && (raceCount < 3 || selectedThirdRace !== 0)){
$("#selectRace").removeAttr("disabled")
}
}
function sendSelectedRacesToServer(){
ws.send(JSON.stringify({
type: "selectRace",
raceFirst: selectedMainRace,
raceSecond: selectedSecondRace,
raceThird: selectedThirdRace,
}));
$("#mapList").html("<center>Waiting another player...</center>");
}
// ---------------------------------------------
function renderMaps(maps, lobbyStatus) {
var resHtml = "";
@@ -217,15 +370,60 @@ function renderMaps(maps, lobbyStatus) {
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" style="width:128px;" src="/assets/images/maps/'+encodeURI(map.map)+'.jpg">' +
'<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;'>";
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)+"> ";
}
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)+"> ";
}
resHtml += "</center>"
$("#mapList").html(resHtml);
}
function renderPlayersAndStats(lobby) {
var resHtml = "<center>";
var player1ReadyBtn = "";
@@ -269,15 +467,19 @@ function renderPlayersAndStats(lobby) {
}
var lobbyTypeText = "";
var last1Selected = "";
var last3Selected = "";
var last5Selected = "";
var superfinalSelected = "";
var looserPickSelected = "";
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";
@@ -286,16 +488,13 @@ function renderPlayersAndStats(lobby) {
last5Selected = "selected";
lobbyTypeText = "Play on last 5 maps";
break;
case "Superfinal()":
superfinalSelected = "selected";
lobbyTypeText = "Draft to select 9 maps for BO7";
break;
case "LooserPick()":
looserPickSelected = "selected";
lobbyTypeText = "Play on last map";
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/>"
@@ -318,10 +517,10 @@ function renderPlayersAndStats(lobby) {
//TODO: here from config
resHtml += "<br/><select class=\"form-control\" id = 'deciderOption' onChange='changeLobbyType()' "+disabledText+" >" +
"<option "+looserPickSelected+" value = 'looserpick'>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 "+superfinalSelected+" value = 'superfinal'>Superfinal (BO7)</option>" +
"<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){
@@ -329,26 +528,37 @@ function renderPlayersAndStats(lobby) {
}else{
disabledText = "";
}
if($("#necronPresence").html() === "true"){
resHtml += "<br/><label><input onchange=\"changeIsNecronSelected()\" id='isNecron' type=\"checkbox\" "+isNecronsSelected +" " + disabledText +">" +
" Necrons are present</label>";
}
/*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()":
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(raceCount > 2){
resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(lobby.user1Info.selectedRaces.thirdRace)+"> ";
}
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)+"> ";
}
break;
case "Finish()":
var lastMaps = _.filter(lobby.maps, function (map){
return map.isBanned === false;
});
resHtml = "<center><b>";
_.forEach(lastMaps,function (map){
resHtml += convertMapName(map.map) + "; "
})
resHtml += "</b></center>";
renderFinish(lobby.maps, lobby.user1Info, lobby.user2Info);
break;
}
resHtml = resHtml + "</center>"
@@ -406,6 +616,7 @@ function changeIsNecronSelected(){
}
function joinDecider(actorName){
isObserver = false;
ws.send(JSON.stringify({
type: "joinDecider",
lobbyActorName: actorName
@@ -413,6 +624,7 @@ function joinDecider(actorName){
}
function observerDecider(actorName){
isObserver = true;
ws.send(JSON.stringify({
type: "observerDecider",
lobbyActorName: actorName