From 1db9b939506d3efdf5a7118ac8847f3982e24e90 Mon Sep 17 00:00:00 2001
From: Tyler Hanavan <TylerHanavan@gmail.com>
Date: Mon, 28 Jul 2025 15:46:34 -0400
Subject: [PATCH] Allow additional modals to close when clicking the Escape key
 (#1604)

## Description:

Allows ChatModal, EmojiTable, PlayerPanel and RadialMenu to accept the
CloseViewEvent, thereby enabling the modals/menus/tables to be closed by
clicking the Escape key.

As described in #1586, there are a number of modals that cannot be
closed by pressing Escape, such as ChatModal, EmojiTable, PlayerPanel
and RadialMenu, while other modals can already, such as the CTRL + Click
build menu.

## 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
- [x] I have read and accepted the CLA agreement (only required once).

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

slyty
---
 src/client/graphics/GameRenderer.ts       | 1 +
 src/client/graphics/layers/ChatModal.ts   | 9 +++++++++
 src/client/graphics/layers/EmojiTable.ts  | 7 ++++++-
 src/client/graphics/layers/PlayerPanel.ts | 6 +++++-
 src/client/graphics/layers/RadialMenu.ts  | 4 ++++
 5 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index 16d8e0285..52c75106e 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -183,6 +183,7 @@ export function createRenderer(
   }
   chatModal.g = game;
   chatModal.eventBus = eventBus;
+  chatModal.initEventBus();
 
   const multiTabModal = document.querySelector(
     "multi-tab-modal",
diff --git a/src/client/graphics/layers/ChatModal.ts b/src/client/graphics/layers/ChatModal.ts
index 6c0413f59..a8fe2e862 100644
--- a/src/client/graphics/layers/ChatModal.ts
+++ b/src/client/graphics/layers/ChatModal.ts
@@ -6,6 +6,7 @@ import { GameView, PlayerView } from "../../../core/game/GameView";
 
 import quickChatData from "../../../../resources/QuickChat.json";
 import { EventBus } from "../../../core/EventBus";
+import { CloseViewEvent } from "../../InputHandler";
 import { SendQuickChatEvent } from "../../Transport";
 import { translateText } from "../../Utils";
 
@@ -172,6 +173,14 @@ export class ChatModal extends LitElement {
     `;
   }
 
+  initEventBus() {
+    this.eventBus.on(CloseViewEvent, (e) => {
+      if (!this.hidden) {
+        this.close();
+      }
+    });
+  }
+
   private selectCategory(categoryId: string) {
     this.selectedCategory = categoryId;
     this.selectedPhraseText = null;
diff --git a/src/client/graphics/layers/EmojiTable.ts b/src/client/graphics/layers/EmojiTable.ts
index 0236d33fd..73a59a032 100644
--- a/src/client/graphics/layers/EmojiTable.ts
+++ b/src/client/graphics/layers/EmojiTable.ts
@@ -5,7 +5,7 @@ import { AllPlayers } from "../../../core/game/Game";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { TerraNulliusImpl } from "../../../core/game/TerraNulliusImpl";
 import { emojiTable, flattenedEmojiTable } from "../../../core/Util";
-import { ShowEmojiMenuEvent } from "../../InputHandler";
+import { CloseViewEvent, ShowEmojiMenuEvent } from "../../InputHandler";
 import { SendEmojiIntentEvent } from "../../Transport";
 import { TransformHandler } from "../TransformHandler";
 
@@ -49,6 +49,11 @@ export class EmojiTable extends LitElement {
         this.hideTable();
       });
     });
+    this.eventBus.on(CloseViewEvent, (e) => {
+      if (!this.hidden) {
+        this.hideTable();
+      }
+    });
   }
 
   private onEmojiClicked: (emoji: string) => void = () => {};
diff --git a/src/client/graphics/layers/PlayerPanel.ts b/src/client/graphics/layers/PlayerPanel.ts
index 50201fbf0..17da243f2 100644
--- a/src/client/graphics/layers/PlayerPanel.ts
+++ b/src/client/graphics/layers/PlayerPanel.ts
@@ -13,7 +13,7 @@ import { AllPlayers, PlayerActions } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { flattenedEmojiTable } from "../../../core/Util";
-import { MouseUpEvent } from "../../InputHandler";
+import { CloseViewEvent, MouseUpEvent } from "../../InputHandler";
 import {
   SendAllianceRequestIntentEvent,
   SendBreakAllianceIntentEvent,
@@ -167,6 +167,10 @@ export class PlayerPanel extends LitElement implements Layer {
   init() {
     this.eventBus.on(MouseUpEvent, (e: MouseEvent) => this.hide());
 
+    this.eventBus.on(CloseViewEvent, (e) => {
+      this.hide();
+    });
+
     this.ctModal = document.querySelector("chat-modal") as ChatModal;
   }
 
diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts
index b8e26af9f..652bff522 100644
--- a/src/client/graphics/layers/RadialMenu.ts
+++ b/src/client/graphics/layers/RadialMenu.ts
@@ -1,6 +1,7 @@
 import * as d3 from "d3";
 import backIcon from "../../../../resources/images/BackIconWhite.svg";
 import { EventBus, GameEvent } from "../../../core/EventBus";
+import { CloseViewEvent } from "../../InputHandler";
 import { Layer } from "./Layer";
 import {
   CenterButtonElement,
@@ -102,6 +103,9 @@ export class RadialMenu implements Layer {
   init() {
     this.createMenuElement();
     this.createTooltipElement();
+    this.eventBus.on(CloseViewEvent, (e) => {
+      this.hideRadialMenu();
+    });
   }
 
   private createMenuElement() {