diff --git a/src/customLobby.js b/src/customLobby.js index a59f5a7..0ccf0f5 100644 --- a/src/customLobby.js +++ b/src/customLobby.js @@ -79,7 +79,7 @@ startButton.textContent = "Start game"; leaveButton.textContent = "Leave lobby"; startButton.addEventListener("click", startGame); leaveButton.addEventListener("click", () => leaveLobby()); -footer.append(leaveButton, startButton); +footer.append(startButton, leaveButton); windowElement.append(header, main, footer); @@ -134,13 +134,15 @@ function isCustomMessage(raw) { WindowManager.openWindow("customLobby"); header.textContent = "Custom Lobby " + data.code; currentCode = data.code; + startButton.disabled = !data.isHost; + optionsContainer.className = data.isHost ? "" : "disabled"; gameModeSelectMenu.value = data.options.mode.toString(); mapSelectMenu.value = data.options.map.toString(); displayPlayers(data.players); } else if (type === "addPlayer") addPlayer(data); else if (type === "removePlayer") { const index = data; - playerElements[index].remove(); + playerElements[index].element.remove(); playerElements.splice(index, 1); updatePlayerCount(); } else if (type === "options") { @@ -148,21 +150,31 @@ function isCustomMessage(raw) { const [option, value] = data; if (option === "mode") gameModeSelectMenu.value = value.toString(); else if (option === "map") mapSelectMenu.value = value.toString(); + } else if (type === "setHost") { + const index = data; + playerElements[index].hostBadge.className = ""; + } else if (type === "host") { + startButton.disabled = false; + optionsContainer.className = ""; } return true; } -/** @type {HTMLDivElement[]} */ +/** @type {{ element: HTMLDivElement, hostBadge: HTMLSpanElement }[]} */ let playerElements = []; -/** @param {{ name: string }} player */ +/** @param {{ name: string, isHost: boolean }} player */ function addPlayer(player) { const div = document.createElement("div"); div.className = "lobby-player"; div.textContent = player.name; + const badge = document.createElement("span"); + badge.textContent = "Host"; + badge.className = player.isHost ? "" : "d-none"; + div.append(badge); playerList.append(div); - playerElements.push(div); + playerElements.push({ element: div, hostBadge: badge }); updatePlayerCount(); } -/** @param {{ name: string }[]} players */ +/** @param {{ name: string, isHost: boolean }[]} players */ function displayPlayers(players) { playerElements = []; playerList.innerHTML = ""; diff --git a/src/main.js b/src/main.js index 72250bd..9526ceb 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,5 @@ -const fx_version = '0.6.6.2'; // FX Client Version -const fx_update = 'Oct 15'; // FX Client Last Updated +const fx_version = '0.6.6.3'; // FX Client Version +const fx_update = 'Oct 21'; // FX Client Last Updated import settingsManager from './settings.js'; import { clanFilter, leaderboardFilter } from "./clanFilters.js"; diff --git a/static/main.css b/static/main.css index d55c7fc..44ce37c 100644 --- a/static/main.css +++ b/static/main.css @@ -57,6 +57,23 @@ .lobby-player { margin: 5px; width: 15rem; + display: flex; + align-items: center; + justify-content: center; +} + +.lobby-player span { + margin: 0px 5px; + font-size: .7em; + border-style: solid; + border-width: 1px; + padding: 3px 5px; + border-color: #ffffff7d; + border-radius: 5px; +} + +.d-none { + display: none; } .text-align-center { @@ -81,6 +98,11 @@ hr { margin : 5px; } +.window :disabled, .window .disabled { + pointer-events: none; + opacity: 0.65; +} + .window.settings button, .window.settings input, .window.settings select {