Add lobby join menu; fix windows not closing properly when clicking on an element other than the canvas

(Update v0.6.6.1)

src/customLobby.js

@@ -14,6 +14,10 @@ const textDecoder = new TextDecoder();
     botCount: 512
 }*/
 
+WindowManager.add({
+    name: "lobbyJoinMenu",
+    element: document.getElementById("customLobbyJoinMenu")
+})
 const windowElement = WindowManager.create({
     name: "customLobby",
     classes: "scrollable selectable flex-column text-align-center",
@@ -90,14 +94,23 @@ function setSelectMenuOptions(options, element) {
 }
 
 function showJoinPrompt() {
-    const code = prompt("Enter a lobby code or leave blank to create a new lobby");
+    WindowManager.openWindow("lobbyJoinMenu");
-    if (code === null) return;
+}
-    currentCode = code;
+document.getElementById("lobbyCode").addEventListener("input", ({ target: input }) => {
-
+    if (input.value.length !== 5) return;
-    //WindowManager.openWindow("customLobby");
+    currentCode = input.value;
+    input.value = "";
+    WindowManager.closeWindow("lobbyJoinMenu");
     isActive = true;
     joinLobby();
-}
+});
+document.getElementById("createLobbyButton").addEventListener("click", () => {
+    currentCode = "";
+    WindowManager.closeWindow("lobbyJoinMenu");
+    isActive = true;
+    joinLobby();
+});
+
 function sendMessage(type, data) {
     const message = data !== undefined ? { t: type, d: data } : { t: type }
     const originalArray = textEncoder.encode(JSON.stringify(message));
@@ -120,6 +133,7 @@ function isCustomMessage(raw) {
     if (type === "lobby") {
         WindowManager.openWindow("customLobby");
         header.textContent = "Custom Lobby " + data.code;
+        currentCode = data.code;
         gameModeSelectMenu.value = data.options.mode.toString();
         mapSelectMenu.value = data.options.map.toString();
         displayPlayers(data.players);

src/main.js

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

src/windowManager.js

@@ -30,7 +30,10 @@ function closeAll() {
         if (windowObj.closable !== false) closeWindow(windowObj.name);
     });
 };
-document.getElementById("canvasA").addEventListener("mousedown", closeAll);
+document.addEventListener("mousedown", (e) => {
+    // when clicking outside a window
+    if (!container.contains(e.target)) closeAll();
+}, { passive: true, capture: true })
 document.getElementById("canvasA").addEventListener("touchstart", closeAll, { passive: true });
 document.addEventListener("keydown", event => { if (event.key === "Escape") closeAll(); });
 

static/index.html

@@ -70,6 +70,11 @@
             <button onclick="__fx.settingsManager.exportToFile()">Export</button>
         </footer>
     </div>
+    <div class="window flex-column" id="customLobbyJoinMenu" style="display: none">
+      <input type="text" id="lobbyCode" placeholder="Enter lobby code">
+      or
+      <button id="createLobbyButton">Create new lobby</button>
+    </div>
     <div class="window scrollable selectable" id="playerlist" style="display: none;">
         <h1>Player List</h1>
         <table><tbody id="playerlist_content"></tbody></table>

static/main.css

@@ -43,6 +43,10 @@
 	flex-direction: column;
 }
 
+#customLobbyJoinMenu {
+	align-items: center;
+}
+
 .customlobby-main {
 	display: flex;
     justify-content: space-evenly;