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, () => {