lazy loading and current data var (#988)

## Description:
Improved loading perfomance a little bit
## 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 understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:
![Screenshot from 2025-06-01
01-58-58](https://github.com/user-attachments/assets/6d74edc8-4de3-4b1f-ab9e-a61afb449a08)

@qqkedsi

src/client/ClientGameRunner.ts

@@ -268,8 +268,10 @@ export class ClientGameRunner {
     });
     const worker = this.worker;
     const keepWorkerAlive = () => {
-      worker.sendHeartbeat();
-      requestAnimationFrame(keepWorkerAlive);
+      if (this.isActive) {
+        worker.sendHeartbeat();
+        requestAnimationFrame(keepWorkerAlive);
+      }
     };
     requestAnimationFrame(keepWorkerAlive);
 
@@ -329,8 +331,10 @@ export class ClientGameRunner {
   }
 
   public stop(saveFullGame: boolean = false) {
-    this.worker.cleanup();
+    if (!this.isActive) return;
+
     this.isActive = false;
+    this.worker.cleanup();
     this.transport.leaveGame(saveFullGame);
     if (this.connectionCheckInterval) {
       clearInterval(this.connectionCheckInterval);
@@ -516,12 +520,13 @@ export class ClientGameRunner {
     if (this.transport.isLocal) {
       return;
     }
-    const timeSinceLastMessage = Date.now() - this.lastMessageTime;
+    const now = Date.now();
+    const timeSinceLastMessage = now - this.lastMessageTime;
     if (timeSinceLastMessage > 5000) {
       console.log(
         `No message from server for ${timeSinceLastMessage} ms, reconnecting`,
       );
-      this.lastMessageTime = Date.now();
+      this.lastMessageTime = now;
       this.transport.reconnect();
     }
   }
@@ -554,26 +559,25 @@ function showErrorModal(
   const button = document.createElement("button");
   button.textContent = translateText("error_modal.copy_clipboard");
   button.className = "copy-btn";
-  button.addEventListener("click", () => {
-    navigator.clipboard
-      .writeText(content)
-      .then(() => (button.textContent = translateText("error_modal.copied")))
-      .catch(
-        () => (button.textContent = translateText("error_modal.failed_copy")),
-      );
-  });
-
-  const closeButton = document.createElement("button");
-  closeButton.textContent = "X";
-  closeButton.className = "close-btn";
-  closeButton.addEventListener("click", () => {
-    modal.style.display = "none";
+  button.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      button.textContent = translateText("error_modal.copied");
+    } catch {
+      button.textContent = translateText("error_modal.failed_copy");
+    }
   });
 
   // Add to modal
   modal.appendChild(pre);
   modal.appendChild(button);
   if (closable) {
+    const closeButton = document.createElement("button");
+    closeButton.textContent = "X";
+    closeButton.className = "close-btn";
+    closeButton.addEventListener("click", () => {
+      modal.remove();
+    });
     modal.appendChild(closeButton);
   }
 

src/client/HelpModal.ts

@@ -140,6 +140,7 @@ export class HelpModal extends LitElement {
               alt="Leaderboard"
               title="Leaderboard"
               class="default-image"
+              loading="lazy"
             />
           </div>
           <div>
@@ -159,6 +160,7 @@ export class HelpModal extends LitElement {
               alt="Control panel"
               title="Control panel"
               class="default-image"
+              loading="lazy"
             />
           </div>
           <div>
@@ -189,12 +191,14 @@ export class HelpModal extends LitElement {
                 alt="Event panel"
                 title="Event panel"
                 class="default-image"
+                loading="lazy"
               />
               <img
                 src="/images/helpModal/eventsPanelAttack.webp"
                 alt="Event panel"
                 title="Event panel"
                 class="default-image"
+                loading="lazy"
               />
             </div>
           </div>
@@ -226,6 +230,7 @@ export class HelpModal extends LitElement {
               alt="Options"
               title="Options"
               class="default-image"
+              loading="lazy"
             />
           </div>
           <div>
@@ -253,6 +258,7 @@ export class HelpModal extends LitElement {
               alt="Player info overlay"
               title="Player info overlay"
               class="default-image"
+              loading="lazy"
             />
           </div>
           <div>
@@ -275,12 +281,14 @@ export class HelpModal extends LitElement {
               alt="Radial menu"
               title="Radial menu"
               class="default-image"
+              loading="lazy"
             />
             <img
               src="/images/helpModal/radialMenuAlly.webp"
               alt="Radial menu ally"
               title="Radial menu ally"
               class="default-image"
+              loading="lazy"
             />
           </div>
           <div>
@@ -295,6 +303,7 @@ export class HelpModal extends LitElement {
                   src="/images/InfoIcon.svg"
                   class="inline-block icon"
                   style="fill: white; background: transparent;"
+                  loading="lazy"
                 />
                 <span>${translateText("help_modal.radial_info")}</span>
               </li>
@@ -331,6 +340,7 @@ export class HelpModal extends LitElement {
                 alt="Enemy info panel"
                 title="Enemy info panel"
                 class="info-panel-img"
+                loading="lazy"
               />
             </div>
             <div class="pt-4">
@@ -374,6 +384,7 @@ export class HelpModal extends LitElement {
                 alt="Ally info panel"
                 title="Ally info panel"
                 class="info-panel-img"
+                loading="lazy"
               />
             </div>
             <div class="pt-4">
@@ -483,6 +494,7 @@ export class HelpModal extends LitElement {
                 alt="Number 1 player"
                 title="Number 1 player"
                 class="player-icon-img w-full"
+                loading="lazy"
               />
             </div>
 
@@ -499,6 +511,7 @@ export class HelpModal extends LitElement {
                 alt="Traitor"
                 title="Traitor"
                 class="player-icon-img w-full"
+                loading="lazy"
               />
             </div>
 
@@ -515,6 +528,7 @@ export class HelpModal extends LitElement {
                 alt="Ally"
                 title="Ally"
                 class="player-icon-img w-full"
+                loading="lazy"
               />
             </div>
           </div>
@@ -533,6 +547,7 @@ export class HelpModal extends LitElement {
                 alt="Stopped trading"
                 title="Stopped trading"
                 class="player-icon-img w-full"
+                loading="lazy"
               />
             </div>
 
@@ -549,6 +564,7 @@ export class HelpModal extends LitElement {
                 alt="Alliance Request"
                 title="Alliance Request"
                 class="player-icon-img w-full"
+                loading="lazy"
               />
             </div>
           </div>