render player info

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,
     }
 }
 

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);
             }
         }
     }

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<PlayerViewData> {
@@ -125,6 +125,11 @@ export interface PlayerViewData extends ViewData<PlayerViewData> {
 
 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 []
     }