[UI] Added count on items of the construction menu (#297)

As suggested on the discord server
[here](https://discordapp.com/channels/1284581928254701718/1349545887801806869),
I've added the count of building and permanent units on the construction
menu.
It's included in each button, and follows the background colour of the
button on hover & disabled (see the screen below)

![In Game
Render](https://github.com/user-attachments/assets/b753a494-e9cc-49e3-90b9-f3fce7d8d8b4)

src/client/graphics/layers/BuildMenu.ts

@@ -27,6 +27,7 @@ interface BuildItemDisplay {
   unitType: UnitType;
   icon: string;
   description?: string;
+  countable?: boolean;
 }
 
 const buildTable: BuildItemDisplay[][] = [
@@ -35,47 +36,56 @@ const buildTable: BuildItemDisplay[][] = [
       unitType: UnitType.AtomBomb,
       icon: atomBombIcon,
       description: "Small explosion",
+      countable: false,
     },
     {
       unitType: UnitType.MIRV,
       icon: mirvIcon,
       description: "Huge explosion, only targets selected player",
+      countable: false,
     },
     {
       unitType: UnitType.HydrogenBomb,
       icon: hydrogenBombIcon,
       description: "Large explosion",
+      countable: false,
     },
     {
       unitType: UnitType.Warship,
       icon: warshipIcon,
       description: "Captures trade ships, destroys ships and boats",
+      countable: true,
     },
     {
       unitType: UnitType.Port,
       icon: portIcon,
       description: "Sends trade ships to allies to generate gold",
+      countable: true,
     },
     {
       unitType: UnitType.MissileSilo,
       icon: missileSiloIcon,
       description: "Used to launch nukes",
+      countable: true,
     },
     // needs new icon
     {
       unitType: UnitType.SAMLauncher,
       icon: shieldIcon,
       description: "Defends against incoming nukes",
+      countable: true,
     },
     {
       unitType: UnitType.DefensePost,
       icon: shieldIcon,
       description: "Increase defenses of nearby borders",
+      countable: true,
     },
     {
       unitType: UnitType.City,
       icon: cityIcon,
       description: "Increase max population",
+      countable: true,
     },
   ],
 ];
@@ -124,6 +134,7 @@ export class BuildMenu extends LitElement implements Layer {
       width: 100%;
     }
     .build-button {
+      position: relative;
       width: 120px;
       height: 140px;
       border: 2px solid #444;
@@ -177,6 +188,37 @@ export class BuildMenu extends LitElement implements Layer {
     .hidden {
       display: none !important;
     }
+    .build-count-chip {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      background-color: #2c2c2c;
+      color: white;
+      padding: 2px 10px;
+      border-radius: 10000px;
+      transition: all 0.3s ease;
+      font-size: 12px;
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      border: 1px solid #444;
+    }
+    .build-button:not(:disabled):hover > .build-count-chip {
+      background-color: #3a3a3a;
+      border-color: #666;
+    }
+    .build-button:not(:disabled):active > .build-count-chip {
+      background-color: #4a4a4a;
+    }
+    .build-button:disabled > .build-count-chip {
+      background-color: #1a1a1a;
+      border-color: #333;
+      cursor: not-allowed;
+    }
+    .build-count {
+      font-weight: bold;
+      font-size: 14px;
+    }
 
     @media (max-width: 768px) {
       .build-menu {
@@ -201,6 +243,13 @@ export class BuildMenu extends LitElement implements Layer {
       .build-cost {
         font-size: 11px;
       }
+      .build-count {
+        font-weight: bold;
+        font-size: 10px;
+      }
+      .build-count-chip {
+        padding: 1px 5px;
+      }
     }
 
     @media (max-width: 480px) {
@@ -225,6 +274,13 @@ export class BuildMenu extends LitElement implements Layer {
       .build-cost {
         font-size: 9px;
       }
+      .build-count {
+        font-weight: bold;
+        font-size: 8px;
+      }
+      .build-count-chip {
+        padding: 0 3px;
+      }
       .build-button img {
         width: 24px;
         height: 24px;
@@ -261,6 +317,15 @@ export class BuildMenu extends LitElement implements Layer {
     return 0;
   }
 
+  private count(item: BuildItemDisplay): string {
+    const player = this.game?.myPlayer();
+    if (!player) {
+      return "?";
+    }
+
+    return player.units(item.unitType).length.toString();
+  }
+
   public onBuildSelected = (item: BuildItemDisplay) => {
     this.eventBus.emit(
       new BuildUnitIntentEvent(
@@ -308,6 +373,11 @@ export class BuildMenu extends LitElement implements Layer {
                         style="vertical-align: middle;"
                       />
                     </span>
+                    ${item.countable
+                      ? html`<div class="build-count-chip">
+                          <span class="build-count">${this.count(item)}</span>
+                        </div>`
+                      : ""}
                   </button>
                 `,
               )}