From 0dc520b1c8dfb41330056cf372b4416e8254bdc7 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Fri, 6 Mar 2026 05:39:22 +0100
Subject: [PATCH] =?UTF-8?q?Add=20confirmation=20dialog=20before=20closing?=
 =?UTF-8?q?=20host=20lobby=20modal=20=F0=9F=94=A7=20(#3364)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Show a confirm prompt when the user tries to close the host lobby via
click-outside or Escape key, preventing accidental lobby exits. Happened
to many people and also DougDoug...

Does not show the prompt when the user clicks the arrow button because
it's probably intentional.

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

FloPinguin
---
 resources/lang/en.json             |  3 ++-
 src/client/HostLobbyModal.ts       |  4 ++++
 src/client/Navigation.ts           |  7 +++++++
 src/client/components/BaseModal.ts | 17 +++++++++++++++++
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index e80e2f6da..7d2c19908 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -430,7 +430,8 @@
     "teams_Humans Vs Nations": "Humans vs Nations",
     "starting_gold": "Starting gold",
     "crowded": "Crowded modifier",
-    "hard_nations": "Hard Nations"
+    "hard_nations": "Hard Nations",
+    "leave_confirmation": "Are you sure you want to leave the lobby?"
   },
   "team_colors": {
     "red": "Red",
diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index 1851b4e56..f82ad5b8e 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -406,6 +406,10 @@ export class HostLobbyModal extends BaseModal {
     );
   }
 
+  public confirmBeforeClose(): boolean {
+    return confirm(translateText("host_modal.leave_confirmation"));
+  }
+
   protected onClose(): void {
     console.log("Closing host lobby modal");
     this.stopLobbyUpdates();
diff --git a/src/client/Navigation.ts b/src/client/Navigation.ts
index 4eba4e667..95f720092 100644
--- a/src/client/Navigation.ts
+++ b/src/client/Navigation.ts
@@ -106,6 +106,13 @@ export function initNavigation() {
             ) as any;
 
             if (openModal && typeof openModal.close === "function") {
+              // Check confirmation guard before closing
+              if (
+                typeof openModal.confirmBeforeClose === "function" &&
+                !openModal.confirmBeforeClose()
+              ) {
+                return;
+              }
               // Call leaveLobby or closeAndLeave first if it exists (for lobby modals)
               if (typeof openModal.leaveLobby === "function") {
                 openModal.leaveLobby();
diff --git a/src/client/components/BaseModal.ts b/src/client/components/BaseModal.ts
index 80e40d900..8efc8e258 100644
--- a/src/client/components/BaseModal.ts
+++ b/src/client/components/BaseModal.ts
@@ -39,6 +39,11 @@ export abstract class BaseModal extends LitElement {
     if (this.modalEl) {
       this.modalEl.onClose = () => {
         if (this.isModalOpen) {
+          if (!this.confirmBeforeClose()) {
+            // Re-open the underlying o-modal since it already closed itself
+            this.modalEl?.open();
+            return;
+          }
           this.close();
         }
       };
@@ -57,6 +62,9 @@ export abstract class BaseModal extends LitElement {
   private handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === "Escape" && this.isModalOpen) {
       e.preventDefault();
+      if (!this.confirmBeforeClose()) {
+        return;
+      }
       this.close();
     }
   };
@@ -93,6 +101,15 @@ export abstract class BaseModal extends LitElement {
     // Default implementation does nothing
   }
 
+  /**
+   * Guard called before closing via Escape key or click-outside.
+   * Override in subclasses to show a confirmation dialog.
+   * Return false to prevent the modal from closing.
+   */
+  public confirmBeforeClose(): boolean {
+    return true;
+  }
+
   /**
    * Open the modal. Handles both inline and modal element modes.
    * Subclasses can override onOpen() for custom behavior.