alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-17 04:09:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

render player info

Browse Source
This commit is contained in:
Evan
2025-02-01 12:05:11 -08:00
parent 37522b6467
commit d5e6667b1f
3 changed files with 40 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/NameBoxCalculator.ts
+3 -3
View File
@@ -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
+25 -41
View File
@@ -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);
}
}
}