From dc1f79d090ae42f851dee61b839b16ea3dcc346b Mon Sep 17 00:00:00 2001
From: Antoine <antoine.gannat@gmail.com>
Date: Tue, 29 Jul 2025 22:24:52 +0200
Subject: [PATCH] Fix all strict errors in /client (#1489)

## Description:

Second PR to fix issues in order to enable strict mode.

## Specifics

1. Most important change: Turned off errors for Class variables not
initialized in constructor. I've noticed that pretty much all Classes in
the project have at least one occurence of that issue. And fixing it
properly would require a large refactor across the whole project. So
disabling the rule seems like a good solution in this case.

#1075

## 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 have read and accepted the CLA aggreement (only required once).

## Please put your Discord username so you can be contacted if a bug or
regression is found:

azlod
---
 src/client/HostLobbyModal.ts                  |  8 +++--
 src/client/Main.ts                            | 15 ++++++++--
 src/client/SinglePlayerModal.ts               |  8 +++--
 src/client/graphics/layers/BuildMenu.ts       |  2 +-
 src/client/graphics/layers/ChatDisplay.ts     |  4 ---
 src/client/graphics/layers/ControlPanel.ts    |  2 +-
 src/client/graphics/layers/EmojiTable.ts      |  4 +--
 src/client/graphics/layers/EventsDisplay.ts   | 24 +++++++--------
 src/client/graphics/layers/HeadsUpMessage.ts  |  2 +-
 src/client/graphics/layers/Layer.ts           | 10 +++----
 src/client/graphics/layers/OptionsMenu.ts     |  4 +--
 .../graphics/layers/PlayerInfoOverlay.ts      |  2 +-
 src/client/graphics/layers/PlayerPanel.ts     | 30 +++++++++++--------
 src/client/graphics/layers/TeamStats.ts       |  6 ++--
 tsconfig.json                                 |  3 +-
 15 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index a83e1e6c7..58bfd6aba 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -154,7 +154,9 @@ export class HostLobbyModal extends LitElement {
                     <div class="flex flex-row flex-wrap justify-center gap-4">
                       ${maps.map((mapValue) => {
                         const mapKey = Object.keys(GameMapType).find(
-                          (key) => GameMapType[key] === mapValue,
+                          (key) =>
+                            GameMapType[key as keyof typeof GameMapType] ===
+                            mapValue,
                         );
                         return html`
                           <div
@@ -214,7 +216,7 @@ export class HostLobbyModal extends LitElement {
                       ></difficulty-display>
                       <p class="option-card-title">
                         ${translateText(
-                          `difficulty.${DifficultyDescription[key]}`,
+                          `difficulty.${DifficultyDescription[key as keyof typeof DifficultyDescription]}`,
                         )}
                       </p>
                     </div>
@@ -589,7 +591,7 @@ export class HostLobbyModal extends LitElement {
 
     await this.putGameConfig();
     console.log(
-      `Starting private game with map: ${GameMapType[this.selectedMap]} ${this.useRandomMap ? " (Randomly selected)" : ""}`,
+      `Starting private game with map: ${GameMapType[this.selectedMap as keyof typeof GameMapType]} ${this.useRandomMap ? " (Randomly selected)" : ""}`,
     );
     this.close();
     const config = await getServerConfigFromClient();
diff --git a/src/client/Main.ts b/src/client/Main.ts
index 239f6184d..640ae8d93 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -58,6 +58,11 @@ declare global {
       spaNewPage: (url: string) => void;
     };
   }
+
+  // Extend the global interfaces to include your custom events
+  interface DocumentEventMap {
+    "join-lobby": CustomEvent<JoinLobbyEvent>;
+  }
 }
 
 export interface JoinLobbyEvent {
@@ -383,14 +388,18 @@ class Client {
     window.addEventListener("popstate", onHashUpdate);
     window.addEventListener("hashchange", onHashUpdate);
 
-    function updateSliderProgress(slider) {
+    function updateSliderProgress(slider: HTMLInputElement) {
       const percent =
-        ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
+        ((Number(slider.value) - Number(slider.min)) /
+          (Number(slider.max) - Number(slider.min))) *
+        100;
       slider.style.setProperty("--progress", `${percent}%`);
     }
 
     document
-      .querySelectorAll("#bots-count, #private-lobby-bots-count")
+      .querySelectorAll<HTMLInputElement>(
+        "#bots-count, #private-lobby-bots-count",
+      )
       .forEach((slider) => {
         updateSliderProgress(slider);
         slider.addEventListener("input", () => updateSliderProgress(slider));
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index a1e9c1a14..69f5b23cf 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -67,7 +67,9 @@ export class SinglePlayerModal extends LitElement {
                     <div class="flex flex-row flex-wrap justify-center gap-4">
                       ${maps.map((mapValue) => {
                         const mapKey = Object.keys(GameMapType).find(
-                          (key) => GameMapType[key] === mapValue,
+                          (key) =>
+                            GameMapType[key as keyof typeof GameMapType] ===
+                            mapValue,
                         );
                         return html`
                           <div
@@ -129,7 +131,7 @@ export class SinglePlayerModal extends LitElement {
                       ></difficulty-display>
                       <p class="option-card-title">
                         ${translateText(
-                          `difficulty.${DifficultyDescription[key]}`,
+                          `difficulty.${DifficultyDescription[key as keyof typeof DifficultyDescription]}`,
                         )}
                       </p>
                     </div>
@@ -389,7 +391,7 @@ export class SinglePlayerModal extends LitElement {
     }
 
     console.log(
-      `Starting single player game with map: ${GameMapType[this.selectedMap]}${this.useRandomMap ? " (Randomly selected)" : ""}`,
+      `Starting single player game with map: ${GameMapType[this.selectedMap as keyof typeof GameMapType]}${this.useRandomMap ? " (Randomly selected)" : ""}`,
     );
     const clientID = generateID();
     const gameID = generateID();
diff --git a/src/client/graphics/layers/BuildMenu.ts b/src/client/graphics/layers/BuildMenu.ts
index 7644347fc..9399218e9 100644
--- a/src/client/graphics/layers/BuildMenu.ts
+++ b/src/client/graphics/layers/BuildMenu.ts
@@ -404,7 +404,7 @@ export class BuildMenu extends LitElement implements Layer {
     return html`
       <div
         class="build-menu ${this._hidden ? "hidden" : ""}"
-        @contextmenu=${(e) => e.preventDefault()}
+        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         ${this.filteredBuildTable.map(
           (row) => html`
diff --git a/src/client/graphics/layers/ChatDisplay.ts b/src/client/graphics/layers/ChatDisplay.ts
index 5a880f733..941b08551 100644
--- a/src/client/graphics/layers/ChatDisplay.ts
+++ b/src/client/graphics/layers/ChatDisplay.ts
@@ -26,10 +26,6 @@ export class ChatDisplay extends LitElement implements Layer {
 
   private active: boolean = false;
 
-  private updateMap = new Map([
-    [GameUpdateType.DisplayEvent, (u) => this.onDisplayMessageEvent(u)],
-  ]);
-
   @state() private _hidden: boolean = false;
   @state() private newEvents: number = 0;
   @state() private chatEvents: ChatEvent[] = [];
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index e4ac7b286..a4197e0de 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -214,7 +214,7 @@ export class ControlPanel extends LitElement implements Layer {
         class="${this._isVisible
           ? "w-full sm:max-w-[320px] text-sm sm:text-base bg-gray-800/70 p-2 pr-3 sm:p-4 shadow-lg sm:rounded-lg backdrop-blur"
           : "hidden"}"
-        @contextmenu=${(e) => e.preventDefault()}
+        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         <div class="block bg-black/30 text-white mb-4 p-2 rounded">
           <div class="flex justify-between mb-1">
diff --git a/src/client/graphics/layers/EmojiTable.ts b/src/client/graphics/layers/EmojiTable.ts
index 0236d33fd..7a9702578 100644
--- a/src/client/graphics/layers/EmojiTable.ts
+++ b/src/client/graphics/layers/EmojiTable.ts
@@ -62,8 +62,8 @@ export class EmojiTable extends LitElement {
       <div
         class="bg-slate-800 max-w-[95vw] max-h-[95vh] pt-[15px] pb-[15px] fixed flex flex-col -translate-x-1/2 -translate-y-1/2 
                 items-center rounded-[10px] z-[9999] top-[50%] left-[50%] justify-center"
-        @contextmenu=${(e) => e.preventDefault()}
-        @wheel=${(e) => e.stopPropagation()}
+        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
+        @wheel=${(e: WheelEvent) => e.stopPropagation()}
       >
         <!-- Close button -->
         <button
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index 67a8de81b..04747486c 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -142,20 +142,20 @@ export class EventsDisplay extends LitElement implements Layer {
     this.requestUpdate();
   }
 
-  private updateMap = new Map([
-    [GameUpdateType.DisplayEvent, (u) => this.onDisplayMessageEvent(u)],
-    [GameUpdateType.DisplayChatEvent, (u) => this.onDisplayChatEvent(u)],
-    [GameUpdateType.AllianceRequest, (u) => this.onAllianceRequestEvent(u)],
+  private updateMap = [
+    [GameUpdateType.DisplayEvent, this.onDisplayMessageEvent.bind(this)],
+    [GameUpdateType.DisplayChatEvent, this.onDisplayChatEvent.bind(this)],
+    [GameUpdateType.AllianceRequest, this.onAllianceRequestEvent.bind(this)],
     [
       GameUpdateType.AllianceRequestReply,
-      (u) => this.onAllianceRequestReplyEvent(u),
+      this.onAllianceRequestReplyEvent.bind(this),
     ],
-    [GameUpdateType.BrokeAlliance, (u) => this.onBrokeAllianceEvent(u)],
-    [GameUpdateType.TargetPlayer, (u) => this.onTargetPlayerEvent(u)],
-    [GameUpdateType.Emoji, (u) => this.onEmojiMessageEvent(u)],
-    [GameUpdateType.UnitIncoming, (u) => this.onUnitIncomingEvent(u)],
-    [GameUpdateType.AllianceExpired, (u) => this.onAllianceExpiredEvent(u)],
-  ]);
+    [GameUpdateType.BrokeAlliance, this.onBrokeAllianceEvent.bind(this)],
+    [GameUpdateType.TargetPlayer, this.onTargetPlayerEvent.bind(this)],
+    [GameUpdateType.Emoji, this.onEmojiMessageEvent.bind(this)],
+    [GameUpdateType.UnitIncoming, this.onUnitIncomingEvent.bind(this)],
+    [GameUpdateType.AllianceExpired, this.onAllianceExpiredEvent.bind(this)],
+  ] as const;
 
   constructor() {
     super();
@@ -189,7 +189,7 @@ export class EventsDisplay extends LitElement implements Layer {
     const updates = this.game.updatesSinceLastTick();
     if (updates) {
       for (const [ut, fn] of this.updateMap) {
-        updates[ut]?.forEach(fn);
+        updates[ut]?.forEach(fn as (event: unknown) => void);
       }
     }
 
diff --git a/src/client/graphics/layers/HeadsUpMessage.ts b/src/client/graphics/layers/HeadsUpMessage.ts
index 95881a898..435116223 100644
--- a/src/client/graphics/layers/HeadsUpMessage.ts
+++ b/src/client/graphics/layers/HeadsUpMessage.ts
@@ -38,7 +38,7 @@ export class HeadsUpMessage extends LitElement implements Layer {
                     w-full justify-evenly h-8 lg:h-10 md:top-[70px] left-0 lg:left-4 
                     bg-opacity-60 bg-gray-900 rounded-md lg:rounded-lg 
                     backdrop-blur-md text-white text-md lg:text-xl p-1 lg:p-2"
-        @contextmenu=${(e) => e.preventDefault()}
+        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         ${translateText("heads_up_message.choose_spawn")}
       </div>
diff --git a/src/client/graphics/layers/Layer.ts b/src/client/graphics/layers/Layer.ts
index 9bfd9dc81..239937435 100644
--- a/src/client/graphics/layers/Layer.ts
+++ b/src/client/graphics/layers/Layer.ts
@@ -1,7 +1,7 @@
 export interface Layer {
-  init?();
-  tick?();
-  renderLayer?(context: CanvasRenderingContext2D);
-  shouldTransform?(): boolean;
-  redraw?(): void;
+  init?: () => void;
+  tick?: () => void;
+  renderLayer?: (context: CanvasRenderingContext2D) => void;
+  shouldTransform?: () => boolean;
+  redraw?: () => void;
 }
diff --git a/src/client/graphics/layers/OptionsMenu.ts b/src/client/graphics/layers/OptionsMenu.ts
index ed984904e..66ea8f3ae 100644
--- a/src/client/graphics/layers/OptionsMenu.ts
+++ b/src/client/graphics/layers/OptionsMenu.ts
@@ -14,7 +14,7 @@ const button = ({
   classes = "",
   onClick = () => {},
   title = "",
-  children,
+  children = "",
 }) => html`
   <button
     class="flex items-center justify-center p-1
@@ -167,7 +167,7 @@ export class OptionsMenu extends LitElement implements Layer {
     return html`
       <div
         class="top-0 lg:top-4 right-0 lg:right-4 z-50 pointer-events-auto"
-        @contextmenu=${(e) => e.preventDefault()}
+        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         <div
           class="bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-es-sm lg:rounded-lg backdrop-blur-md"
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index d456f04d2..f78b1cb6a 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -340,7 +340,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     return html`
       <div
         class="block lg:flex fixed top-[150px] right-0 w-full z-50 flex-col max-w-[180px]"
-        @contextmenu=${(e) => e.preventDefault()}
+        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         <div
           class="bg-gray-800/70 backdrop-blur-sm shadow-xs rounded-lg shadow-lg transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
diff --git a/src/client/graphics/layers/PlayerPanel.ts b/src/client/graphics/layers/PlayerPanel.ts
index 50201fbf0..4abe315d9 100644
--- a/src/client/graphics/layers/PlayerPanel.ts
+++ b/src/client/graphics/layers/PlayerPanel.ts
@@ -162,10 +162,10 @@ export class PlayerPanel extends LitElement implements Layer {
     return this;
   }
 
-  private ctModal;
+  private ctModal: ChatModal;
 
   init() {
-    this.eventBus.on(MouseUpEvent, (e: MouseEvent) => this.hide());
+    this.eventBus.on(MouseUpEvent, () => this.hide());
 
     this.ctModal = document.querySelector("chat-modal") as ChatModal;
   }
@@ -234,8 +234,8 @@ export class PlayerPanel extends LitElement implements Layer {
     return html`
       <div
         class="fixed inset-0 flex items-center justify-center z-[1001] pointer-events-none overflow-auto"
-        @contextmenu=${(e) => e.preventDefault()}
-        @wheel=${(e) => e.stopPropagation()}
+        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
+        @wheel=${(e: MouseEvent) => e.stopPropagation()}
       >
         <div
           class="pointer-events-auto max-h-[90vh] overflow-y-auto min-w-[240px] w-auto px-4 py-2"
@@ -364,7 +364,8 @@ export class PlayerPanel extends LitElement implements Layer {
               <!-- Action buttons -->
               <div class="flex justify-center gap-2">
                 <button
-                  @click=${(e) => this.handleChat(e, myPlayer, other)}
+                  @click=${(e: MouseEvent) =>
+                    this.handleChat(e, myPlayer, other)}
                   class="w-10 h-10 flex items-center justify-center
                            bg-opacity-50 bg-gray-700 hover:bg-opacity-70
                            text-white rounded-lg transition-colors"
@@ -373,7 +374,8 @@ export class PlayerPanel extends LitElement implements Layer {
                 </button>
                 ${canTarget
                   ? html`<button
-                      @click=${(e) => this.handleTargetClick(e, other)}
+                      @click=${(e: MouseEvent) =>
+                        this.handleTargetClick(e, other)}
                       class="w-10 h-10 flex items-center justify-center
                            bg-opacity-50 bg-gray-700 hover:bg-opacity-70
                            text-white rounded-lg transition-colors"
@@ -383,7 +385,7 @@ export class PlayerPanel extends LitElement implements Layer {
                   : ""}
                 ${canBreakAlliance
                   ? html`<button
-                      @click=${(e) =>
+                      @click=${(e: MouseEvent) =>
                         this.handleBreakAllianceClick(e, myPlayer, other)}
                       class="w-10 h-10 flex items-center justify-center
                            bg-opacity-50 bg-gray-700 hover:bg-opacity-70
@@ -398,7 +400,7 @@ export class PlayerPanel extends LitElement implements Layer {
                   : ""}
                 ${canSendAllianceRequest
                   ? html`<button
-                      @click=${(e) =>
+                      @click=${(e: MouseEvent) =>
                         this.handleAllianceClick(e, myPlayer, other)}
                       class="w-10 h-10 flex items-center justify-center
                            bg-opacity-50 bg-gray-700 hover:bg-opacity-70
@@ -409,7 +411,7 @@ export class PlayerPanel extends LitElement implements Layer {
                   : ""}
                 ${canDonate
                   ? html`<button
-                      @click=${(e) =>
+                      @click=${(e: MouseEvent) =>
                         this.handleDonateTroopClick(e, myPlayer, other)}
                       class="w-10 h-10 flex items-center justify-center
                            bg-opacity-50 bg-gray-700 hover:bg-opacity-70
@@ -424,7 +426,7 @@ export class PlayerPanel extends LitElement implements Layer {
                   : ""}
                 ${canDonate
                   ? html`<button
-                      @click=${(e) =>
+                      @click=${(e: MouseEvent) =>
                         this.handleDonateGoldClick(e, myPlayer, other)}
                       class="w-10 h-10 flex items-center justify-center
                           bg-opacity-50 bg-gray-700 hover:bg-opacity-70
@@ -435,7 +437,8 @@ export class PlayerPanel extends LitElement implements Layer {
                   : ""}
                 ${canSendEmoji
                   ? html`<button
-                      @click=${(e) => this.handleEmojiClick(e, myPlayer, other)}
+                      @click=${(e: MouseEvent) =>
+                        this.handleEmojiClick(e, myPlayer, other)}
                       class="w-10 h-10 flex items-center justify-center
                            bg-opacity-50 bg-gray-700 hover:bg-opacity-70
                            text-white rounded-lg transition-colors"
@@ -446,7 +449,8 @@ export class PlayerPanel extends LitElement implements Layer {
               </div>
               ${canEmbargo && other !== myPlayer
                 ? html`<button
-                    @click=${(e) => this.handleEmbargoClick(e, myPlayer, other)}
+                    @click=${(e: MouseEvent) =>
+                      this.handleEmbargoClick(e, myPlayer, other)}
                     class="w-100 h-10 flex items-center justify-center
                           bg-opacity-50 bg-gray-700 hover:bg-opacity-70
                           text-white rounded-lg transition-colors"
@@ -456,7 +460,7 @@ export class PlayerPanel extends LitElement implements Layer {
                 : ""}
               ${!canEmbargo && other !== myPlayer
                 ? html`<button
-                    @click=${(e) =>
+                    @click=${(e: MouseEvent) =>
                       this.handleStopEmbargoClick(e, myPlayer, other)}
                     class="w-100 h-10 flex items-center justify-center
                           bg-opacity-50 bg-gray-700 hover:bg-opacity-70
diff --git a/src/client/graphics/layers/TeamStats.ts b/src/client/graphics/layers/TeamStats.ts
index 87c03746d..16251a0ad 100644
--- a/src/client/graphics/layers/TeamStats.ts
+++ b/src/client/graphics/layers/TeamStats.ts
@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { EventBus } from "../../../core/EventBus";
-import { GameMode } from "../../../core/game/Game";
+import { GameMode, Team } from "../../../core/game/Game";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { renderNumber, translateText } from "../../Utils";
 import { Layer } from "./Layer";
@@ -47,7 +47,7 @@ export class TeamStats extends LitElement implements Layer {
 
   private updateTeamStats() {
     const players = this.game.playerViews();
-    const grouped: Record<number, PlayerView[]> = {};
+    const grouped: Record<Team, PlayerView[]> = {};
 
     for (const player of players) {
       const team = player.team();
@@ -102,7 +102,7 @@ export class TeamStats extends LitElement implements Layer {
           .visible
           ? ""
           : "hidden"}"
-        @contextmenu=${(e) => e.preventDefault()}
+        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         <div
           class="grid w-full"
diff --git a/tsconfig.json b/tsconfig.json
index 453dd22a5..7c73290f3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,8 @@
     "experimentalDecorators": true,
     "resolveJsonModule": true,
     "strictNullChecks": true,
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "strictPropertyInitialization": false
   },
   "include": [
     "src/**/*",