move ally button back to root radial (#1575)

## Description:

The ally slot was removed in v24, add it back

## 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
- [x] I have read and accepted the CLA agreement (only required once).

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

evan

src/client/graphics/layers/MainRadialMenu.ts

@@ -17,7 +17,7 @@ import {
   centerButtonElement,
   COLORS,
   MenuElementParams,
-  rootMenuItems,
+  rootMenuElement,
 } from "./RadialMenuElements";
 
 import swordIcon from "../../../../resources/images/SwordIconWhite.svg";
@@ -56,7 +56,12 @@ export class MainRadialMenu extends LitElement implements Layer {
       `,
     };
 
-    this.radialMenu = new RadialMenu(this.eventBus, menuConfig);
+    this.radialMenu = new RadialMenu(
+      this.eventBus,
+      rootMenuElement,
+      centerButtonElement,
+      menuConfig,
+    );
 
     this.playerActionHandler = new PlayerActionHandler(
       this.eventBus,
@@ -64,13 +69,10 @@ export class MainRadialMenu extends LitElement implements Layer {
     );
 
     this.chatIntegration = new ChatIntegration(this.game, this.eventBus);
-
-    this.radialMenu.setRootMenuItems(rootMenuItems, centerButtonElement);
   }
 
   init() {
     this.radialMenu.init();
-    this.radialMenu.setRootMenuItems(rootMenuItems, centerButtonElement);
     this.eventBus.on(ContextMenuEvent, (event) => {
       const worldCoords = this.transformHandler.screenToWorldCoordinates(
         event.x,

src/client/graphics/layers/RadialMenu.ts

@@ -44,13 +44,11 @@ export class RadialMenu implements Layer {
   private currentLevel: number = 0; // Current menu level (0 = main menu, 1 = submenu, etc.)
   private menuStack: MenuElement[][] = []; // Stack to track menu navigation history
   private currentMenuItems: MenuElement[] = []; // Current active menu items (changes based on level)
-  private rootMenuItems: MenuElement[] = []; // Store the original root menu items
 
   private readonly config: RequiredRadialMenuConfig;
   private readonly backIconSize: number;
 
   private centerButtonState: CenterButtonState = "default";
-  private centerButtonElement: CenterButtonElement | null = null;
 
   private isTransitioning: boolean = false;
   private lastHideTime: number = 0;
@@ -79,6 +77,8 @@ export class RadialMenu implements Layer {
 
   constructor(
     private eventBus: EventBus,
+    private rootMenu: MenuElement,
+    private centerButtonElement: CenterButtonElement,
     config: RadialMenuConfig = {},
   ) {
     this.config = {
@@ -904,18 +904,6 @@ export class RadialMenu implements Layer {
     return this.currentLevel;
   }
 
-  public setRootMenuItems(
-    items: MenuElement[],
-    centerButton: CenterButtonElement,
-  ) {
-    this.currentMenuItems = [...items];
-    this.rootMenuItems = [...items];
-    this.centerButtonElement = centerButton;
-    if (this.isVisible) {
-      this.refreshMenu();
-    }
-  }
-
   public setParams(params: MenuElementParams) {
     this.params = params;
   }
@@ -928,7 +916,7 @@ export class RadialMenu implements Layer {
     this.currentLevel = 0;
     this.menuStack = [];
 
-    this.currentMenuItems = [...this.rootMenuItems];
+    this.currentMenuItems = this.rootMenu.subMenu!(this.params!);
 
     this.navigationInProgress = false;
 

src/client/graphics/layers/RadialMenuElements.ts

@@ -433,8 +433,17 @@ export const centerButtonElement: CenterButtonElement = {
   },
 };
 
-export const rootMenuItems: MenuElement[] = [
-  infoMenuElement,
-  boatMenuElement,
-  buildMenuElement,
-];
+export const rootMenuElement: MenuElement = {
+  id: "root",
+  name: "root",
+  disabled: () => false,
+  icon: infoIcon,
+  color: COLORS.info,
+  subMenu: (params: MenuElementParams) => {
+    let ally = allyRequestElement;
+    if (params.selected?.isAlliedWith(params.myPlayer)) {
+      ally = allyBreakElement;
+    }
+    return [infoMenuElement, boatMenuElement, ally, buildMenuElement];
+  },
+};