Confirm alliance break ⚠️ (#3033)

## Description:

People accidentally clicked the betray button because it's at the same
position as the ally button.
So let's add a small confirmation step.


https://github.com/user-attachments/assets/754f2d33-7419-42fc-a732-197c3107236e

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

FloPinguin

tests/radialMenuElements.test.ts

@@ -75,6 +75,12 @@ const makeParams = (opts?: Partial<MenuElementParams>): MenuElementParams => {
 const findAllyBreak = (items: any[]) =>
   items.find((i) => i && i.id === "ally_break");
 
+const findAllyBreakConfirm = (items: any[]) =>
+  items.find((i) => i && i.id === "ally_break_confirm");
+
+const findAllyBreakCancel = (items: any[]) =>
+  items.find((i) => i && i.id === "ally_break_cancel");
+
 describe("RadialMenuElements ally break", () => {
   test("shows break option with correct color when allied", () => {
     const params = makeParams();
@@ -85,12 +91,29 @@ describe("RadialMenuElements ally break", () => {
     expect(ally.color).toBe(COLORS.breakAlly);
   });
 
-  test("action calls handleBreakAlliance and closes menu", () => {
+  test("break option opens confirmation submenu", () => {
     const params = makeParams();
     const items = rootMenuElement.subMenu!(params);
     const ally = findAllyBreak(items)!;
 
-    ally.action!(params);
+    expect(ally.subMenu).toBeDefined();
+    const subMenuItems = ally.subMenu!(params);
+    expect(subMenuItems.length).toBe(2);
+
+    const confirmItem = findAllyBreakConfirm(subMenuItems);
+    const cancelItem = findAllyBreakCancel(subMenuItems);
+    expect(confirmItem).toBeTruthy();
+    expect(cancelItem).toBeTruthy();
+  });
+
+  test("confirm action calls handleBreakAlliance and closes menu", () => {
+    const params = makeParams();
+    const items = rootMenuElement.subMenu!(params);
+    const ally = findAllyBreak(items)!;
+    const subMenuItems = ally.subMenu!(params);
+    const confirmItem = findAllyBreakConfirm(subMenuItems)!;
+
+    confirmItem.action!(params);
 
     expect(params.playerActionHandler.handleBreakAlliance).toHaveBeenCalledWith(
       params.myPlayer,
@@ -98,4 +121,19 @@ describe("RadialMenuElements ally break", () => {
     );
     expect(params.closeMenu).toHaveBeenCalled();
   });
+
+  test("cancel action closes menu without breaking alliance", () => {
+    const params = makeParams();
+    const items = rootMenuElement.subMenu!(params);
+    const ally = findAllyBreak(items)!;
+    const subMenuItems = ally.subMenu!(params);
+    const cancelItem = findAllyBreakCancel(subMenuItems)!;
+
+    cancelItem.action!(params);
+
+    expect(
+      params.playerActionHandler.handleBreakAlliance,
+    ).not.toHaveBeenCalled();
+    expect(params.closeMenu).toHaveBeenCalled();
+  });
 });