Add button for remove building (#1609)

## Description:

Added a red delete button with trash can icon to the right-click radial
menu that allows players to voluntarily delete their own units.

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

Kipstz

<img width="286" height="209" alt="image"
src="https://github.com/user-attachments/assets/85142be3-2aa5-4c84-ab30-0c68289c8f85"
/>

---------

Co-authored-by: Drills Kibo <59177241+drillskibo@users.noreply.github.com>

src/client/Transport.ts

@@ -132,6 +132,10 @@ export class SendEmbargoIntentEvent implements GameEvent {
   ) {}
 }
 
+export class SendDeleteUnitIntentEvent implements GameEvent {
+  constructor(public readonly unitId: number) {}
+}
+
 export class CancelAttackIntentEvent implements GameEvent {
   constructor(public readonly attackID: string) {}
 }
@@ -237,6 +241,11 @@ export class Transport {
     this.eventBus.on(MoveWarshipIntentEvent, (e) => {
       this.onMoveWarshipEvent(e);
     });
+
+    this.eventBus.on(SendDeleteUnitIntentEvent, (e) =>
+      this.onSendDeleteUnitIntent(e),
+    );
+
     this.eventBus.on(SendKickPlayerIntentEvent, (e) =>
       this.onSendKickPlayerIntent(e),
     );
@@ -598,6 +607,14 @@ export class Transport {
     });
   }
 
+  private onSendDeleteUnitIntent(event: SendDeleteUnitIntentEvent) {
+    this.sendIntent({
+      type: "delete_unit",
+      clientID: this.lobbyConfig.clientID,
+      unitId: event.unitId,
+    });
+  }
+
   private onSendKickPlayerIntent(event: SendKickPlayerIntentEvent) {
     this.sendIntent({
       type: "kick_player",

src/client/graphics/layers/MainRadialMenu.ts

@@ -163,10 +163,6 @@ export class MainRadialMenu extends LitElement implements Layer {
     return this.radialMenu.shouldTransform();
   }
 
-  redraw() {
-    // No redraw implementation needed
-  }
-
   closeMenu() {
     if (this.radialMenu.isMenuVisible()) {
       this.radialMenu.hideRadialMenu();

src/client/graphics/layers/PlayerActionHandler.ts

@@ -7,6 +7,7 @@ import {
   SendAttackIntentEvent,
   SendBoatAttackIntentEvent,
   SendBreakAllianceIntentEvent,
+  SendDeleteUnitIntentEvent,
   SendDonateGoldIntentEvent,
   SendDonateTroopsIntentEvent,
   SendEmbargoIntentEvent,
@@ -99,4 +100,8 @@ export class PlayerActionHandler {
   handleQuickChat(recipient: PlayerView, chatKey: string, params: any = {}) {
     this.eventBus.emit(new SendQuickChatEvent(recipient, chatKey, params));
   }
+
+  handleDeleteUnit(unitId: number) {
+    this.eventBus.emit(new SendDeleteUnitIntentEvent(unitId));
+  }
 }

src/client/graphics/layers/RadialMenu.ts

@@ -2,11 +2,13 @@ import * as d3 from "d3";
 import backIcon from "../../../../resources/images/BackIconWhite.svg";
 import { EventBus, GameEvent } from "../../../core/EventBus";
 import { CloseViewEvent } from "../../InputHandler";
+import { translateText } from "../../Utils";
 import { Layer } from "./Layer";
 import {
   CenterButtonElement,
   MenuElement,
   MenuElementParams,
+  TooltipKey,
 } from "./RadialMenuElements";
 
 export class CloseRadialMenuEvent implements GameEvent {
@@ -386,6 +388,8 @@ export class RadialMenu implements Layer {
       const disabled = this.params === null || d.data.disabled(this.params);
       if (d.data.tooltipItems && d.data.tooltipItems.length > 0) {
         this.showTooltip(d.data.tooltipItems);
+      } else if (d.data.tooltipKeys && d.data.tooltipKeys.length > 0) {
+        this.showTooltip(d.data.tooltipKeys);
       }
       if (
         disabled ||
@@ -1008,7 +1012,7 @@ export class RadialMenu implements Layer {
     return timeSinceHide >= this.reopenCooldownMs;
   }
 
-  private showTooltip(items: TooltipItem[]) {
+  private showTooltip(items: TooltipItem[] | TooltipKey[]) {
     if (!this.tooltipElement) return;
 
     this.tooltipElement.innerHTML = "";
@@ -1016,7 +1020,13 @@ export class RadialMenu implements Layer {
     for (const item of items) {
       const div = document.createElement("div");
       div.className = item.className;
-      div.textContent = item.text;
+
+      if ("key" in item) {
+        div.textContent = translateText(item.key, item.params);
+      } else {
+        div.textContent = item.text;
+      }
+
       this.tooltipElement.appendChild(div);
     }
 

src/client/graphics/layers/RadialMenuElements.ts

@@ -22,6 +22,7 @@ import infoIcon from "../../../../resources/images/InfoIcon.svg";
 import swordIcon from "../../../../resources/images/SwordIconWhite.svg";
 import targetIcon from "../../../../resources/images/TargetIconWhite.svg";
 import traitorIcon from "../../../../resources/images/TraitorIconWhite.svg";
+import xIcon from "../../../../resources/images/XIcon.svg";
 import { EventBus } from "../../../core/EventBus";
 
 export interface MenuElementParams {
@@ -48,12 +49,19 @@ export interface MenuElement {
   text?: string;
   fontSize?: string;
   tooltipItems?: TooltipItem[];
+  tooltipKeys?: TooltipKey[];
 
   disabled: (params: MenuElementParams) => boolean;
   action?: (params: MenuElementParams) => void; // For leaf items that perform actions
   subMenu?: (params: MenuElementParams) => MenuElement[]; // For non-leaf items that open submenus
 }
 
+export interface TooltipKey {
+  key: string;
+  className: string;
+  params?: Record<string, string | number>;
+}
+
 export interface CenterButtonElement {
   disabled: (params: MenuElementParams) => boolean;
   action: (params: MenuElementParams) => void;
@@ -65,6 +73,7 @@ export const COLORS = {
   boat: "#3f6ab1",
   ally: "#53ac75",
   breakAlly: "#c74848",
+  delete: "#ff0000",
   info: "#64748B",
   target: "#ff0000",
   attack: "#ff0000",
@@ -94,6 +103,7 @@ export enum Slot {
   Attack = "attack",
   Ally = "ally",
   Back = "back",
+  Delete = "delete",
 }
 
 const infoChatElement: MenuElement = {
@@ -404,6 +414,76 @@ export const attackMenuElement: MenuElement = {
   },
 };
 
+export const deleteUnitElement: MenuElement = {
+  id: Slot.Delete,
+  name: "delete",
+  disabled: (params: MenuElementParams) => {
+    const tileOwner = params.game.owner(params.tile);
+    const isLand = params.game.isLand(params.tile);
+
+    if (!tileOwner.isPlayer() || tileOwner.id() !== params.myPlayer.id()) {
+      return true;
+    }
+
+    if (!isLand) {
+      return true;
+    }
+
+    if (params.game.inSpawnPhase()) {
+      return true;
+    }
+
+    if (!params.myPlayer.canDeleteUnit()) {
+      return true;
+    }
+
+    const DELETE_SELECTION_RADIUS = 5;
+    const myUnits = params.myPlayer
+      .units()
+      .filter(
+        (unit) =>
+          params.game.manhattanDist(unit.tile(), params.tile) <=
+          DELETE_SELECTION_RADIUS,
+      );
+
+    return myUnits.length === 0;
+  },
+  icon: xIcon,
+  color: COLORS.delete,
+  tooltipKeys: [
+    {
+      key: "radial_menu.delete_unit_title",
+      className: "title",
+    },
+    {
+      key: "radial_menu.delete_unit_description",
+      className: "description",
+    },
+  ],
+  action: (params: MenuElementParams) => {
+    const DELETE_SELECTION_RADIUS = 5;
+    const myUnits = params.myPlayer
+      .units()
+      .filter(
+        (unit) =>
+          params.game.manhattanDist(unit.tile(), params.tile) <=
+          DELETE_SELECTION_RADIUS,
+      );
+
+    if (myUnits.length > 0) {
+      myUnits.sort(
+        (a, b) =>
+          params.game.manhattanDist(a.tile(), params.tile) -
+          params.game.manhattanDist(b.tile(), params.tile),
+      );
+
+      params.playerActionHandler.handleDeleteUnit(myUnits[0].id());
+    }
+
+    params.closeMenu();
+  },
+};
+
 export const buildMenuElement: MenuElement = {
   id: Slot.Build,
   name: "build",
@@ -497,6 +577,7 @@ export const rootMenuElement: MenuElement = {
 
     if (isOwnTerritory) {
       menuItems.push(buildMenuElement);
+      menuItems.push(deleteUnitElement);
     } else {
       menuItems.push(attackMenuElement);
     }