upgrade unit when building a unit of same type (#1328)

## Description:

When building a structure in the same location as a nearby structure, it
will update the existing structure instead of creating a new one.

Also fix ctrl+click shortcut to bring up the build menu.

## 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 understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

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

evan

src/client/graphics/layers/BuildMenu.ts

@@ -13,11 +13,27 @@ import missileSiloIcon from "../../../../resources/non-commercial/svg/MissileSil
 import samlauncherIcon from "../../../../resources/non-commercial/svg/SamLauncherIconWhite.svg";
 import { translateText } from "../../../client/Utils";
 import { EventBus } from "../../../core/EventBus";
-import { Cell, Gold, PlayerActions, UnitType } from "../../../core/game/Game";
+import {
+  BuildableUnit,
+  Cell,
+  Gold,
+  PlayerActions,
+  UnitType,
+} from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { GameView } from "../../../core/game/GameView";
-import { BuildUnitIntentEvent } from "../../Transport";
+import {
+  CloseViewEvent,
+  MouseDownEvent,
+  ShowBuildMenuEvent,
+  ShowEmojiMenuEvent,
+} from "../../InputHandler";
+import {
+  BuildUnitIntentEvent,
+  SendUpgradeStructureIntentEvent,
+} from "../../Transport";
 import { renderNumber } from "../../Utils";
+import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
 export interface BuildItemDisplay {
@@ -113,6 +129,30 @@ export class BuildMenu extends LitElement implements Layer {
   private clickedTile: TileRef;
   public playerActions: PlayerActions | null;
   private filteredBuildTable: BuildItemDisplay[][] = buildTable;
+  public transformHandler: TransformHandler;
+
+  init() {
+    this.eventBus.on(ShowBuildMenuEvent, (e) => {
+      const clickedCell = this.transformHandler.screenToWorldCoordinates(
+        e.x,
+        e.y,
+      );
+      if (clickedCell === null) {
+        return;
+      }
+      if (!this.game.isValidCoord(clickedCell.x, clickedCell.y)) {
+        return;
+      }
+      const tile = this.game.ref(clickedCell.x, clickedCell.y);
+      if (!this.game.myPlayer()?.isAlive()) {
+        return;
+      }
+      this.showMenu(tile);
+    });
+    this.eventBus.on(CloseViewEvent, () => this.hideMenu());
+    this.eventBus.on(ShowEmojiMenuEvent, () => this.hideMenu());
+    this.eventBus.on(MouseDownEvent, () => this.hideMenu());
+  }
 
   tick() {
     if (!this._hidden) {
@@ -312,7 +352,7 @@ export class BuildMenu extends LitElement implements Layer {
   @state()
   private _hidden = true;
 
-  public canBuild(item: BuildItemDisplay): boolean {
+  public canBuildOrUpgrade(item: BuildItemDisplay): boolean {
     if (this.game?.myPlayer() === null || this.playerActions === null) {
       return false;
     }
@@ -321,7 +361,7 @@ export class BuildMenu extends LitElement implements Layer {
     if (unit.length === 0) {
       return false;
     }
-    return unit[0].canBuild !== false;
+    return unit[0].canBuild !== false || unit[0].canUpgrade !== false;
   }
 
   public cost(item: BuildItemDisplay): Gold {
@@ -342,15 +382,27 @@ export class BuildMenu extends LitElement implements Layer {
     return player.units(item.unitType).length.toString();
   }
 
-  public onBuildSelected = (item: BuildItemDisplay) => {
-    this.eventBus.emit(
-      new BuildUnitIntentEvent(
-        item.unitType,
-        new Cell(this.game.x(this.clickedTile), this.game.y(this.clickedTile)),
-      ),
-    );
+  public sendBuildOrUpgrade(buildableUnit: BuildableUnit, tile: TileRef): void {
+    if (buildableUnit === null) {
+      return;
+    }
+    if (buildableUnit.canUpgrade !== false) {
+      this.eventBus.emit(
+        new SendUpgradeStructureIntentEvent(
+          buildableUnit.canUpgrade,
+          buildableUnit.type,
+        ),
+      );
+    } else if (buildableUnit.canBuild) {
+      this.eventBus.emit(
+        new BuildUnitIntentEvent(
+          buildableUnit.type,
+          new Cell(this.game.x(tile), this.game.y(tile)),
+        ),
+      );
+    }
     this.hideMenu();
-  };
+  }
 
   render() {
     return html`
@@ -361,13 +413,23 @@ export class BuildMenu extends LitElement implements Layer {
         ${this.filteredBuildTable.map(
           (row) => html`
             <div class="build-row">
-              ${row.map(
-                (item) => html`
+              ${row.map((item) => {
+                const buildableUnit = this.playerActions?.buildableUnits.find(
+                  (bu) => bu.type === item.unitType,
+                );
+                if (buildableUnit === undefined) {
+                  return html``;
+                }
+                const enabled =
+                  buildableUnit.canBuild !== false ||
+                  buildableUnit.canUpgrade !== false;
+                return html`
                   <button
                     class="build-button"
-                    @click=${() => this.onBuildSelected(item)}
-                    ?disabled=${!this.canBuild(item)}
-                    title=${!this.canBuild(item)
+                    @click=${() =>
+                      this.sendBuildOrUpgrade(buildableUnit, this.clickedTile)}
+                    ?disabled=${!enabled}
+                    title=${!enabled
                       ? translateText("build_menu.not_enough_money")
                       : ""}
                   >
@@ -402,8 +464,8 @@ export class BuildMenu extends LitElement implements Layer {
                         </div>`
                       : ""}
                   </button>
-                `,
-              )}
+                `;
+              })}
             </div>
           `,
         )}