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>
This commit is contained in:
Tyler Hanavan
2025-08-02 04:36:03 -04:00
committed by GitHub
co-authored by Antoine
parent bcab4e600e
commit 15d0fd5b64
12 changed files with 137 additions and 6 deletions
+7
View File
@@ -45,6 +45,7 @@ export class TerritoryPatternsModal extends LitElement {
connectedCallback() {
super.connectedCallback();
window.addEventListener("keydown", this.handleKeyDown);
this.selectedPattern = this.userSettings.getSelectedPattern();
this.updateComplete.then(() => {
const containers = this.renderRoot.querySelectorAll(".preview-container");
@@ -59,6 +60,7 @@ export class TerritoryPatternsModal extends LitElement {
}
disconnectedCallback() {
window.removeEventListener("keydown", this.handleKeyDown);
super.disconnectedCallback();
}
@@ -69,6 +71,11 @@ export class TerritoryPatternsModal extends LitElement {
}
private handleKeyDown = (e: KeyboardEvent) => {
if (e.code === "Escape") {
e.preventDefault();
this.close();
}
const key = e.key.toLowerCase();
const nextSequence = [...this.keySequence, key].slice(-5);
this.keySequence = nextSequence;