Рабочий десайдер

This commit is contained in:
v.holodov
2023-05-04 23:58:43 +03:00
parent dc228d82be
commit 31ce4b7beb
23 changed files with 206 additions and 97 deletions
+83 -50
View File
@@ -3,6 +3,11 @@ var ws;
var userName = ""
var raceCount = $("#raceCount").html()
var isSolo = $("#isSolo").html() === 'true'
var isMuted = false;
var isDraftStarted = false;
window.onload = function() {
@@ -96,6 +101,15 @@ window.onload = function() {
}
});
$("#mute").click(function(event) {
if(isMuted){
isMuted = false;
$("#mute").html("🔊");
}else{
isMuted = true;
$("#mute").html("🔈");
}
});
$("#exit").click(function(event) {
event.preventDefault();
@@ -123,7 +137,6 @@ window.onload = function() {
$("#playerName").html(userName);
ws = new WebSocket($("body").data("ws-url"));
ws.onmessage = function(event) {
var message;
@@ -131,6 +144,7 @@ window.onload = function() {
switch (message.type) {
case "refreshLobby":
if(message.lobby.status === "SelectRace()" && (!isObserver)){
isDraftStarted = false;
renderRaces();
}else {
renderMaps(message.lobby.maps, message.lobby.status);
@@ -140,7 +154,7 @@ window.onload = function() {
case "switchToLobby":
console.log(message);
switchToLobby(message.lobby.maps, message.lobby.status);
renderPlayersAndStats(message.lobby);
if(!isSolo) renderPlayersAndStats(message.lobby);
break;
case "sendMessage":
console.log(message);
@@ -148,7 +162,7 @@ window.onload = function() {
break;
case "sendMapBanMessage":
console.log(message);
addBanMapMessageToChat(message.message);
handleMapBanEvent(message.message);
break;
case "lobbyError":
console.log(message);
@@ -295,7 +309,7 @@ function renderRaces() {
banned = "bannedRace";
selectedFourthRace = i;
}
resHtml += '<a href = "#" class="'+selected+' thirdRaceIcon" onclick="selectFourthRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
resHtml += '<a href = "#" class="'+selected+' fourthRaceIcon" onclick="selectFourthRace(this, ' +i+')"><img class="raceIcon" src="'+getRaceImageByNumber(i)+'"></a> ';
}
resHtml += "</center></div>";
}
@@ -392,7 +406,7 @@ function renderMaps(maps, lobbyStatus) {
banHtml = "<div class = 'banX'>&#x2715;</div>";
banClass = "bannedMap";
}
if(lobbyStatus === "NotStarted()"){
if(lobbyStatus === "NotStarted()" && !isSolo){
banClass = "bannedMap";
}
@@ -427,28 +441,30 @@ function renderFinish(maps, firstPlayerInfo, secondPlayerInfo) {
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)+"> ";
}
if(raceCount >= 4){
resHtml += "<img class=\"raceIcon\" src="+getRaceImageByNumber(firstPlayerInfo.selectedRaces.fourthRace)+"> ";
}
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 += "<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>"
@@ -566,32 +582,39 @@ function renderPlayersAndStats(lobby) {
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(!isDraftStarted){
isDraftStarted = true;
}
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)+"> ";
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()":
@@ -611,7 +634,13 @@ function addMessageToChat(message){
chatBox.scrollTop(40000);
}
function addBanMapMessageToChat(message){
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);
@@ -688,6 +717,10 @@ function kickSecondPlayer(){
}
function convertMapName (techMapName) {
var mapName = techMapName.replace("2p_", "").replaceAll("_", " ") + " (2)";
var mapPlayerSize = techMapName.charAt(0);
var mapName = techMapName.replace(mapPlayerSize + "p_", "").replaceAll("_", " ") +
" ("+mapPlayerSize+")";
return mapName.charAt(0).toUpperCase() + mapName.slice(1);
}