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