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

@@ -183,6 +183,7 @@ export function createRenderer(
   }
   chatModal.g = game;
   chatModal.eventBus = eventBus;
+  chatModal.initEventBus();
 
   const multiTabModal = document.querySelector(
     "multi-tab-modal",

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;

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 = () => {};

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;
   }
 

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() {