From 66bbbc664b8bb3112638ecfc3ec32aa8b81b1b50 Mon Sep 17 00:00:00 2001 From: FloPinguin <25036848+FloPinguin@users.noreply.github.com> Date: Fri, 24 Apr 2026 16:09:03 +0200 Subject: [PATCH] =?UTF-8?q?Colored=20SVG=20smiley=20icons=20next=20to=20na?= =?UTF-8?q?tion=20names=20based=20on=20relation=20=F0=9F=98=8A=20(#3746)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description: Instead of coloring nation names based on diplomatic relation, small inline SVG face icons are now shown next to the nation name in the player info overlay: - 😠 **Hostile** - red angry face (furrowed brows, downturned mouth) - 😟 **Distrustful** - orange slightly-sad face (flat mouth) - 😊 **Friendly** - green happy face (upturned smile) - **Neutral** - no icon shown Screenshot 2026-04-23 013151 Screenshot 2026-04-23 012809 Screenshot 2026-04-23 012741 No longer conflicts with green text color because of alliance now. ## Please complete the following: - [X] I have added screenshots for all UI updates - [X] I process any text displayed to the user through translateText() and I've added it to the en.json file - [X] I have added relevant tests to the test directory - [X] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: FloPinguin --- .../graphics/layers/PlayerInfoOverlay.ts | 42 +++------- src/client/graphics/layers/RelationSmiley.ts | 79 +++++++++++++++++++ 2 files changed, 92 insertions(+), 29 deletions(-) create mode 100644 src/client/graphics/layers/RelationSmiley.ts diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts index ad3ffe175..3d5e55ad0 100644 --- a/src/client/graphics/layers/PlayerInfoOverlay.ts +++ b/src/client/graphics/layers/PlayerInfoOverlay.ts @@ -34,6 +34,7 @@ import { TransformHandler } from "../TransformHandler"; import { ImmunityBarVisibleEvent } from "./ImmunityTimer"; import { Layer } from "./Layer"; import { CloseRadialMenuEvent } from "./RadialMenu"; +import "./RelationSmiley"; import { SpawnBarVisibleEvent } from "./SpawnTimer"; const allianceIcon = assetUrl("images/AllianceIcon.svg"); const warshipIcon = assetUrl("images/BattleshipIconWhite.svg"); @@ -182,37 +183,21 @@ export class PlayerInfoOverlay extends LitElement implements Layer { this.requestUpdate(); } - private getPlayerNameColor( - player: PlayerView, - myPlayer: PlayerView | null | undefined, - isFriendly: boolean, - ): string { + private getPlayerNameColor(isFriendly: boolean): string { if (isFriendly) return "text-green-500"; - if ( - myPlayer && - myPlayer !== player && - player.type() === PlayerType.Nation - ) { - const relation = - this.playerProfile?.relations[myPlayer.smallID()] ?? Relation.Neutral; - return this.getRelationClass(relation); - } return "text-white"; } - private getRelationClass(relation: Relation): string { - switch (relation) { - case Relation.Hostile: - return "text-red-500"; - case Relation.Distrustful: - return "text-red-300"; - case Relation.Neutral: - return "text-white"; - case Relation.Friendly: - return "text-green-500"; - default: - return "text-white"; - } + private getRelationSmiley( + player: PlayerView, + myPlayer: PlayerView | null | undefined, + ): TemplateResult | string { + if (!myPlayer || myPlayer === player || player.type() !== PlayerType.Nation) + return ""; + const relation = + this.playerProfile?.relations[myPlayer.smallID()] ?? Relation.Neutral; + if (relation === Relation.Neutral) return ""; + return html``; } private getRelationName(relation: Relation): string { @@ -363,8 +348,6 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
@@ -375,6 +358,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer { />` : html``} ${player.displayName()} + ${this.getRelationSmiley(player, myPlayer)} ${playerTeam !== "" && player.type() !== PlayerType.Bot ? html`
> = { + [Relation.Hostile]: { + color: "#ef4444", + eyeCy: 7.5, + mouth: "M5 12 Q8 9 11 12", + brows: ["M4 5.5 L6.5 7", "M12 5.5 L9.5 7"], + }, + [Relation.Distrustful]: { + color: "#f97316", + eyeCy: 6.8, + mouth: "M5.5 11 Q8 9.2 10.5 11", + }, + [Relation.Friendly]: { + color: "#22c55e", + eyeCy: 6.5, + mouth: "M5 10 Q8 13 11 10", + }, +}; + +@customElement("relation-smiley") +export class RelationSmiley extends LitElement { + @property({ type: Number }) + relation: Relation = Relation.Neutral; + + createRenderRoot() { + return this; + } + + render() { + const face = RELATION_FACES[this.relation]; + if (!face) return html``; + const { color, eyeCy, mouth, brows } = face; + return html``; + } +}