Add deletion duration and indicators (#2216)

## Description:

Adds a timer before self deleting units
Adds a loading bar under deleting units
Adds a timer in radial menu for clarity purposes


![deletecd](https://github.com/user-attachments/assets/613bf742-ef90-42b5-a258-b928daae6aaa)

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

Mr.Box

---------

Co-authored-by: Evan <evanpelle@gmail.com>

src/client/graphics/layers/RadialMenu.ts

@@ -550,6 +550,20 @@ export class RadialMenu implements Layer {
             .attr("x", arc.centroid(d)[0] - this.config.iconSize / 2)
             .attr("y", arc.centroid(d)[1] - this.config.iconSize / 2)
             .attr("opacity", disabled ? 0.5 : 1);
+
+          if (this.params && d.data.cooldown?.(this.params)) {
+            const cooldown = Math.ceil(d.data.cooldown?.(this.params));
+            content
+              .append("text")
+              .attr("class", `cooldown-text`)
+              .text(cooldown + "s")
+              .attr("fill", "white")
+              .attr("opacity", disabled ? 0.5 : 1)
+              .attr("font-size", "14px")
+              .attr("font-weight", "bold")
+              .attr("x", arc.centroid(d)[0] - this.config.iconSize / 4)
+              .attr("y", arc.centroid(d)[1] + this.config.iconSize / 2 + 7);
+          }
         }
 
         this.menuIcons.set(contentId, content as any);
@@ -994,6 +1008,17 @@ export class RadialMenu implements Layer {
           if (!imageElement.empty()) {
             imageElement.attr("opacity", disabled ? 0.5 : 1);
           }
+
+          // Update cooldown text if applicable
+          const cooldownElement = icon.select(".cooldown-text");
+          if (this.params && !cooldownElement.empty() && item.cooldown) {
+            const cooldown = Math.ceil(item.cooldown(this.params));
+            if (cooldown <= 0) {
+              cooldownElement.remove();
+            } else {
+              cooldownElement.text(cooldown + "s");
+            }
+          }
         }
       }
     });

src/client/graphics/layers/RadialMenuElements.ts

@@ -51,6 +51,7 @@ export interface MenuElement {
   tooltipItems?: TooltipItem[];
   tooltipKeys?: TooltipKey[];
 
+  cooldown?: (params: MenuElementParams) => number;
   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
@@ -425,6 +426,7 @@ export const attackMenuElement: MenuElement = {
 export const deleteUnitElement: MenuElement = {
   id: Slot.Delete,
   name: "delete",
+  cooldown: (params: MenuElementParams) => params.myPlayer.deleteUnitCooldown(),
   disabled: (params: MenuElementParams) => {
     const tileOwner = params.game.owner(params.tile);
     const isLand = params.game.isLand(params.tile);
@@ -441,7 +443,7 @@ export const deleteUnitElement: MenuElement = {
       return true;
     }
 
-    if (!params.myPlayer.canDeleteUnit()) {
+    if (params.myPlayer.deleteUnitCooldown() > 0) {
       return true;
     }
 
@@ -450,8 +452,10 @@ export const deleteUnitElement: MenuElement = {
       .units()
       .filter(
         (unit) =>
+          unit.constructionType() === undefined &&
+          unit.markedForDeletion() === false &&
           params.game.manhattanDist(unit.tile(), params.tile) <=
-          DELETE_SELECTION_RADIUS,
+            DELETE_SELECTION_RADIUS,
       );
 
     return myUnits.length === 0;

src/client/graphics/layers/StructureDrawingUtils.ts

@@ -99,10 +99,7 @@ export class SpriteFactory {
 
   private invalidateTextureCache(unitType: UnitType) {
     for (const key of Array.from(this.textureCache.keys())) {
-      if (
-        key.endsWith(`-${unitType}-icon`) ||
-        key === `construction-${unitType}-icon`
-      ) {
+      if (key.includes(`-${unitType}`)) {
         this.textureCache.delete(key);
       }
     }
@@ -115,7 +112,13 @@ export class SpriteFactory {
     structureType: UnitType,
   ): PIXI.Container {
     const parentContainer = new PIXI.Container();
-    const texture = this.createTexture(structureType, player, false, true);
+    const texture = this.createTexture(
+      structureType,
+      player,
+      false,
+      false,
+      true,
+    );
     const sprite = new PIXI.Sprite(texture);
     sprite.anchor.set(0.5);
     sprite.alpha = 0.5;
@@ -139,6 +142,7 @@ export class SpriteFactory {
     const worldPos = new Cell(this.game.x(tile), this.game.y(tile));
     const screenPos = this.transformHandler.worldToScreenCoordinates(worldPos);
 
+    const isMarkedForDeletion = unit.markedForDeletion() !== false;
     const isConstruction = unit.type() === UnitType.Construction;
     const constructionType = unit.constructionType();
     const structureType = isConstruction ? constructionType! : unit.type();
@@ -156,6 +160,7 @@ export class SpriteFactory {
         structureType,
         unit.owner(),
         isConstruction,
+        isMarkedForDeletion,
         type === "icon",
       );
       const sprite = new PIXI.Sprite(texture);
@@ -202,19 +207,30 @@ export class SpriteFactory {
     type: UnitType,
     owner: PlayerView,
     isConstruction: boolean,
+    isMarkedForDeletion: boolean,
     renderIcon: boolean,
   ): PIXI.Texture {
-    const cacheKey = isConstruction
-      ? `construction-${type}` + (renderIcon ? "-icon" : "")
-      : `${this.theme.territoryColor(owner).toRgbString()}-${type}` +
-        (renderIcon ? "-icon" : "");
+    const cacheKeyBase = isConstruction
+      ? `construction-${type}`
+      : `${this.theme.territoryColor(owner).toRgbString()}-${type}`;
+    const cacheKey =
+      cacheKeyBase +
+      (renderIcon ? "-icon" : "") +
+      (isMarkedForDeletion ? "-deleted" : "");
 
     if (this.textureCache.has(cacheKey)) {
       return this.textureCache.get(cacheKey)!;
     }
     const shape = STRUCTURE_SHAPES[type];
     const texture = shape
-      ? this.createIcon(owner, type, isConstruction, shape, renderIcon)
+      ? this.createIcon(
+          owner,
+          type,
+          isConstruction,
+          isMarkedForDeletion,
+          shape,
+          renderIcon,
+        )
       : PIXI.Texture.EMPTY;
     this.textureCache.set(cacheKey, texture);
     return texture;
@@ -224,6 +240,7 @@ export class SpriteFactory {
     owner: PlayerView,
     structureType: UnitType,
     isConstruction: boolean,
+    isMarkedForDeletion: boolean,
     shape: string,
     renderIcon: boolean,
   ): PIXI.Texture {
@@ -370,11 +387,8 @@ export class SpriteFactory {
     }
 
     const structureInfo = this.structuresInfos.get(structureType);
-    if (!structureInfo?.image) {
-      return PIXI.Texture.from(structureCanvas);
-    }
 
-    if (renderIcon) {
+    if (structureInfo?.image && renderIcon) {
       const SHAPE_OFFSETS = {
         triangle: [6, 11],
         square: [5, 5],
@@ -390,6 +404,22 @@ export class SpriteFactory {
         offsetY,
       );
     }
+
+    if (isMarkedForDeletion) {
+      context.save();
+      context.strokeStyle = "rgba(255, 64, 64, 0.95)";
+      context.lineWidth = Math.max(2, Math.round(iconSize * 0.12));
+      context.lineCap = "round";
+      const padding = Math.max(2, iconSize * 0.12);
+      context.beginPath();
+      context.moveTo(padding, padding);
+      context.lineTo(iconSize - padding, iconSize - padding);
+      context.moveTo(iconSize - padding, padding);
+      context.lineTo(padding, iconSize - padding);
+      context.stroke();
+      context.restore();
+    }
+
     return PIXI.Texture.from(structureCanvas);
   }
 

src/client/graphics/layers/StructureIconsLayer.ts

@@ -417,6 +417,7 @@ export class StructureIconsLayer implements Layer {
       const render = this.findRenderByUnit(unitView);
       if (render) {
         this.checkForConstructionState(render, unitView);
+        this.checkForDeletionState(render, unitView);
         this.checkForOwnershipChange(render, unitView);
         this.checkForLevelChange(render, unitView);
       }
@@ -466,6 +467,16 @@ export class StructureIconsLayer implements Layer {
     }
   }
 
+  private checkForDeletionState(render: StructureRenderInfo, unit: UnitView) {
+    if (unit.markedForDeletion() !== false) {
+      render.iconContainer?.destroy();
+      render.dotContainer?.destroy();
+      render.iconContainer = this.createIconSprite(unit);
+      render.dotContainer = this.createDotSprite(unit);
+      this.modifyVisibility(render);
+    }
+  }
+
   private checkForConstructionState(
     render: StructureRenderInfo,
     unit: UnitView,

src/client/graphics/layers/UILayer.ts

@@ -117,11 +117,18 @@ export class UILayer implements Layer {
         this.drawHealthBar(unit);
         break;
       }
+      case UnitType.City:
+      case UnitType.Factory:
+      case UnitType.DefensePost:
+      case UnitType.Port:
       case UnitType.MissileSilo:
-        this.createLoadingBar(unit);
-        break;
       case UnitType.SAMLauncher:
-        this.createLoadingBar(unit);
+        if (
+          unit.markedForDeletion() !== false ||
+          unit.missileReadinesss() < 1
+        ) {
+          this.createLoadingBar(unit);
+        }
         break;
       default:
         return;
@@ -329,12 +336,28 @@ export class UILayer implements Layer {
       }
       case UnitType.MissileSilo:
       case UnitType.SAMLauncher:
-        return unit.missileReadinesss();
+        return !unit.markedForDeletion()
+          ? unit.missileReadinesss()
+          : this.deletionProgress(this.game, unit);
+      case UnitType.City:
+      case UnitType.Factory:
+      case UnitType.Port:
+      case UnitType.DefensePost:
+        return this.deletionProgress(this.game, unit);
       default:
         return 1;
     }
   }
 
+  private deletionProgress(game: GameView, unit: UnitView): number {
+    const deleteAt = unit.markedForDeletion();
+    if (deleteAt === false) return 1;
+    return Math.max(
+      0,
+      (deleteAt - game.ticks()) / game.config().deletionMarkDuration(),
+    );
+  }
+
   public createLoadingBar(unit: UnitView) {
     if (!this.context) {
       return;