diff --git a/src/client/graphics/NameBoxCalculator.ts b/src/client/graphics/NameBoxCalculator.ts index 191a97ce0..c7435e98d 100644 --- a/src/client/graphics/NameBoxCalculator.ts +++ b/src/client/graphics/NameBoxCalculator.ts @@ -37,9 +37,9 @@ export function placeName(game: Game, player: Player): NameViewData { center = new Cell(center.x, center.y - fontSize / 3) return { - nameX: center.x, - nameY: center.y, - nameSize: fontSize, + x: center.x, + y: center.y, + size: fontSize, } } diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts index f31cfc865..24dfd5f80 100644 --- a/src/client/graphics/layers/NameLayer.ts +++ b/src/client/graphics/layers/NameLayer.ts @@ -13,7 +13,7 @@ import targetIcon from '../../../../resources/images/TargetIcon.png'; import { ClientID } from "../../../core/Schemas" import { EventBus } from "../../../core/EventBus" import { AlternateViewEvent } from "../../InputHandler" -import { GameView } from "../../../core/GameView" +import { GameView, PlayerView } from "../../../core/GameView" class RenderInfo { @@ -120,32 +120,12 @@ export class NameLayer implements Layer { public renderLayer(mainContex: CanvasRenderingContext2D) { const [upperLeft, bottomRight] = this.transformHandler.screenBoundingRect() - for (const render of this.renders) { - render.isVisible = this.isVisible(render, upperLeft, bottomRight) - if (render.player.isAlive() && render.isVisible && render.fontSize * this.transformHandler.scale > 10) { - this.renderPlayerInfo(render, mainContex, this.transformHandler.scale, upperLeft, bottomRight) - } - } - } + for (const player of this.game.playerViews()) { + if (player.isAlive()) { - isVisible(render: RenderInfo, min: Cell, max: Cell): boolean { - if (render.boundingBox == null) { - return false - } - const ratio = (max.x - min.x) / Math.max(20, (render.boundingBox.max.x - render.boundingBox.min.x)) - if (render.player.type() == PlayerType.Bot) { - if (ratio > 35) { - return false - } - } else { - if (ratio > 35) { - return false + this.renderPlayerInfo(player, mainContex, this.transformHandler.scale, upperLeft, bottomRight) } } - if (render.boundingBox.max.x < min.x || render.boundingBox.max.y < min.y || render.boundingBox.min.x > max.x || render.boundingBox.min.y > max.y) { - return false - } - return true } calculateRenderInfo(render: RenderInfo) { @@ -158,20 +138,24 @@ export class NameLayer implements Layer { // render.fontSize = Math.max(1, Math.floor(size)) } - renderPlayerInfo(render: RenderInfo, context: CanvasRenderingContext2D, scale: number, uppperLeft: Cell, bottomRight: Cell) { + renderPlayerInfo(player: PlayerView, context: CanvasRenderingContext2D, scale: number, uppperLeft: Cell, bottomRight: Cell) { if (this.alternateView) { return } + const name = player.nameLocation() + if (!name) { + return + } - const nameCenterX = Math.floor(render.location.x - this.game.width() / 2) - const nameCenterY = Math.floor(render.location.y - this.game.height() / 2) + const nameCenterX = Math.floor(name.x - this.game.width() / 2) + const nameCenterY = Math.floor(name.y - this.game.height() / 2) - const iconSize = render.fontSize * 2; // Adjust size as needed + const iconSize = name.size * 2; // Adjust size as needed // const iconX = nameCenterX + render.fontSize * 2; // Position to the right of the name // const iconY = nameCenterY - render.fontSize / 2; - if (render.player == this.firstPlace) { + if (player == this.firstPlace) { context.drawImage( this.crownIconImage, nameCenterX - iconSize / 2, @@ -182,7 +166,7 @@ export class NameLayer implements Layer { } - if (render.player.isTraitor() && this.traitorIconImage.complete) { + if (player.isTraitor() && this.traitorIconImage.complete) { context.drawImage( this.traitorIconImage, nameCenterX - iconSize / 2, @@ -193,7 +177,7 @@ export class NameLayer implements Layer { } const myPlayer = this.getPlayer() - if (myPlayer != null && myPlayer.isAlliedWith(render.player)) { + if (myPlayer != null && myPlayer.isAlliedWith(player)) { context.drawImage( this.allianceIconImage, nameCenterX - iconSize / 2, @@ -203,7 +187,7 @@ export class NameLayer implements Layer { ); } - if (myPlayer != null && new Set(myPlayer.transitiveTargets()).has(render.player)) { + if (myPlayer != null && new Set(myPlayer.transitiveTargets()).has(player)) { context.drawImage( this.targetIconImage, nameCenterX - iconSize / 2, @@ -216,26 +200,26 @@ export class NameLayer implements Layer { context.textRendering = "optimizeSpeed"; - context.font = `${render.fontSize}px ${this.theme.font()}`; - context.fillStyle = this.theme.playerInfoColor(render.player.id()).toHex(); + context.font = `${name.size}px ${this.theme.font()}`; + context.fillStyle = this.theme.playerInfoColor(player.id()).toHex(); context.textAlign = 'center'; context.textBaseline = 'middle'; - context.fillText(render.player.name(), nameCenterX, nameCenterY - render.fontSize / 2); - context.font = `bold ${render.fontSize}px ${this.theme.font()}`; + context.fillText(player.name(), nameCenterX, nameCenterY - name.size / 2); + context.font = `bold ${name.size}px ${this.theme.font()}`; - context.fillText(renderTroops(render.player.troops()), nameCenterX, nameCenterY + render.fontSize); + context.fillText(renderTroops(player.troops()), nameCenterX, nameCenterY + name.size); if (myPlayer != null) { - const emojis = render.player.outgoingEmojis().filter(e => e.recipient == AllPlayers || e.recipient == myPlayer) + const emojis = player.outgoingEmojis().filter(e => e.recipient == AllPlayers || e.recipient == myPlayer) if (emojis.length > 0) { - context.font = `${render.fontSize * 4}px ${this.theme.font()}`; - context.fillStyle = this.theme.playerInfoColor(render.player.id()).toHex(); + context.font = `${name.size * 4}px ${this.theme.font()}`; + context.fillStyle = this.theme.playerInfoColor(player.id()).toHex(); context.textAlign = 'center'; context.textBaseline = 'middle'; - context.fillText(emojis[0].emoji, nameCenterX, nameCenterY + render.fontSize / 2); + context.fillText(emojis[0].emoji, nameCenterX, nameCenterY + name.size / 2); } } } diff --git a/src/core/GameView.ts b/src/core/GameView.ts index db0cc3f20..89d052019 100644 --- a/src/core/GameView.ts +++ b/src/core/GameView.ts @@ -99,9 +99,9 @@ export class UnitView { } export interface NameViewData { - nameX: number, - nameY: number, - nameSize: number, + x: number, + y: number, + size: number, } export interface PlayerViewData extends ViewData { @@ -125,6 +125,11 @@ export interface PlayerViewData extends ViewData { export class PlayerView implements Player { constructor(private game: GameView, private data: PlayerViewData) { } + + nameLocation(): NameViewData { + return this.data.nameViewData + } + smallID(): number { return this.data.smallID } @@ -303,6 +308,10 @@ export class GameView { hasPlayer(id: PlayerID): boolean { return false } + playerViews(): PlayerView[] { + return Object.values(this.data.players).map(data => new PlayerView(this, data)) + } + players(): Player[] { return [] }