Block UI actions while GameStartingModal is visible (#2587) (#2596)

## Description:
- Original intent was to fix the bug where you could click and start the
next lobby game through the “Game is Starting…” modal, and while
testing, i've found the issue affected all action buttons behind the
modal, not just the lobby join button.
- Added a full-screen overlay that captures pointer events whenever
`GameStartingModal` is visible, preventing any background UI actions
until the start flow completes.

- Screenshot: 
<img width="1918" height="908" alt="image"
src="https://github.com/user-attachments/assets/f6358cb4-1270-4e0b-9f2e-9e57b085ca03"
/>


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

Leivadev
This commit is contained in:
Luis Leiva
2025-12-10 13:22:07 -05:00
committed by GitHub
parent afe072f7d0
commit 121e45d5d2
+14
View File
@@ -8,6 +8,19 @@ export class GameStartingModal extends LitElement {
isVisible = false;
static styles = css`
.overlay {
display: none;
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
z-index: 9998;
}
.overlay.visible {
display: block;
}
.modal {
display: none;
position: fixed;
@@ -117,6 +130,7 @@ export class GameStartingModal extends LitElement {
render() {
return html`
<div class="overlay ${this.isVisible ? "visible" : ""}"></div>
<div class="modal ${this.isVisible ? "visible" : ""}">
<div class="copyright">© OpenFront and Contributors</div>
<a