From 9089de959b80341ba3a1cd2393beba88253f5567 Mon Sep 17 00:00:00 2001
From: Shaan <39768960+shaan150@users.noreply.github.com>
Date: Mon, 2 Jun 2025 19:30:18 +0100
Subject: [PATCH] =?UTF-8?q?Synced=20the=20single=20player=20and=20host=20f?=
 =?UTF-8?q?iles=20together,=20and=20fix=20issue=20withc=E2=80=A6=20(#991)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:
This is a UI fix that addresses the issue where the nuke related options
were not able to be deselected in private lobby's, these are now able to
done.

## Please complete the following:
- [x] I have added screenshots for all UI updates
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors
- [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

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

Shaan160

Fixes #989


![image](https://github.com/user-attachments/assets/78ae73ed-b73e-49f7-a2dd-bade3bcfa8bc)
---
 src/client/HostLobbyModal.ts                  | 67 ++++---------------
 src/client/SinglePlayerModal.ts               | 56 ++++------------
 src/client/utilities/RenderUnitTypeOptions.ts | 48 +++++++++++++
 3 files changed, 75 insertions(+), 96 deletions(-)
 create mode 100644 src/client/utilities/RenderUnitTypeOptions.ts

diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index d532ef3a4..6e12a4ad3 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -19,6 +19,7 @@ import "./components/Difficulties";
 import { DifficultyDescription } from "./components/Difficulties";
 import "./components/Maps";
 import { JoinLobbyEvent } from "./Main";
+import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions";
 
 @customElement("host-lobby-modal")
 export class HostLobbyModal extends LitElement {
@@ -314,59 +315,10 @@ export class HostLobbyModal extends LitElement {
                 <div
                   style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;"
                 >
-                  ${[
-                    [UnitType.City, "unit_type.city"],
-                    [UnitType.DefensePost, "unit_type.defense_post"],
-                    [UnitType.Port, "unit_type.port"],
-                    [UnitType.Warship, "unit_type.warship"],
-                    [UnitType.MissileSilo, "unit_type.missile_silo"],
-                    [UnitType.SAMLauncher, "unit_type.sam_launcher"],
-                    [UnitType.AtomBomb, "unit_type.atom_bomb"],
-                    [UnitType.HydrogenBomb, "unit_type.hydrogen_bomb"],
-                    [UnitType.MIRV, "unit_type.mirv"],
-                  ].map(
-                    ([unitType, translationKey]: [UnitType, string]) => html`
-                      <label
-                        class="option-card ${this.disabledUnits.includes(
-                          unitType,
-                        )
-                          ? ""
-                          : "selected"}"
-                        style="width: 140px;"
-                      >
-                        <div class="checkbox-icon"></div>
-                        <input
-                          type="checkbox"
-                          @change=${(e: Event) => {
-                            const checked = (e.target as HTMLInputElement)
-                              .checked;
-                            const parsedUnitType =
-                              UnitType[unitType as keyof typeof UnitType];
-                            if (parsedUnitType) {
-                              if (checked) {
-                                this.disabledUnits = [
-                                  ...this.disabledUnits,
-                                  parsedUnitType,
-                                ];
-                              } else {
-                                this.disabledUnits = this.disabledUnits.filter(
-                                  (u) => u !== parsedUnitType,
-                                );
-                              }
-                              this.putGameConfig();
-                            }
-                          }}
-                          .checked=${this.disabledUnits.includes(unitType)}
-                        />
-                        <div
-                          class="option-card-title"
-                          style="text-align: center;"
-                        >
-                          ${translateText(translationKey)}
-                        </div>
-                      </label>
-                    `,
-                  )}
+                   ${renderUnitTypeOptions({
+                     disabledUnits: this.disabledUnits,
+                     toggleUnit: this.toggleUnit.bind(this),
+                   })}
                   </div>
                 </div>
               </div>
@@ -545,6 +497,15 @@ export class HostLobbyModal extends LitElement {
     return response;
   }
 
+  private toggleUnit(unit: UnitType, checked: boolean): void {
+    consolex.log(`Toggling unit type: ${unit} to ${checked}`);
+    this.disabledUnits = checked
+      ? [...this.disabledUnits, unit]
+      : this.disabledUnits.filter((u) => u !== unit);
+
+    this.putGameConfig();
+  }
+
   private getRandomMap(): GameMapType {
     const maps = Object.values(GameMapType);
     const randIdx = Math.floor(Math.random() * maps.length);
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index 09a6d4334..509f564f6 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -21,6 +21,7 @@ import "./components/Maps";
 import { FlagInput } from "./FlagInput";
 import { JoinLobbyEvent } from "./Main";
 import { UsernameInput } from "./UsernameInput";
+import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions";
 
 @customElement("single-player-modal")
 export class SinglePlayerModal extends LitElement {
@@ -39,7 +40,7 @@ export class SinglePlayerModal extends LitElement {
   @state() private gameMode: GameMode = GameMode.FFA;
   @state() private teamCount: number | typeof Duos = 2;
 
-  @state() private disabledUnits: string[] = [];
+  @state() private disabledUnits: UnitType[] = [];
 
   render() {
     return html`
@@ -284,48 +285,10 @@ export class SinglePlayerModal extends LitElement {
             <div
               style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;"
             >
-              ${[
-                [UnitType.City, "unit_type.city"],
-                [UnitType.DefensePost, "unit_type.defense_post"],
-                [UnitType.Port, "unit_type.port"],
-                [UnitType.Warship, "unit_type.warship"],
-                [UnitType.MissileSilo, "unit_type.missile_silo"],
-                [UnitType.SAMLauncher, "unit_type.sam_launcher"],
-                [UnitType.AtomBomb, "unit_type.atom_bomb"],
-                [UnitType.HydrogenBomb, "unit_type.hydrogen_bomb"],
-                [UnitType.MIRV, "unit_type.mirv"],
-              ].map(
-                ([unitType, translationKey]) => html`
-                  <label
-                    class="option-card ${this.disabledUnits.includes(unitType)
-                      ? ""
-                      : "selected"}"
-                    style="width: 140px;"
-                  >
-                    <div class="checkbox-icon"></div>
-                    <input
-                      type="checkbox"
-                      @change=${(e: Event) => {
-                        const checked = (e.target as HTMLInputElement).checked;
-                        if (checked) {
-                          this.disabledUnits = [
-                            ...this.disabledUnits,
-                            unitType,
-                          ];
-                        } else {
-                          this.disabledUnits = this.disabledUnits.filter(
-                            (u) => u !== unitType,
-                          );
-                        }
-                      }}
-                      .checked=${this.disabledUnits.includes(unitType)}
-                    />
-                    <div class="option-card-title" style="text-align: center;">
-                      ${translateText(translationKey)}
-                    </div>
-                  </label>
-                `,
-              )}
+              ${renderUnitTypeOptions({
+                disabledUnits: this.disabledUnits,
+                toggleUnit: this.toggleUnit.bind(this),
+              })}
             </div>
           </div>
         </div>
@@ -403,6 +366,13 @@ export class SinglePlayerModal extends LitElement {
     return maps[randIdx] as GameMapType;
   }
 
+  private toggleUnit(unit: UnitType, checked: boolean): void {
+    consolex.log(`Toggling unit type: ${unit} to ${checked}`);
+    this.disabledUnits = checked
+      ? [...this.disabledUnits, unit]
+      : this.disabledUnits.filter((u) => u !== unit);
+  }
+
   private startGame() {
     // If random map is selected, choose a random map now
     if (this.useRandomMap) {
diff --git a/src/client/utilities/RenderUnitTypeOptions.ts b/src/client/utilities/RenderUnitTypeOptions.ts
new file mode 100644
index 000000000..c74aaf7ef
--- /dev/null
+++ b/src/client/utilities/RenderUnitTypeOptions.ts
@@ -0,0 +1,48 @@
+// renderUnitTypeOptions.ts
+import { html, TemplateResult } from "lit";
+import { UnitType } from "../../core/game/Game";
+import { translateText } from "../Utils";
+
+export interface UnitTypeRenderContext {
+  disabledUnits: UnitType[];
+  toggleUnit: (unit: UnitType, checked: boolean) => void;
+}
+
+const unitOptions: { type: UnitType; translationKey: string }[] = [
+  { type: UnitType.City, translationKey: "unit_type.city" },
+  { type: UnitType.DefensePost, translationKey: "unit_type.defense_post" },
+  { type: UnitType.Port, translationKey: "unit_type.port" },
+  { type: UnitType.Warship, translationKey: "unit_type.warship" },
+  { type: UnitType.MissileSilo, translationKey: "unit_type.missile_silo" },
+  { type: UnitType.SAMLauncher, translationKey: "unit_type.sam_launcher" },
+  { type: UnitType.AtomBomb, translationKey: "unit_type.atom_bomb" },
+  { type: UnitType.HydrogenBomb, translationKey: "unit_type.hydrogen_bomb" },
+  { type: UnitType.MIRV, translationKey: "unit_type.mirv" },
+];
+
+export function renderUnitTypeOptions({
+  disabledUnits,
+  toggleUnit,
+}: UnitTypeRenderContext): TemplateResult[] {
+  return unitOptions.map(
+    ({ type, translationKey }) => html`
+      <label
+        class="option-card ${disabledUnits.includes(type) ? "" : "selected"}"
+        style="width: 140px;"
+      >
+        <div class="checkbox-icon"></div>
+        <input
+          type="checkbox"
+          .checked=${disabledUnits.includes(type)}
+          @change=${(e: Event) => {
+            const checked = (e.target as HTMLInputElement).checked;
+            toggleUnit(type, checked);
+          }}
+        />
+        <div class="option-card-title" style="text-align: center;">
+          ${translateText(translationKey)}
+        </div>
+      </label>
+    `,
+  );
+}