floor renderNumber(), have buildmenu refresh on tick

src/client/Utils.ts

@@ -2,23 +2,26 @@ export function renderTroops(troops: number): string {
   return renderNumber(troops / 10);
 }
 
-export function renderNumber(num: number) {
+export function renderNumber(num: number): string {
   num = Math.max(num, 0);
-  let numStr = "";
+
   if (num >= 10_000_000) {
-    numStr = (num / 1000000).toFixed(1) + "M";
+    const value = Math.floor(num / 100000) / 10;
+    return value.toFixed(1) + "M";
   } else if (num >= 1_000_000) {
-    numStr = (num / 1000000).toFixed(2) + "M";
+    const value = Math.floor(num / 10000) / 100;
+    return value.toFixed(2) + "M";
   } else if (num >= 100000) {
-    numStr = Math.floor(num / 1000) + "K";
+    return Math.floor(num / 1000) + "K";
   } else if (num >= 10000) {
-    numStr = (num / 1000).toFixed(1) + "K";
+    const value = Math.floor(num / 100) / 10;
+    return value.toFixed(1) + "K";
   } else if (num >= 1000) {
-    numStr = (num / 1000).toFixed(2) + "K";
+    const value = Math.floor(num / 10) / 100;
+    return value.toFixed(2) + "K";
   } else {
-    numStr = Math.floor(num).toString();
+    return Math.floor(num).toString();
   }
-  return numStr;
 }
 
 export function createCanvas(): HTMLCanvasElement {

src/client/graphics/GameRenderer.ts

@@ -120,6 +120,7 @@ export function createRenderer(
     new UnitLayer(game, eventBus, clientID),
     new NameLayer(game, transformHandler, clientID),
     eventsDisplay,
+    buildMenu,
     new RadialMenu(
       eventBus,
       game,
@@ -174,7 +175,7 @@ export class GameRenderer {
       });
     });
 
-    this.layers.forEach((l) => l.init());
+    this.layers.forEach((l) => l.init?.());
 
     document.body.appendChild(this.canvas);
     window.addEventListener("resize", () => this.resizeCanvas());

src/client/graphics/layers/BuildMenu.ts

@@ -20,6 +20,8 @@ import cityIcon from "../../../../resources/images/CityIconWhite.svg";
 import shieldIcon from "../../../../resources/images/ShieldIconWhite.svg";
 import { renderNumber } from "../../Utils";
 import { GameView, PlayerView } from "../../../core/game/GameView";
+import { TileRef } from "../../../core/game/GameMap";
+import { Layer } from "./Layer";
 
 interface BuildItemDisplay {
   unitType: UnitType;
@@ -73,13 +75,18 @@ const buildTable: BuildItemDisplay[][] = [
 ];
 
 @customElement("build-menu")
-export class BuildMenu extends LitElement {
+export class BuildMenu extends LitElement implements Layer {
   public game: GameView;
   public eventBus: EventBus;
-  private myPlayer: PlayerView;
-  private clickedCell: Cell;
+  private clickedTile: TileRef;
   private playerActions: PlayerActions | null;
 
+  tick() {
+    if (!this._hidden) {
+      this.refresh();
+    }
+  }
+
   static styles = css`
     :host {
       display: block;
@@ -225,7 +232,7 @@ export class BuildMenu extends LitElement {
   private _hidden = true;
 
   private canBuild(item: BuildItemDisplay): boolean {
-    if (this.myPlayer == null || this.playerActions == null) {
+    if (this.game?.myPlayer() == null || this.playerActions == null) {
       return false;
     }
     const unit = this.playerActions.buildableUnits.filter(
@@ -238,7 +245,7 @@ export class BuildMenu extends LitElement {
   }
 
   private cost(item: BuildItemDisplay): number {
-    for (const bu of this.playerActions.buildableUnits) {
+    for (const bu of this.playerActions?.buildableUnits ?? []) {
       if (bu.type == item.unitType) {
         return bu.cost;
       }
@@ -248,7 +255,10 @@ export class BuildMenu extends LitElement {
 
   public onBuildSelected = (item: BuildItemDisplay) => {
     this.eventBus.emit(
-      new BuildUnitIntentEvent(item.unitType, this.clickedCell),
+      new BuildUnitIntentEvent(
+        item.unitType,
+        new Cell(this.game.x(this.clickedTile), this.game.y(this.clickedTile)),
+      ),
     );
     this.hideMenu();
   };
@@ -280,7 +290,7 @@ export class BuildMenu extends LitElement {
                     <span class="build-description">${item.description}</span>
                     <span class="build-cost">
                       ${renderNumber(
-                        this.game && this.myPlayer ? this.cost(item) : 0,
+                        this.game && this.game.myPlayer() ? this.cost(item) : 0,
                       )}
                       <img
                         src=${goldCoinIcon}
@@ -305,15 +315,18 @@ export class BuildMenu extends LitElement {
     this.requestUpdate();
   }
 
-  showMenu(player: PlayerView, clickedCell: Cell) {
-    player
-      .actions(this.game.ref(clickedCell.x, clickedCell.y))
+  showMenu(clickedTile: TileRef) {
+    this.clickedTile = clickedTile;
+    this._hidden = false;
+    this.refresh();
+  }
+
+  private refresh() {
+    this.game
+      .myPlayer()
+      .actions(this.clickedTile)
       .then((actions) => {
-        console.log(`got actions: ${JSON.stringify(actions)}`);
         this.playerActions = actions;
-        this.myPlayer = player;
-        this.clickedCell = clickedCell;
-        this._hidden = false;
         this.requestUpdate();
       });
   }

src/client/graphics/layers/RadialMenu.ts

@@ -116,11 +116,12 @@ export class RadialMenu implements Layer {
       if (!this.g.isValidCoord(clickedCell.x, clickedCell.y)) {
         return;
       }
+      const tile = this.g.ref(clickedCell.x, clickedCell.y);
       const p = this.g.playerByClientID(this.clientID);
       if (p == null) {
         return;
       }
-      this.buildMenu.showMenu(p, clickedCell);
+      this.buildMenu.showMenu(tile);
     });
     this.createMenuElement();
   }
@@ -328,7 +329,7 @@ export class RadialMenu implements Layer {
     tile: TileRef,
   ) {
     this.activateMenuElement(Slot.Build, "#ebe250", buildIcon, () => {
-      this.buildMenu.showMenu(myPlayer, this.clickedCell);
+      this.buildMenu.showMenu(tile);
     });
     if (this.g.hasOwner(tile)) {
       this.activateMenuElement(Slot.Info, "#64748B", infoIcon, () => {