From 6fe81cbcb65ebd896ed5b9eb32b6fc0792f75b08 Mon Sep 17 00:00:00 2001
From: VariableVince <24507472+VariableVince@users.noreply.github.com>
Date: Wed, 5 Nov 2025 19:25:12 +0100
Subject: [PATCH] Team leaderboard: own team bold + fix headers allignment
 (#2336)

## Description:

Closes #2185. Made own team name bold in Team Stats. In Show Unit and
Show Control. This follows
https://github.com/openfrontio/OpenFrontIO/pull/2221 which made team
mate names bold in the Leaderboard.

Also fixed column names allignment. They sat in different vertical
positions before.

**BEFORE**

<img width="836" height="402" alt="image"
src="https://github.com/user-attachments/assets/fe2c84b1-c1e4-4415-8df8-ffce657b1b90"
/>

<img width="1050" height="405" alt="image"
src="https://github.com/user-attachments/assets/3a277722-731d-4410-90e6-1fd01c628a5f"
/>


**AFTER**

<img width="840" height="393" alt="image"
src="https://github.com/user-attachments/assets/26db2e81-e39c-451d-9da3-c24061cf6687"
/>

<img width="1061" height="398" alt="image"
src="https://github.com/user-attachments/assets/3dd25369-b355-42f4-bdac-2e6d6d684689"
/>


## 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:

tryout33

---------

Co-authored-by: Evan <evanpelle@gmail.com>
---
 src/client/graphics/layers/TeamStats.ts | 44 ++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/client/graphics/layers/TeamStats.ts b/src/client/graphics/layers/TeamStats.ts
index a8503c229..120b4b60c 100644
--- a/src/client/graphics/layers/TeamStats.ts
+++ b/src/client/graphics/layers/TeamStats.ts
@@ -8,6 +8,7 @@ import { Layer } from "./Layer";
 
 interface TeamEntry {
   teamName: string;
+  isMyTeam: boolean;
   totalScoreStr: string;
   totalGold: string;
   totalTroops: string;
@@ -28,6 +29,7 @@ export class TeamStats extends LitElement implements Layer {
   teams: TeamEntry[] = [];
   private _shownOnInit = false;
   private showUnits = false;
+  private _myTeam: Team | null = null;
 
   createRenderRoot() {
     return this; // use light DOM for Tailwind
@@ -54,6 +56,11 @@ export class TeamStats extends LitElement implements Layer {
     const players = this.game.playerViews();
     const grouped: Record<Team, PlayerView[]> = {};
 
+    if (this._myTeam === null) {
+      const myPlayer = this.game.myPlayer();
+      this._myTeam = myPlayer?.team() ?? null;
+    }
+
     for (const player of players) {
       const team = player.team();
       if (team === null) continue;
@@ -89,6 +96,7 @@ export class TeamStats extends LitElement implements Layer {
 
         return {
           teamName: teamStr,
+          isMyTeam: teamStr === this._myTeam,
           totalScoreStr: formatPercentage(totalScorePercent),
           totalScoreSort,
           totalGold: renderNumber(totalGold),
@@ -131,27 +139,41 @@ export class TeamStats extends LitElement implements Layer {
             </div>
             ${this.showUnits
               ? html`
-                  <div class="py-1.5 text-center border-b border-slate-500">
+                  <div
+                    class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
+                  >
                     ${translateText("leaderboard.launchers")}
                   </div>
-                  <div class="py-1.5 text-center border-b border-slate-500">
+                  <div
+                    class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
+                  >
                     ${translateText("leaderboard.sams")}
                   </div>
-                  <div class="py-1.5 text-center border-b border-slate-500">
+                  <div
+                    class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
+                  >
                     ${translateText("leaderboard.warships")}
                   </div>
-                  <div class="py-1.5 text-center border-b border-slate-500">
+                  <div
+                    class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
+                  >
                     ${translateText("leaderboard.cities")}
                   </div>
                 `
               : html`
-                  <div class="py-1.5 text-center border-b border-slate-500">
+                  <div
+                    class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
+                  >
                     ${translateText("leaderboard.owned")}
                   </div>
-                  <div class="py-1.5 text-center border-b border-slate-500">
+                  <div
+                    class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
+                  >
                     ${translateText("leaderboard.gold")}
                   </div>
-                  <div class="py-1.5 text-center border-b border-slate-500">
+                  <div
+                    class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
+                  >
                     ${translateText("leaderboard.troops")}
                   </div>
                 `}
@@ -162,7 +184,9 @@ export class TeamStats extends LitElement implements Layer {
             this.showUnits
               ? html`
                   <div
-                    class="contents hover:bg-slate-600/60 text-center cursor-pointer"
+                    class="contents hover:bg-slate-600/60 text-center cursor-pointer ${team.isMyTeam
+                      ? "font-bold"
+                      : ""}"
                   >
                     <div class="py-1.5 border-b border-slate-500">
                       ${team.teamName}
@@ -183,7 +207,9 @@ export class TeamStats extends LitElement implements Layer {
                 `
               : html`
                   <div
-                    class="contents hover:bg-slate-600/60 text-center cursor-pointer"
+                    class="contents hover:bg-slate-600/60 text-center cursor-pointer ${team.isMyTeam
+                      ? "font-bold"
+                      : ""}"
                   >
                     <div class="py-1.5 border-b border-slate-500">
                       ${team.teamName}