fix: radial build sub-menu items stay grayed out after gaining enough gold (#3415)

## Description:

canBuildOrUpgrade was captured once at sub-menu open time, so
disabled/color
never updated while the menu was open. Evaluate canBuildOrUpgrade
dynamically
inside the disabled and color callbacks so the menu reflects current
gold on
each refresh tick.


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

evan

src/client/graphics/layers/RadialMenuElements.ts

@@ -419,18 +419,19 @@ function createMenuElements(
           : !BuildableAttacks.has(item.unitType)),
     )
     .map((item: BuildItemDisplay) => {
-      const canBuildOrUpgrade = params.buildMenu.canBuildOrUpgrade(item);
       return {
         id: `${elementIdPrefix}_${item.unitType}`,
         name: item.key
           ? item.key.replace("unit_type.", "")
           : item.unitType.toString(),
-        disabled: () => !canBuildOrUpgrade,
-        color: canBuildOrUpgrade
-          ? filterType === "attack"
-            ? COLORS.attack
-            : COLORS.building
-          : undefined,
+        disabled: (p: MenuElementParams) =>
+          !p.buildMenu.canBuildOrUpgrade(item),
+        color: (p: MenuElementParams) =>
+          p.buildMenu.canBuildOrUpgrade(item)
+            ? filterType === "attack"
+              ? COLORS.attack
+              : COLORS.building
+            : COLORS.building,
         icon: item.icon,
         tooltipItems: [
           { text: translateText(item.key ?? ""), className: "title" },
@@ -455,7 +456,7 @@ function createMenuElements(
           if (buildableUnit === undefined) {
             return;
           }
-          if (canBuildOrUpgrade) {
+          if (params.buildMenu.canBuildOrUpgrade(item)) {
             params.buildMenu.sendBuildOrUpgrade(buildableUnit, params.tile);
           }
           params.closeMenu();

tests/client/graphics/RadialMenuElements.test.ts

@@ -557,7 +557,11 @@ describe("RadialMenuElements", () => {
       const subMenu = buildMenuElement.subMenu!(mockParams);
       const cityElement = subMenu.find((item) => item.id === "build_City");
 
-      expect(cityElement!.color).toBe(COLORS.building);
+      expect(
+        (cityElement!.color as (params: MenuElementParams) => string)(
+          mockParams,
+        ),
+      ).toBe(COLORS.building);
     });
 
     it("should use correct colors for attack elements", () => {
@@ -572,16 +576,24 @@ describe("RadialMenuElements", () => {
         (item) => item.id === "attack_Atom Bomb",
       );
 
-      expect(atomBombElement!.color).toBe(COLORS.attack);
+      expect(
+        (atomBombElement!.color as (params: MenuElementParams) => string)(
+          mockParams,
+        ),
+      ).toBe(COLORS.attack);
     });
 
-    it("should not set color when element is disabled", () => {
+    it("should use disabled color when element is disabled", () => {
       mockBuildMenu.canBuildOrUpgrade = vi.fn(() => false);
 
       const subMenu = buildMenuElement.subMenu!(mockParams);
       const cityElement = subMenu.find((item) => item.id === "build_City");
 
-      expect(cityElement!.color).toBeUndefined();
+      expect(
+        (cityElement!.color as (params: MenuElementParams) => string)(
+          mockParams,
+        ),
+      ).toBe(COLORS.building);
     });
   });