From 15a895c724c368cf2ae0bff4e511c80e04e7edf8 Mon Sep 17 00:00:00 2001
From: falc <76709589+falcolnic@users.noreply.github.com>
Date: Wed, 11 Jun 2025 04:26:40 +0200
Subject: [PATCH] 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:
@qqkedsi
---
src/client/ClientGameRunner.ts | 42 +++++++++++++++++++---------------
src/client/HelpModal.ts | 16 +++++++++++++
2 files changed, 39 insertions(+), 19 deletions(-)
diff --git a/src/client/ClientGameRunner.ts b/src/client/ClientGameRunner.ts
index 1bde53319..401ea2653 100644
--- a/src/client/ClientGameRunner.ts
+++ b/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);
}
diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index 0f2aebe60..ec53514b9 100644
--- a/src/client/HelpModal.ts
+++ b/src/client/HelpModal.ts
@@ -140,6 +140,7 @@ export class HelpModal extends LitElement {
alt="Leaderboard"
title="Leaderboard"
class="default-image"
+ loading="lazy"
/>
@@ -159,6 +160,7 @@ export class HelpModal extends LitElement {
alt="Control panel"
title="Control panel"
class="default-image"
+ loading="lazy"
/>
@@ -189,12 +191,14 @@ export class HelpModal extends LitElement {
alt="Event panel"
title="Event panel"
class="default-image"
+ loading="lazy"
/>
@@ -253,6 +258,7 @@ export class HelpModal extends LitElement {
alt="Player info overlay"
title="Player info overlay"
class="default-image"
+ loading="lazy"
/>
@@ -275,12 +281,14 @@ export class HelpModal extends LitElement {
alt="Radial menu"
title="Radial menu"
class="default-image"
+ loading="lazy"
/>
@@ -295,6 +303,7 @@ export class HelpModal extends LitElement {
src="/images/InfoIcon.svg"
class="inline-block icon"
style="fill: white; background: transparent;"
+ loading="lazy"
/>
${translateText("help_modal.radial_info")}
@@ -331,6 +340,7 @@ export class HelpModal extends LitElement {
alt="Enemy info panel"
title="Enemy info panel"
class="info-panel-img"
+ loading="lazy"
/>
@@ -374,6 +384,7 @@ export class HelpModal extends LitElement {
alt="Ally info panel"
title="Ally info panel"
class="info-panel-img"
+ loading="lazy"
/>
@@ -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"
/>
@@ -499,6 +511,7 @@ export class HelpModal extends LitElement {
alt="Traitor"
title="Traitor"
class="player-icon-img w-full"
+ loading="lazy"
/>
@@ -515,6 +528,7 @@ export class HelpModal extends LitElement {
alt="Ally"
title="Ally"
class="player-icon-img w-full"
+ loading="lazy"
/>
@@ -533,6 +547,7 @@ export class HelpModal extends LitElement {
alt="Stopped trading"
title="Stopped trading"
class="player-icon-img w-full"
+ loading="lazy"
/>
@@ -549,6 +564,7 @@ export class HelpModal extends LitElement {
alt="Alliance Request"
title="Alliance Request"
class="player-icon-img w-full"
+ loading="lazy"
/>