+
Worker
+
+ metrics age
+ ${this.formatMs(this.workerMetricsAgeMs, 0)}
+
+
+ metrics interval (worker)
+ ${this.formatMs(worker.intervalMs, 0)}
+
+
+ event loop lag (avg / max)
+ ${this.formatMs(worker.loopLagAvg)} /
+ ${this.formatMs(worker.loopLagMax, 0)}
+
+
+ sim pump delay (avg / max)
+ ${this.formatMs(worker.simDelayAvg)} /
+ ${this.formatMs(worker.simDelayMax, 0)}
+
+
+ sim pump exec (avg / max)
+ ${this.formatMs(worker.simExecAvg)} /
+ ${this.formatMs(worker.simExecMax, 0)}
+
+
+ render_frame queue (avg / max)
+ ${this.formatMs(worker.rfQueueAvg, 0)} /
+ ${this.formatMs(worker.rfQueueMax, 0)}
+
+
+ render_frame handler (avg / max)
+ ${this.formatMs(worker.rfHandlerAvg, 0)} /
+ ${this.formatMs(worker.rfHandlerMax, 0)}
+
+ ${worker.renderSubmittedCount !== null ||
+ worker.renderNoopCount !== null
+ ? html`
+ render submits / noops
+ ${worker.renderSubmittedCount ?? 0} /
+ ${worker.renderNoopCount ?? 0}
+
`
+ : html``}
+ ${worker.renderCpuTotalAvg !== null
+ ? html`
+ render CPU breakdown (avg/max, submitted frames)
+
+
+ cpu total
+ ${this.formatMs(worker.renderCpuTotalAvg)} /
+ ${this.formatMs(worker.renderCpuTotalMax, 0)}
+
+
+ getCurrentTexture
+ ${this.formatMs(worker.renderGetTextureAvg)} /
+ ${this.formatMs(worker.renderGetTextureMax, 0)}
+
+
+ frame compute
+ ${this.formatMs(worker.renderFrameComputeAvg)} /
+ ${this.formatMs(worker.renderFrameComputeMax, 0)}
+
+
+ territory pass
+ ${this.formatMs(worker.renderTerritoryPassAvg)} /
+ ${this.formatMs(worker.renderTerritoryPassMax, 0)}
+
+
+ temporal resolve
+ ${this.formatMs(worker.renderTemporalResolveAvg)} /
+ ${this.formatMs(worker.renderTemporalResolveMax, 0)}
+
+
+ submit
+ ${this.formatMs(worker.renderSubmitAvg)} /
+ ${this.formatMs(worker.renderSubmitMax, 0)}
+
`
+ : html``}
+ ${worker.topMsgs.length
+ ? html`
+ top msgs (count | queue avg/max | handler avg/max)
+
+ ${worker.topMsgs.map(
+ (m) =>
+ html`
+ ${m.type} (${m.count})
+
+ ${this.formatMs(m.queueAvg, 0)}/${this.formatMs(
+ m.queueMax,
+ 0,
+ )}
+ |
+ ${this.formatMs(m.handlerAvg, 0)}/${this.formatMs(
+ m.handlerMax,
+ 0,
+ )}
+
+
`,
+ )}`
+ : html``}
+
+ trace
+
+
+
+
+
+ ${worker.traceLines.length
+ ? html`
`
+ : html``}
+
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index b8e153a70a..d94c5cfb16 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -7,10 +7,8 @@ import {
PlayerProfile,
PlayerType,
Relation,
- Unit,
UnitType,
} from "../../../core/game/Game";
-import { TileRef } from "../../../core/game/GameMap";
import { AllianceView } from "../../../core/game/GameUpdates";
import { GameView, PlayerView, UnitView } from "../../../core/game/GameView";
import { ContextMenuEvent, MouseMoveEvent } from "../../InputHandler";
@@ -34,26 +32,6 @@ import portIcon from "/images/PortIcon.svg?url";
import samLauncherIcon from "/images/SamLauncherIconWhite.svg?url";
import soldierIcon from "/images/SoldierIcon.svg?url";
-function euclideanDistWorld(
- coord: { x: number; y: number },
- tileRef: TileRef,
- game: GameView,
-): number {
- const x = game.x(tileRef);
- const y = game.y(tileRef);
- const dx = coord.x - x;
- const dy = coord.y - y;
- return Math.sqrt(dx * dx + dy * dy);
-}
-
-function distSortUnitWorld(coord: { x: number; y: number }, game: GameView) {
- return (a: Unit | UnitView, b: Unit | UnitView) => {
- const distA = euclideanDistWorld(coord, a.tile(), game);
- const distB = euclideanDistWorld(coord, b.tile(), game);
- return distA - distB;
- };
-}
-
@customElement("player-info-overlay")
export class PlayerInfoOverlay extends LitElement implements Layer {
@property({ type: Object })
@@ -74,6 +52,12 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
@state()
private unit: UnitView | null = null;
+ @state()
+ private isWilderness: boolean = false;
+
+ @state()
+ private isIrradiatedWilderness: boolean = false;
+
@state()
private _isInfoVisible: boolean = false;
@@ -81,6 +65,8 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
private lastMouseUpdate = 0;
+ private showDetails = true;
+ private hoverSeq = 0;
init() {
this.eventBus.on(MouseMoveEvent, (e: MouseMoveEvent) =>
this.onMouseEvent(e),
@@ -105,6 +91,8 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
this.setVisible(false);
this.unit = null;
this.player = null;
+ this.isWilderness = false;
+ this.isIrradiatedWilderness = false;
}
public maybeShow(x: number, y: number) {
@@ -115,26 +103,65 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
}
const tile = this.game.ref(worldCoord.x, worldCoord.y);
- if (!tile) return;
- const owner = this.game.owner(tile);
+ // Land hover info requires tile ownership/fallout, which is authoritative in
+ // the worker (main thread does not maintain a full tile mirror).
+ if (this.game.isLand(tile)) {
+ const seq = ++this.hoverSeq;
+ this.game.worker
+ .tileContext(tile)
+ .then((ctx) => {
+ if (!this._isActive || seq !== this.hoverSeq) {
+ return;
+ }
+
+ if (ctx.ownerId) {
+ try {
+ const owner = this.game.player(ctx.ownerId);
+ if (owner && owner.isPlayer()) {
+ this.player = owner;
+ this.player.profile().then((p) => {
+ if (this._isActive && seq === this.hoverSeq) {
+ this.playerProfile = p;
+ }
+ });
+ this.setVisible(true);
+ }
+ } catch {
+ // ignore
+ }
+ return;
+ }
+
+ this.isIrradiatedWilderness = ctx.hasFallout;
+ this.isWilderness = !ctx.hasFallout;
+ this.setVisible(true);
+ })
+ .catch(() => {
+ // ignore hover failures
+ });
+ return;
+ }
- if (owner && owner.isPlayer()) {
- this.player = owner as PlayerView;
- this.player.profile().then((p) => {
- this.playerProfile = p;
+ // Water hover info can be derived from unit view data (already on main).
+ const units = this.game
+ .units(UnitType.Warship, UnitType.TradeShip, UnitType.TransportShip)
+ .filter((u) => {
+ const dx = worldCoord.x - this.game.x(u.tile());
+ const dy = worldCoord.y - this.game.y(u.tile());
+ return Math.sqrt(dx * dx + dy * dy) < 50;
+ })
+ .sort((a, b) => {
+ const dxA = worldCoord.x - this.game.x(a.tile());
+ const dyA = worldCoord.y - this.game.y(a.tile());
+ const dxB = worldCoord.x - this.game.x(b.tile());
+ const dyB = worldCoord.y - this.game.y(b.tile());
+ return dxA * dxA + dyA * dyA - (dxB * dxB + dyB * dyB);
});
+
+ if (units.length > 0) {
+ this.unit = units[0];
this.setVisible(true);
- } else if (!this.game.isLand(tile)) {
- const units = this.game
- .units(UnitType.Warship, UnitType.TradeShip, UnitType.TransportShip)
- .filter((u) => euclideanDistWorld(worldCoord, u.tile(), this.game) < 50)
- .sort(distSortUnitWorld(worldCoord, this.game));
-
- if (units.length > 0) {
- this.unit = units[0];
- this.setVisible(true);
- }
}
}
@@ -458,6 +485,15 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
+ ${this.isWilderness || this.isIrradiatedWilderness
+ ? html`
+ ${translateText(
+ this.isIrradiatedWilderness
+ ? "player_info_overlay.irradiated_wilderness_title"
+ : "player_info_overlay.wilderness_title",
+ )}
+
`
+ : ""}
${this.player !== null ? this.renderPlayerInfo(this.player) : ""}
${this.unit !== null ? this.renderUnitInfo(this.unit) : ""}
diff --git a/src/client/graphics/layers/PlayerPanel.ts b/src/client/graphics/layers/PlayerPanel.ts
index 674b83e155..0000a49f07 100644
--- a/src/client/graphics/layers/PlayerPanel.ts
+++ b/src/client/graphics/layers/PlayerPanel.ts
@@ -62,6 +62,7 @@ export class PlayerPanel extends LitElement implements Layer {
private tile: TileRef | null = null;
private _profileForPlayerId: number | null = null;
private kickedPlayerIDs = new Set
();
+ @state() private otherPlayer: PlayerView | null = null;
@state() private sendTarget: PlayerView | null = null;
@state() private sendMode: "troops" | "gold" | "none" = "none";
@@ -107,15 +108,29 @@ export class PlayerPanel extends LitElement implements Layer {
async tick() {
if (this.isVisible && this.tile) {
- const owner = this.g.owner(this.tile);
- if (owner && owner.isPlayer()) {
- const pv = owner as PlayerView;
- const id = pv.id();
+ const tile = this.tile;
+ try {
+ const ctx = await this.g.worker.tileContext(tile);
+ if (!ctx.ownerId) {
+ this.hide();
+ return;
+ }
+ const owner = this.g.player(ctx.ownerId);
+ if (!owner || !owner.isPlayer()) {
+ this.hide();
+ return;
+ }
+
+ this.otherPlayer = owner as PlayerView;
+
+ const id = this.otherPlayer.id();
// fetch only if we don't have it or the player changed
if (this._profileForPlayerId !== Number(id)) {
- this.otherProfile = await pv.profile();
+ this.otherProfile = await this.otherPlayer.profile();
this._profileForPlayerId = Number(id);
}
+ } catch {
+ // If tile context fails (rare), keep the panel as-is.
}
// Refresh actions & alliance expiry
@@ -146,6 +161,9 @@ export class PlayerPanel extends LitElement implements Layer {
public show(actions: PlayerActions, tile: TileRef) {
this.actions = actions;
this.tile = tile;
+ this.otherPlayer = null;
+ this.otherProfile = null;
+ this._profileForPlayerId = null;
this.moderationTarget = null;
this.isVisible = true;
this.requestUpdate();
@@ -159,6 +177,7 @@ export class PlayerPanel extends LitElement implements Layer {
this.suppressNextHide = true;
this.actions = actions;
this.tile = tile;
+ this.otherPlayer = target;
this.sendTarget = target;
this.sendMode = "gold";
this.moderationTarget = null;
@@ -170,6 +189,11 @@ export class PlayerPanel extends LitElement implements Layer {
this.isVisible = false;
this.sendMode = "none";
this.sendTarget = null;
+ this.tile = null;
+ this.actions = null;
+ this.otherPlayer = null;
+ this.otherProfile = null;
+ this._profileForPlayerId = null;
this.moderationTarget = null;
this.requestUpdate();
}
@@ -859,13 +883,21 @@ export class PlayerPanel extends LitElement implements Layer {
if (!my) return html``;
if (!this.tile) return html``;
- const owner = this.g.owner(this.tile);
- if (!owner || !owner.isPlayer()) {
- this.hide();
- console.warn("Tile is not owned by a player");
- return html``;
+ const other = this.otherPlayer;
+ if (!other) {
+ return html`
+
+
+ ${translateText("loading")}…
+
+
+
+