Allow main menu modals to be closed by clicking escape (#1617)

## Description:



Allow the main menu modals to be closed by clicking the Escape key. The
manner by which this change achieves this is by adding a
connectedCallback to add a keydown EventListener, which closes the modal
on clicking Escape.

Relevant issue: #1586 

My earlier PR was only for the in-game modals, as they can access the
Event Bus and receive the CloseViewEvent.
https://github.com/openfrontio/OpenFrontIO/pull/1604

As mentioned, this PR differs in that it does not use the Event Bus
because these are not in-game modals. The main menu modals do not have
access to the event bus.

Affected modals for this PR.
- UserSettingModal.ts
- TerritoryPatternsModal.ts
- SingePlayerModal.ts
- NewsModal.ts
- LanguageModal.ts
- JoinPrivateLobbyModal.ts
- HostLobbyModal.ts
- HelpModal.ts
- FlatInput.ts








## 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

---------

Co-authored-by: Antoine <antoine.gannat@gmail.com>

src/client/graphics/GameRenderer.ts

@@ -173,7 +173,7 @@ export function createRenderer(
     console.error("player panel not found");
   }
   playerPanel.g = game;
-  playerPanel.eventBus = eventBus;
+  playerPanel.initEventBus(eventBus);
   playerPanel.emojiTable = emojiTable;
   playerPanel.uiState = uiState;
 
@@ -182,8 +182,7 @@ export function createRenderer(
     console.error("chat modal not found");
   }
   chatModal.g = game;
-  chatModal.eventBus = eventBus;
-  chatModal.initEventBus();
+  chatModal.initEventBus(eventBus);
 
   const multiTabModal = document.querySelector(
     "multi-tab-modal",

src/client/graphics/layers/ChatModal.ts

@@ -173,8 +173,9 @@ export class ChatModal extends LitElement {
     `;
   }
 
-  initEventBus() {
-    this.eventBus.on(CloseViewEvent, (e) => {
+  initEventBus(eventBus: EventBus) {
+    this.eventBus = eventBus;
+    eventBus.on(CloseViewEvent, (e) => {
       if (!this.hidden) {
         this.close();
       }

src/client/graphics/layers/PlayerPanel.ts

@@ -164,9 +164,17 @@ export class PlayerPanel extends LitElement implements Layer {
 
   private ctModal: ChatModal;
 
+  initEventBus(eventBus: EventBus) {
+    this.eventBus = eventBus;
+    eventBus.on(CloseViewEvent, (e) => {
+      if (!this.hidden) {
+        this.hide();
+      }
+    });
+  }
+
   init() {
     this.eventBus.on(MouseUpEvent, () => this.hide());
-
     this.eventBus.on(CloseViewEvent, (e) => {
       this.hide();
     });