Fix icons and add mirv to build bar (#2154)

## Description:

Fix blurry icons and add mirv to build bar
<img width="792" height="101" alt="image"
src="https://github.com/user-attachments/assets/a46c4724-c99b-4541-b56b-92ec662c8ec5"
/>

<img width="176" height="275" alt="image"
src="https://github.com/user-attachments/assets/dbcd2ed4-0f21-4065-9a52-9b16e9043270"
/>


## 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

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

DISCORD_USERNAME

src/client/InputHandler.ts

@@ -188,9 +188,10 @@ export class InputHandler {
       buildDefensePost: "Digit4",
       buildMissileSilo: "Digit5",
       buildSamLauncher: "Digit6",
-      buildAtomBomb: "Digit7",
-      buildHydrogenBomb: "Digit8",
-      buildWarship: "Digit9",
+      buildWarship: "Digit7",
+      buildAtomBomb: "Digit8",
+      buildHydrogenBomb: "Digit9",
+      buildMIRV: "Digit0",
       ...saved,
     };
 
@@ -409,6 +410,11 @@ export class InputHandler {
         this.uiState.ghostStructure = UnitType.Warship;
       }
 
+      if (e.code === this.keybinds.buildMIRV) {
+        e.preventDefault();
+        this.uiState.ghostStructure = UnitType.MIRV;
+      }
+
       // Shift-D to toggle performance overlay
       console.log(e.code, e.shiftKey, e.ctrlKey, e.altKey, e.metaKey);
       if (e.code === "KeyD" && e.shiftKey) {

src/client/UserSettingModal.ts

@@ -494,11 +494,20 @@ export class UserSettingModal extends LitElement {
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
+      <setting-keybind
+        action="buildWarship"
+        label=${translateText("user_setting.build_warship")}
+        description=${translateText("user_setting.build_warship_desc")}
+        defaultKey="Digit7"
+        .value=${this.keybinds["buildWarship"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
       <setting-keybind
         action="buildAtomBomb"
         label=${translateText("user_setting.build_atom_bomb")}
         description=${translateText("user_setting.build_atom_bomb_desc")}
-        defaultKey="Digit7"
+        defaultKey="Digit8"
         .value=${this.keybinds["buildAtomBomb"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
@@ -507,17 +516,17 @@ export class UserSettingModal extends LitElement {
         action="buildHydrogenBomb"
         label=${translateText("user_setting.build_hydrogen_bomb")}
         description=${translateText("user_setting.build_hydrogen_bomb_desc")}
-        defaultKey="Digit8"
+        defaultKey="Digit9"
         .value=${this.keybinds["buildHydrogenBomb"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
       <setting-keybind
-        action="buildWarship"
-        label=${translateText("user_setting.build_warship")}
-        description=${translateText("user_setting.build_warship_desc")}
-        defaultKey="Digit9"
-        .value=${this.keybinds["buildWarship"]?.key ?? ""}
+        action="buildMIRV"
+        label=${translateText("user_setting.build_MIRV")}
+        description=${translateText("user_setting.build_MIRV_desc")}
+        defaultKey="Digit0"
+        .value=${this.keybinds["buildMIRV"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -2,12 +2,12 @@ import { LitElement, TemplateResult, html } from "lit";
 import { ref } from "lit-html/directives/ref.js";
 import { customElement, property, state } from "lit/decorators.js";
 import allianceIcon from "../../../../resources/images/AllianceIcon.svg";
-import portIcon from "../../../../resources/images/AnchorIcon.png";
 import warshipIcon from "../../../../resources/images/BattleshipIconWhite.svg";
 import cityIcon from "../../../../resources/images/CityIconWhite.svg";
 import factoryIcon from "../../../../resources/images/FactoryIconWhite.svg";
 import goldCoinIcon from "../../../../resources/images/GoldCoinIcon.svg";
-import missileSiloIcon from "../../../../resources/images/MissileSiloUnit.png";
+import missileSiloIcon from "../../../../resources/images/MissileSiloIconWhite.svg";
+import portIcon from "../../../../resources/images/PortIcon.svg";
 import samLauncherIcon from "../../../../resources/images/SamLauncherIconWhite.svg";
 import { renderPlayerFlag } from "../../../core/CustomFlag";
 import { EventBus } from "../../../core/EventBus";
@@ -364,18 +364,18 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
                   cityIcon,
                   "player_info_overlay.cities",
                 )}
-                ${this.displayUnitCount(
-                  player,
-                  UnitType.Port,
-                  portIcon,
-                  "player_info_overlay.ports",
-                )}
                 ${this.displayUnitCount(
                   player,
                   UnitType.Factory,
                   factoryIcon,
                   "player_info_overlay.factories",
                 )}
+                ${this.displayUnitCount(
+                  player,
+                  UnitType.Port,
+                  portIcon,
+                  "player_info_overlay.ports",
+                )}
                 ${this.displayUnitCount(
                   player,
                   UnitType.MissileSilo,

src/client/graphics/layers/UnitDisplay.ts

@@ -3,7 +3,8 @@ import { customElement } from "lit/decorators.js";
 import warshipIcon from "../../../../resources/images/BattleshipIconWhite.svg";
 import cityIcon from "../../../../resources/images/CityIconWhite.svg";
 import factoryIcon from "../../../../resources/images/FactoryIconWhite.svg";
-import missileSiloIcon from "../../../../resources/images/MissileSiloUnit.png";
+import mirvIcon from "../../../../resources/images/MIRVIcon.svg";
+import missileSiloIcon from "../../../../resources/images/MissileSiloIconWhite.svg";
 import hydrogenBombIcon from "../../../../resources/images/MushroomCloudIconWhite.svg";
 import atomBombIcon from "../../../../resources/images/NukeIconWhite.svg";
 import portIcon from "../../../../resources/images/PortIcon.svg";
@@ -59,7 +60,8 @@ export class UnitDisplay extends LitElement implements Layer {
       config.isUnitDisabled(UnitType.SAMLauncher) &&
       config.isUnitDisabled(UnitType.Warship) &&
       config.isUnitDisabled(UnitType.AtomBomb) &&
-      config.isUnitDisabled(UnitType.HydrogenBomb);
+      config.isUnitDisabled(UnitType.HydrogenBomb) &&
+      config.isUnitDisabled(UnitType.MIRV);
     this.requestUpdate();
   }
 
@@ -78,6 +80,7 @@ export class UnitDisplay extends LitElement implements Layer {
     switch (item) {
       case UnitType.AtomBomb:
       case UnitType.HydrogenBomb:
+      case UnitType.MIRV:
         return (
           this.cost(item) <= (player?.gold() ?? 0n) &&
           (player?.units(UnitType.MissileSilo).length ?? 0) > 0
@@ -174,26 +177,33 @@ export class UnitDisplay extends LitElement implements Layer {
         </div>
         <div class="bg-gray-800/70 backdrop-blur-sm rounded-lg p-0.5 w-fit">
           <div class="grid grid-rows-1 auto-cols-max grid-flow-col gap-1">
+            ${this.renderUnitItem(
+              warshipIcon,
+              this._warships,
+              UnitType.Warship,
+              "warship",
+              this.keybinds["buildWarship"]?.key ?? "7",
+            )}
             ${this.renderUnitItem(
               atomBombIcon,
               null,
               UnitType.AtomBomb,
               "atom_bomb",
-              this.keybinds["buildAtomBomb"]?.key ?? "7",
+              this.keybinds["buildAtomBomb"]?.key ?? "8",
             )}
             ${this.renderUnitItem(
               hydrogenBombIcon,
               null,
               UnitType.HydrogenBomb,
               "hydrogen_bomb",
-              this.keybinds["buildHydrogenBomb"]?.key ?? "8",
+              this.keybinds["buildHydrogenBomb"]?.key ?? "9",
             )}
             ${this.renderUnitItem(
-              warshipIcon,
-              this._warships,
-              UnitType.Warship,
-              "warship",
-              this.keybinds["buildWarship"]?.key ?? "9",
+              mirvIcon,
+              null,
+              UnitType.MIRV,
+              "mirv",
+              this.keybinds["buildMIRV"]?.key ?? "0",
             )}
           </div>
         </div>