diff --git a/src/client/Utils.ts b/src/client/Utils.ts
index 6f8ffd47b..280bcb4ad 100644
--- a/src/client/Utils.ts
+++ b/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 {
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index 4481ebeab..a0c34bb01 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/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());
diff --git a/src/client/graphics/layers/BuildMenu.ts b/src/client/graphics/layers/BuildMenu.ts
index a668a67f2..e110d50e6 100644
--- a/src/client/graphics/layers/BuildMenu.ts
+++ b/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 {
${item.description}
${renderNumber(
- this.game && this.myPlayer ? this.cost(item) : 0,
+ this.game && this.game.myPlayer() ? this.cost(item) : 0,
)}
{
- console.log(`got actions: ${JSON.stringify(actions)}`);
this.playerActions = actions;
- this.myPlayer = player;
- this.clickedCell = clickedCell;
- this._hidden = false;
this.requestUpdate();
});
}
diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts
index 236824194..9d963703b 100644
--- a/src/client/graphics/layers/RadialMenu.ts
+++ b/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, () => {