Unit Upgrades

src/client/InputHandler.ts

@@ -393,6 +393,7 @@ export class InputHandler {
         this.uiState.upgradeMode = false;
         this.eventBus.emit(new ToggleUpgradeModeEvent(false));
       }
+      // unit upgrade mode removed
       const cell = this.transformHandler.screenToWorldCoordinates(
         this.lastPointerX,
         this.lastPointerY,
@@ -484,6 +485,7 @@ export class InputHandler {
         this.uiState.upgradeMode = false;
         this.eventBus.emit(new ToggleUpgradeModeEvent(false));
       }
+      // unit upgrade mode removed
       this.eventBus.emit(
         new BuildUnitIntentEvent(this.uiState.pendingBuildUnitType, tile),
       );

src/client/Transport.ts

@@ -12,7 +12,11 @@ import {
 } from "../core/game/Game";
 import { TileRef } from "../core/game/GameMap";
 import { PlayerView } from "../core/game/GameView";
-import { maxStructureLevel } from "../core/game/Upgradeables";
+import {
+  isUpgradeableUnit,
+  maxStructureLevel,
+  maxUnitLevel,
+} from "../core/game/Upgradeables";
 import {
   AllPlayersStats,
   ClientHashMessage,
@@ -353,6 +357,7 @@ export class Transport {
     this.eventBus.on(SendKickPlayerIntentEvent, (e) =>
       this.onSendKickPlayerIntent(e),
     );
+    // unit upgrade intent removed
   }
 
   private startPing() {
@@ -678,16 +683,27 @@ export class Transport {
     this._lastBuildAt = now;
 
     // Compute desired starting level for upgradeable structures from local settings.
+    // Compute desired starting level for upgradeable structures or units from local settings.
     let targetLevel: number | undefined;
     try {
-      const raw = localStorage.getItem("buildSettings.levels");
-      if (raw) {
-        const obj = JSON.parse(raw) as Record<string, number>;
-        const key = String(event.unit);
-        const val = obj?.[key];
-        if (typeof val === "number" && val > 1) {
-          // Enforce cap for missile silo / SAM launcher locally (server re-validates).
-          targetLevel = Math.min(maxStructureLevel(event.unit), val);
+      const key = String(event.unit);
+      if (isUpgradeableUnit(event.unit)) {
+        const rawUnits = localStorage.getItem("unitUpgradeSettings.levels");
+        if (rawUnits) {
+          const obj = JSON.parse(rawUnits) as Record<string, number>;
+          const val = obj?.[key];
+          if (typeof val === "number" && val > 1) {
+            targetLevel = Math.min(maxUnitLevel(event.unit), val);
+          }
+        }
+      } else {
+        const rawStruct = localStorage.getItem("buildSettings.levels");
+        if (rawStruct) {
+          const obj = JSON.parse(rawStruct) as Record<string, number>;
+          const val = obj?.[key];
+          if (typeof val === "number" && val > 1) {
+            targetLevel = Math.min(maxStructureLevel(event.unit), val);
+          }
         }
       }
     } catch {
@@ -862,6 +878,8 @@ export class Transport {
     });
   }
 
+  // unit upgrade intent handler removed
+
   private sendIntent(intent: Intent) {
     if (this.isLocal || this.socket?.readyState === WebSocket.OPEN) {
       const msg = {

src/client/UnitUpgradeSettingsModal.ts

@@ -0,0 +1,234 @@
+import { LitElement, html } from "lit";
+import { customElement, query, state } from "lit/decorators.js";
+import { UnitType } from "../core/game/Game";
+import {
+  isUpgradeableUnit,
+  maxUnitLevel,
+  tryParseUnitType,
+} from "../core/game/Upgradeables";
+import "./components/baseComponents/Modal";
+
+interface UpgradeSettingsItem {
+  id: string;
+  name: string;
+  icon?: string;
+}
+
+@customElement("unit-upgrade-settings-modal")
+export class UnitUpgradeSettingsModal extends LitElement {
+  @query("o-modal") private modalEl!: HTMLElement & {
+    open: () => void;
+    close: () => void;
+    isModalOpen: boolean;
+  };
+
+  @state() private items: UpgradeSettingsItem[] = [];
+  @state() private levels: Record<string, number> = {};
+
+  /** Populate and open the modal. Loads persisted levels; defaults to 1 */
+  public open(
+    unitTypes: UnitType[] = [],
+    unitIconMap: Record<string, string | undefined> = {},
+  ) {
+    const upgradeables = unitTypes.filter((t) => isUpgradeableUnit(t));
+    this.items = upgradeables.map((t) => {
+      const id = String(t);
+      return {
+        id,
+        name: id,
+        icon: unitIconMap[id],
+      };
+    });
+
+    const persisted = this._loadPersisted();
+    const lvls: Record<string, number> = {};
+    this.items.forEach((i) => {
+      const raw = persisted[i.id];
+      const parsed = typeof raw === "number" && raw >= 1 ? raw : 1;
+      lvls[i.id] = this._applyCap(i.id, parsed);
+    });
+    this.levels = lvls;
+    this.updateComplete.then(() => this.modalEl?.open());
+  }
+
+  private _loadPersisted(): Record<string, number> {
+    try {
+      const json = localStorage.getItem("unitUpgradeSettings.levels") ?? "{}";
+      const data = JSON.parse(json);
+      if (data && typeof data === "object")
+        return data as Record<string, number>;
+    } catch (_) {
+      /* ignore parse errors */
+    }
+    return {};
+  }
+
+  private _persist() {
+    try {
+      localStorage.setItem(
+        "unitUpgradeSettings.levels",
+        JSON.stringify(this.levels),
+      );
+    } catch (_) {
+      /* ignore quota issues */
+    }
+  }
+
+  // Apply unit-specific level caps via shared rule
+  private _applyCap(id: string, desired: number): number {
+    const t = tryParseUnitType(id);
+    if (!t) return Math.max(1, desired);
+    return Math.min(maxUnitLevel(t), Math.max(1, desired));
+  }
+
+  private _inc(id: string) {
+    const next = this._applyCap(id, (this.levels[id] ?? 1) + 1);
+    this.levels = { ...this.levels, [id]: next };
+    this._persist();
+  }
+  private _dec(id: string) {
+    const cur = this.levels[id] ?? 1;
+    const next = Math.max(1, cur - 1);
+    this.levels = { ...this.levels, [id]: next };
+    this._persist();
+  }
+
+  render() {
+    return html`
+      <o-modal
+        title="Unit Upgrade Settings"
+        max-width="520px"
+        max-height="65dvh"
+      >
+        <style>
+          unit-upgrade-settings-modal .bs-list {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+          }
+          unit-upgrade-settings-modal .bs-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            padding: 6px 10px;
+            border: 1px solid var(--ui-panel-border);
+            border-radius: 6px;
+            background: var(--ui-primary);
+            min-height: 40px;
+          }
+          unit-upgrade-settings-modal .bs-row:hover {
+            background: var(--ui-secondary);
+          }
+          unit-upgrade-settings-modal .bs-left {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            min-width: 0;
+            flex: 1 1 auto;
+          }
+          unit-upgrade-settings-modal .bs-icon {
+            width: 22px;
+            height: 22px;
+            flex-shrink: 0;
+            display: block;
+            object-fit: contain;
+            filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
+          }
+          unit-upgrade-settings-modal .bs-name {
+            font-size: 13px;
+            color: var(--ui-text-default);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex: 1 1 auto;
+          }
+          unit-upgrade-settings-modal .bs-controls {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+          }
+          unit-upgrade-settings-modal button.bs-btn {
+            width: 24px;
+            height: 22px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid var(--ui-panel-border);
+            background: #111a2e;
+            color: var(--ui-text-default);
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 11px;
+            line-height: 1;
+          }
+          unit-upgrade-settings-modal button.bs-btn:hover {
+            border-color: var(--ui-secondary-hover);
+            box-shadow: 0 0 0 1px rgba(39, 71, 110, 0.35) inset;
+          }
+          unit-upgrade-settings-modal .bs-val {
+            min-width: 22px;
+            text-align: center;
+            font-variant-numeric: tabular-nums;
+            font-size: 12px;
+          }
+          unit-upgrade-settings-modal .hint {
+            font-size: 11px;
+            color: var(--ui-text-muted, #94a3b8);
+            margin-bottom: 8px;
+          }
+        </style>
+        <div class="hint">
+          Default combat unit levels (persistent; capped per unit type)
+        </div>
+        <div class="bs-list">
+          ${this.items.map(
+            (i) => html`
+              <div class="bs-row" data-id=${i.id}>
+                <div class="bs-left">
+                  ${i.icon
+                    ? html`<img
+                        class="bs-icon"
+                        src=${i.icon}
+                        alt=${i.name}
+                        width="22"
+                        height="22"
+                      />`
+                    : html``}
+                  <div class="bs-name">${i.name}</div>
+                </div>
+                <div class="bs-controls">
+                  <button
+                    class="bs-btn"
+                    @click=${() => this._dec(i.id)}
+                    title="Decrease"
+                  >
+                    &#x25BC;
+                  </button>
+                  <span class="bs-val">${this.levels[i.id] ?? 1}</span>
+                  <button
+                    class="bs-btn"
+                    @click=${() => this._inc(i.id)}
+                    title="Increase"
+                  >
+                    &#x25B2;
+                  </button>
+                </div>
+              </div>
+            `,
+          )}
+        </div>
+      </o-modal>
+    `;
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "unit-upgrade-settings-modal": UnitUpgradeSettingsModal;
+  }
+}

src/client/events/ToggleUnitUpgradeModeEvent.ts

@@ -0,0 +1,2 @@
+// Deprecated placeholder to maintain git history; file will be removed.
+export {};

src/client/graphics/GameRenderer.ts

@@ -55,6 +55,7 @@ export function createRenderer(
     pendingBuildUnitType: null,
     multibuildEnabled: false,
     upgradeMode: false,
+    unitLevels: {},
   };
 
   //hide when the game renders
@@ -239,7 +240,7 @@ export function createRenderer(
     // World-space ring overlay for Defense Posts/SAMs
     new RangeOverlayLayer(game, eventBus, transformHandler, uiState),
     structureLayer,
-    new UnitLayer(game, eventBus, transformHandler),
+    new UnitLayer(game, eventBus, transformHandler, uiState),
     new FxLayer(game),
     // Draw name labels in world space along with other transformed layers
     new NameLayer(game, transformHandler, eventBus),

src/client/graphics/UIState.ts

@@ -7,4 +7,6 @@ export interface UIState {
   multibuildEnabled: boolean;
   // Whether the player is currently in city upgrade targeting mode
   upgradeMode: boolean;
+  // Local client-side unit levels (id -> level)
+  unitLevels: Record<number, number>;
 }