Merge pull request #155 from Readixyee/game-starting-modal

showing modal when the game is loading

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 "./gameStartingModal";
 import { generateID } from "../core/Util";
 import { generateCryptoRandomUUID } from "./Utils";
 import { consolex } from "../core/Consolex";
@@ -163,6 +164,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");

src/client/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();
+  }
+}

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 "../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)) {

src/client/index.html

@@ -247,6 +247,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>