From 48ae8cad331372d1c86254657f4029c158c8b4ef Mon Sep 17 00:00:00 2001
From: Readixyee <leo.radecker@gmx.de>
Date: Thu, 6 Mar 2025 17:34:12 +0100
Subject: [PATCH 1/2] showing modal when the game is loading

---
 src/client/Main.ts                            |   9 ++
 src/client/graphics/GameRenderer.ts           |   8 ++
 .../graphics/layers/gameStartingModal.ts      | 106 ++++++++++++++++++
 src/client/index.html                         |   1 +
 4 files changed, 124 insertions(+)
 create mode 100644 src/client/graphics/layers/gameStartingModal.ts

diff --git a/src/client/Main.ts b/src/client/Main.ts
index bde02549a..1ce87a7dd 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -7,6 +7,7 @@ import { UsernameInput } from "./UsernameInput";
 import { SinglePlayerModal } from "./SinglePlayerModal";
 import { HostLobbyModal as HostPrivateLobbyModal } from "./HostLobbyModal";
 import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal";
+import { GameStartingModal } from "./graphics/layers/gameStartingModal";
 import { generateID } from "../core/Util";
 import { generateCryptoRandomUUID } from "./Utils";
 import { consolex } from "../core/Consolex";
@@ -160,6 +161,14 @@ class Client {
       () => {
         this.joinModal.close();
         this.publicLobby.stop();
+
+        // show when the game loads
+        const startingModal = document.querySelector(
+          "game-starting-modal",
+        ) as GameStartingModal;
+        startingModal instanceof GameStartingModal;
+        startingModal.show();
+
         if (gameType != GameType.Singleplayer) {
           window.history.pushState({}, "", `/join/${lobby.gameID}`);
           sessionStorage.setItem("inLobby", "true");
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index e9263f095..388cd43bd 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -25,6 +25,7 @@ import { SpawnTimer } from "./layers/SpawnTimer";
 import { OptionsMenu } from "./layers/OptionsMenu";
 import { TopBar } from "./layers/TopBar";
 import { PlayerPanel } from "./layers/PlayerPanel";
+import { GameStartingModal } from "./layers/gameStartingModal";
 
 export function createRenderer(
   canvas: HTMLCanvasElement,
@@ -36,6 +37,13 @@ export function createRenderer(
 
   const uiState = { attackRatio: 20 };
 
+  //hide when the game renders
+  const startingModal = document.querySelector(
+    "game-starting-modal",
+  ) as GameStartingModal;
+  startingModal instanceof GameStartingModal;
+  startingModal.hide();
+
   // TODO maybe append this to dcoument instead of querying for them?
   const emojiTable = document.querySelector("emoji-table") as EmojiTable;
   if (!emojiTable || !(emojiTable instanceof EmojiTable)) {
diff --git a/src/client/graphics/layers/gameStartingModal.ts b/src/client/graphics/layers/gameStartingModal.ts
new file mode 100644
index 000000000..4b7dae464
--- /dev/null
+++ b/src/client/graphics/layers/gameStartingModal.ts
@@ -0,0 +1,106 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("game-starting-modal")
+export class GameStartingModal extends LitElement {
+  @state()
+  isVisible = false;
+
+  static styles = css`
+    .modal {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(30, 30, 30, 0.7);
+      padding: 25px;
+      border-radius: 10px;
+      z-index: 9999;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(5px);
+      color: white;
+      width: 300px;
+      text-align: center;
+      transition:
+        opacity 0.3s ease-in-out,
+        visibility 0.3s ease-in-out;
+    }
+
+    .modal.visible {
+      display: block;
+      animation: fadeIn 0.3s ease-out;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translate(-50%, -48%);
+      }
+      to {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .modal h2 {
+      margin-bottom: 15px;
+      font-size: 22px;
+      color: white;
+    }
+
+    .modal p {
+      margin-bottom: 20px;
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 10px;
+      border-radius: 5px;
+    }
+
+    .button-container {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+    }
+
+    .modal button {
+      padding: 12px;
+      font-size: 16px;
+      cursor: pointer;
+      background: rgba(255, 100, 100, 0.7);
+      color: white;
+      border: none;
+      border-radius: 5px;
+      transition:
+        background-color 0.2s ease,
+        transform 0.1s ease;
+    }
+
+    .modal button:hover {
+      background: rgba(255, 100, 100, 0.9);
+      transform: translateY(-1px);
+    }
+
+    .modal button:active {
+      transform: translateY(1px);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="modal ${this.isVisible ? "visible" : ""}">
+        <h2>Game is Starting...</h2>
+        <p>Preparing for the lobby to start. Please wait.</p>
+      </div>
+    `;
+  }
+
+  show() {
+    this.isVisible = true;
+    this.requestUpdate();
+  }
+
+  hide() {
+    this.isVisible = false;
+    this.requestUpdate();
+  }
+}
diff --git a/src/client/index.html b/src/client/index.html
index 8f6a05b2b..98402d90c 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -246,6 +246,7 @@
     <leader-board></leader-board>
     <build-menu></build-menu>
     <win-modal></win-modal>
+    <game-starting-modal></game-starting-modal>
     <top-bar></top-bar>
     <player-panel></player-panel>
     <help-modal></help-modal>

From cfc9676acbee74ab263bcbc14440e6fbbb583684 Mon Sep 17 00:00:00 2001
From: Readixyee <leo.radecker@gmx.de>
Date: Thu, 6 Mar 2025 18:24:36 +0100
Subject: [PATCH 2/2] location change

---
 src/client/Main.ts                                    | 2 +-
 src/client/{graphics/layers => }/gameStartingModal.ts | 0
 src/client/graphics/GameRenderer.ts                   | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/client/{graphics/layers => }/gameStartingModal.ts (100%)

diff --git a/src/client/Main.ts b/src/client/Main.ts
index 1ce87a7dd..cddb95288 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -7,7 +7,7 @@ import { UsernameInput } from "./UsernameInput";
 import { SinglePlayerModal } from "./SinglePlayerModal";
 import { HostLobbyModal as HostPrivateLobbyModal } from "./HostLobbyModal";
 import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal";
-import { GameStartingModal } from "./graphics/layers/gameStartingModal";
+import { GameStartingModal } from "./gameStartingModal";
 import { generateID } from "../core/Util";
 import { generateCryptoRandomUUID } from "./Utils";
 import { consolex } from "../core/Consolex";
diff --git a/src/client/graphics/layers/gameStartingModal.ts b/src/client/gameStartingModal.ts
similarity index 100%
rename from src/client/graphics/layers/gameStartingModal.ts
rename to src/client/gameStartingModal.ts
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index 388cd43bd..fd4090314 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -25,7 +25,7 @@ import { SpawnTimer } from "./layers/SpawnTimer";
 import { OptionsMenu } from "./layers/OptionsMenu";
 import { TopBar } from "./layers/TopBar";
 import { PlayerPanel } from "./layers/PlayerPanel";
-import { GameStartingModal } from "./layers/gameStartingModal";
+import { GameStartingModal } from "../gameStartingModal";
 
 export function createRenderer(
   canvas: HTMLCanvasElement,