Open custom lobbies to the public

resources/lang/en.json

@@ -5,6 +5,12 @@
     "svg": "uk_us_flag",
     "lang_code": "en"
   },
+  "units": {
+    "second_short": "s",
+    "minute_short": "m",
+    "minute": "min",
+    "million_short": "M"
+  },
   "common": {
     "not_logged_in": "Not logged in",
     "close": "Close",
@@ -527,7 +533,7 @@
     "error": "Error"
   },
   "private_lobby": {
-    "title": "Join Private Lobby",
+    "title": "Join Custom Lobby",
     "enter_id": "Enter Lobby ID",
     "join_lobby": "Join Lobby",
     "not_found": "Lobby not found. Please check the ID and try again.",
@@ -573,7 +579,7 @@
     "tag_invalid_chars": "Clan tag can only contain letters and numbers."
   },
   "host_modal": {
-    "title": "Create Private Lobby",
+    "title": "Create Custom Lobby",
     "mode": "Mode",
     "team_count": "Number of Teams",
     "options_title": "Options",
@@ -616,7 +622,12 @@
     "starting_gold": "Starting Gold (Millions)",
     "starting_gold_placeholder": "5",
     "host_cheats": "Host Cheats",
-    "leave_confirmation": "Are you sure you want to leave the lobby?"
+    "leave_confirmation": "Are you sure you want to leave the lobby?",
+    "open_to_public_title": "Open to Public",
+    "open_to_public_desc": "Allow anyone to find and join this lobby from the main menu.",
+    "open_to_public_active": "Open to Public",
+    "open_button": "Open to Public",
+    "close_to_public_button": "Close to Public"
   },
   "team_colors": {
     "red": "Red",
@@ -644,8 +655,17 @@
   },
   "game_mode": {
     "ffa": "Free for All",
+    "team": "Teams",
     "teams": "Teams"
   },
+  "join_lobby": {
+    "open_custom_section_title": "Open Custom Lobbies",
+    "no_open_custom_lobbies": "No open custom lobbies at the moment.",
+    "join_button": "Join",
+    "expand": "Show details",
+    "collapse": "Hide details",
+    "no_custom_options": "Default settings"
+  },
   "mode_selector": {
     "teams_title": "Teams",
     "teams_count": "{teamCount} teams",

src/client/GameModeSelector.ts

@@ -81,6 +81,13 @@ export class GameModeSelector extends LitElement {
     );
     this.requestUpdate();
 
+    const joinModal = document.querySelector(
+      "join-lobby-modal",
+    ) as JoinLobbyModal | null;
+    if (joinModal) {
+      joinModal.openLobbies = lobbies.openLobbies ?? [];
+    }
+
     const allGames = Object.values(lobbies.games ?? {}).flat();
     for (const game of allGames) {
       const mapType = game.gameConfig?.gameMap as GameMapType;

src/client/HostLobbyModal.ts

@@ -86,6 +86,7 @@ export class HostLobbyModal extends BaseModal {
   @state() private hostCheatStartingGold: boolean = false;
   @state() private hostCheatStartingGoldValue: number | undefined = undefined;
   @state() private lobbyCreatorClientID: string = "";
+  @state() private openToPublicType: "ffa" | "team" | "special" | null = null;
 
   @property({ attribute: false }) eventBus: EventBus | null = null;
   // Timers for debouncing slider changes
@@ -104,6 +105,8 @@ export class HostLobbyModal extends BaseModal {
     if (lobby.clients) {
       this.clients = lobby.clients;
     }
+    this.openToPublicType =
+      (lobby.openCustomType as "ffa" | "team" | "special" | null) ?? null;
   };
 
   private getRandomString(): string {
@@ -398,6 +401,8 @@ export class HostLobbyModal extends BaseModal {
             .nationCount=${this.nations}
             .onKickPlayer=${(clientID: string) => this.kickPlayer(clientID)}
           ></lobby-player-view>
+
+          ${this.renderOpenToPublicSection()}
         </div>
 
         <!-- Player List / footer -->
@@ -417,6 +422,71 @@ export class HostLobbyModal extends BaseModal {
     `;
   }
 
+  private renderOpenToPublicSection() {
+    return html`
+      <div class="mt-10 pt-6 border-t border-white/10">
+        <div class="flex flex-col gap-3">
+          <div>
+            <h3 class="text-sm font-bold text-white uppercase tracking-widest">
+              ${translateText("host_modal.open_to_public_title")}
+            </h3>
+            <p class="text-xs text-white/50 mt-1">
+              ${translateText("host_modal.open_to_public_desc")}
+            </p>
+          </div>
+
+          ${this.openToPublicType !== null
+            ? html`
+                <div
+                  class="flex items-center justify-between gap-3 px-4 py-3 rounded-xl border border-green-500/30 bg-green-500/10"
+                >
+                  <span
+                    class="text-sm font-bold text-green-400 uppercase tracking-widest"
+                  >
+                    ${translateText("host_modal.open_to_public_active")}
+                  </span>
+                  <button
+                    class="px-4 py-2 text-xs font-bold uppercase tracking-widest text-white bg-white/10 hover:bg-white/20 rounded-lg transition-all"
+                    @click=${this.closeToPublic}
+                  >
+                    ${translateText("host_modal.close_to_public_button")}
+                  </button>
+                </div>
+              `
+            : html`
+                <button
+                  class="w-full py-3 text-sm font-bold uppercase tracking-widest text-white bg-blue-600 hover:bg-blue-500 rounded-xl transition-all"
+                  @click=${this.openToPublic}
+                >
+                  ${translateText("host_modal.open_button")}
+                </button>
+              `}
+        </div>
+      </div>
+    `;
+  }
+
+  private openToPublic() {
+    const publicGameType = this.gameMode === GameMode.Team ? "team" : "ffa";
+    this.dispatchEvent(
+      new CustomEvent("open-to-public", {
+        detail: { publicGameType },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private closeToPublic() {
+    this.dispatchEvent(
+      new CustomEvent("open-to-public", {
+        detail: { publicGameType: null },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
   protected onOpen(): void {
     this.startLobbyUpdates();
     this.lobbyId = generateID();
@@ -537,6 +607,7 @@ export class HostLobbyModal extends BaseModal {
     this.hostCheatGoldMultiplierValue = undefined;
     this.hostCheatStartingGold = false;
     this.hostCheatStartingGoldValue = undefined;
+    this.openToPublicType = null;
 
     this.leaveLobbyOnClose = true;
   }
@@ -932,6 +1003,7 @@ export class HostLobbyModal extends BaseModal {
         detail: {
           config: {
             gameMap: this.selectedMap,
+            useRandomMap: this.useRandomMap,
             gameMapSize: this.compactMap
               ? GameMapSize.Compact
               : GameMapSize.Normal,