Custom lobby host update

Now, only the player who created the lobby can change the settings or start the game
(Update v0.6.6.3)

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 = "";

src/main.js

@@ -1,5 +1,5 @@
-const fx_version = '0.6.6.2'; // FX Client Version
+const fx_version = '0.6.6.3'; // FX Client Version
-const fx_update = 'Oct 15'; // FX Client Last Updated
+const fx_update = 'Oct 21'; // FX Client Last Updated
 
 import settingsManager from './settings.js';
 import { clanFilter, leaderboardFilter } from "./clanFilters.js";

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 {