alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 13:00:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Team leaderboard: own team bold + fix headers allignment (#2336)

Browse Source 
## 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>
This commit is contained in:
VariableVince
2025-11-05 19:25:12 +01:00
committed by GitHub
parent 7b85114194
commit 6fe81cbcb6
1 changed files with 35 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/TeamStats.ts
+35 -9
View File
@@ -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}