Add train gold to game info ranking (#2901)

## Description:

The game info panel was missing the gold generated with trains, which
was recently added into the recorded stats.
This PR adds the gold train ranking, grouped with the naval trade.

Visually the game info panel is not matching the new visual identity,
but this PR only focuses on the missing data.

<img width="898" height="482" alt="image"
src="https://github.com/user-attachments/assets/6366e5d2-23b6-40b0-b4d4-1227b5a2f811"
/>


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

IngloriousTom

src/client/components/baseComponents/ranking/GameInfoRanking.ts

@@ -2,6 +2,8 @@ import { AnalyticsRecord, PlayerRecord } from "../../../../core/Schemas";
 import {
   GOLD_INDEX_STEAL,
   GOLD_INDEX_TRADE,
+  GOLD_INDEX_TRAIN_OTHER,
+  GOLD_INDEX_TRAIN_SELF,
   GOLD_INDEX_WAR,
 } from "../../../../core/StatsSchemas";
 
@@ -12,7 +14,8 @@ export enum RankType {
   MIRV = "MIRV",
   TotalGold = "TotalGold",
   StolenGold = "StolenGold",
-  TradedGold = "TradedGold",
+  NavalTrade = "NavalTrade",
+  TrainTrade = "TrainTrade",
   ConqueredGold = "ConqueredGold",
   Lifetime = "Lifetime",
 }
@@ -134,10 +137,15 @@ export class Ranking {
         return Number(player.gold.reduce((sum, gold) => sum + gold, 0n));
       case RankType.StolenGold:
         return Number(player.gold[GOLD_INDEX_STEAL] ?? 0n);
-      case RankType.TradedGold:
+      case RankType.NavalTrade:
         return Number(player.gold[GOLD_INDEX_TRADE] ?? 0n);
       case RankType.ConqueredGold:
         return Number(player.gold[GOLD_INDEX_WAR] ?? 0n);
+      case RankType.TrainTrade: {
+        const ownTrains = player.gold[GOLD_INDEX_TRAIN_SELF] ?? 0n;
+        const otherTrains = player.gold[GOLD_INDEX_TRAIN_OTHER] ?? 0n;
+        return Number(ownTrains + otherTrains);
+      }
     }
   }
 

src/client/components/baseComponents/ranking/PlayerRow.ts

@@ -1,5 +1,10 @@
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import {
+  GOLD_INDEX_TRADE,
+  GOLD_INDEX_TRAIN_OTHER,
+  GOLD_INDEX_TRAIN_SELF,
+} from "src/core/StatsSchemas";
 import { renderNumber } from "../../../Utils";
 import { PlayerInfo, RankType } from "./GameInfoRanking";
 
@@ -67,10 +72,12 @@ export class PlayerRow extends LitElement {
       case RankType.MIRV:
         return this.renderBombScore();
       case RankType.TotalGold:
-      case RankType.TradedGold:
       case RankType.ConqueredGold:
       case RankType.StolenGold:
         return this.renderGoldScore();
+      case RankType.NavalTrade:
+      case RankType.TrainTrade:
+        return this.renderTradeScore();
       default:
         return html``;
     }
@@ -109,14 +116,15 @@ export class PlayerRow extends LitElement {
       </div>
     `;
   }
-  private renderBombType(value: number, highlight: boolean) {
+
+  private renderMultiScoreType(value: number, highlight: boolean) {
     return html`
       <div
         class="${highlight
           ? "font-bold text-[18px]"
-          : ""} min-w-7.5 sm:min-w-15 inline-block text-center"
+          : "leading-[24px]"} min-w-7.5 sm:min-w-15 inline-block text-center"
       >
-        ${value}
+        ${renderNumber(value)}
       </div>
     `;
   }
@@ -124,17 +132,17 @@ export class PlayerRow extends LitElement {
   private renderAllBombs() {
     return html`
       <div class="flex justify-between text-sm sm:pr-20">
-        ${this.renderBombType(
+        ${this.renderMultiScoreType(
           this.player.atoms,
           this.rankType === RankType.Atoms,
         )}
         /
-        ${this.renderBombType(
+        ${this.renderMultiScoreType(
           this.player.hydros,
           this.rankType === RankType.Hydros,
         )}
         /
-        ${this.renderBombType(
+        ${this.renderMultiScoreType(
           this.player.mirv,
           this.rankType === RankType.MIRV,
         )}
@@ -142,9 +150,28 @@ export class PlayerRow extends LitElement {
     `;
   }
 
+  private renderAllTrades() {
+    const navalTrade = this.player.gold[GOLD_INDEX_TRADE] ?? 0n;
+    const ownTrainTrade = this.player.gold[GOLD_INDEX_TRAIN_SELF] ?? 0n;
+    const otherTrainTrade = this.player.gold[GOLD_INDEX_TRAIN_OTHER] ?? 0n;
+    return html`
+      <div class="flex justify-between text-sm align-baseline">
+        ${this.renderMultiScoreType(
+          Number(navalTrade),
+          this.rankType === RankType.NavalTrade,
+        )}
+        /
+        ${this.renderMultiScoreType(
+          Number(ownTrainTrade + otherTrainTrade),
+          this.rankType === RankType.TrainTrade,
+        )}
+      </div>
+    `;
+  }
+
   private renderBombScore() {
     return html`
-      <div class="flex gap-3 items-center w-full">
+      <div class="flex gap-3 items-center align-baseline w-full">
         ${this.renderPlayerIcon()}
         <div class="flex flex-col sm:flex-row gap-1 text-left w-full">
           ${this.renderPlayerName()} ${this.renderAllBombs()}
@@ -157,13 +184,12 @@ export class PlayerRow extends LitElement {
     return html`
       <div class="flex gap-3 items-center">
         ${this.renderPlayerIcon()}
-        <div class="text-left w-31.25 sm:w-62.5">
-          ${this.renderPlayerName()}
-        </div>
+        <div class="text-left w-31.25 sm:w-50">${this.renderPlayerName()}</div>
       </div>
+
       <div class="flex gap-2">
         <div
-          class="font-bold rounded-md w-15 shrink-0 h-7.5 text-sm sm:w-25 sm:h-7.5 leading-[1.9rem] text-center"
+          class="font-bold rounded-md w-15 shrink-0 text-sm sm:w-25 leading-[1.9rem] text-center"
         >
           ${renderNumber(this.score)}
         </div>
@@ -172,6 +198,24 @@ export class PlayerRow extends LitElement {
     `;
   }
 
+  private renderTradeScore() {
+    return html`
+      <div class="flex gap-3 items-center">
+        ${this.renderPlayerIcon()}
+        <div class="text-left w-31.25 sm:w-50">${this.renderPlayerName()}</div>
+      </div>
+
+      <div class="flex gap-2 w-50 justify-between items-center">
+        <div
+          class="font-bold rounded-md w-15 shrink-0 text-sm sm:w-25 leading-[1.9rem] text-center"
+        >
+          ${this.renderAllTrades()}
+        </div>
+        <img src="/images/GoldCoinIcon.svg" class="w-5 size-3.5 sm:size-5" />
+      </div>
+    `;
+  }
+
   private renderPlayerName() {
     return html`
       <div class="flex gap-1 items-center w-50 shrink-0">

src/client/components/baseComponents/ranking/RankingControls.ts

@@ -7,8 +7,10 @@ const economyRankings = new Set([
   RankType.TotalGold,
   RankType.StolenGold,
   RankType.ConqueredGold,
-  RankType.TradedGold,
+  RankType.NavalTrade,
+  RankType.TrainTrade,
 ]);
+const tradeRankings = new Set([RankType.NavalTrade, RankType.TrainTrade]);
 const bombRankings = new Set([RankType.Atoms, RankType.Hydros, RankType.MIRV]);
 const warRankings = new Set([
   RankType.Conquests,
@@ -18,6 +20,7 @@ const warRankings = new Set([
 ]);
 
 const isEconomyRanking = (t: RankType) => economyRankings.has(t);
+const isTradeRanking = (t: RankType) => tradeRankings.has(t);
 const isBombRanking = (t: RankType) => bombRankings.has(t);
 const isWarRanking = (t: RankType) => warRankings.has(t);
 
@@ -87,7 +90,6 @@ export class RankingControls extends LitElement {
     if (!isEconomyRanking(this.rankType)) return "";
 
     const econButtons = [
-      [RankType.TradedGold, "game_info_modal.trade"],
       [RankType.StolenGold, "game_info_modal.pirate"],
       [RankType.ConqueredGold, "game_info_modal.conquered"],
       [RankType.TotalGold, "game_info_modal.total_gold"],
@@ -95,6 +97,11 @@ export class RankingControls extends LitElement {
 
     return html`
       <div class="flex justify-center gap-3 pb-1">
+        ${this.renderSubButton(
+          RankType.NavalTrade,
+          isTradeRanking(this.rankType),
+          "game_info_modal.trade",
+        )}
         ${econButtons.map(([type, label]) =>
           this.renderSubButton(type as RankType, this.rankType === type, label),
         )}

src/client/components/baseComponents/ranking/RankingHeader.ts

@@ -36,17 +36,17 @@ export class RankingHeader extends LitElement {
       case RankType.MIRV:
         return html`
           <div class="flex justify-between sm:px-17.5 w-full">
-            ${this.renderBombHeaderButton(
+            ${this.renderMultipleChoiceHeaderButton(
               translateText("game_info_modal.atoms"),
               RankType.Atoms,
             )}
             /
-            ${this.renderBombHeaderButton(
+            ${this.renderMultipleChoiceHeaderButton(
               translateText("game_info_modal.hydros"),
               RankType.Hydros,
             )}
             /
-            ${this.renderBombHeaderButton(
+            ${this.renderMultipleChoiceHeaderButton(
               translateText("game_info_modal.mirv"),
               RankType.MIRV,
             )}
@@ -56,10 +56,15 @@ export class RankingHeader extends LitElement {
         return html`<div class="w-full">
           ${translateText("game_info_modal.all_gold")}
         </div>`;
-      case RankType.TradedGold:
-        return html`<div class="w-full">
-          ${translateText("game_info_modal.trade")}
-        </div>`;
+      case RankType.NavalTrade:
+      case RankType.TrainTrade:
+        return html`
+          <div class="flex justify-between sm:px-17.5 w-full">
+            ${this.renderMultipleChoiceHeaderButton("🚂", RankType.TrainTrade)}
+            /
+            ${this.renderMultipleChoiceHeaderButton("🚢", RankType.NavalTrade)}
+          </div>
+        `;
       case RankType.ConqueredGold:
         return html`<div class="w-full">
           ${translateText("game_info_modal.conquest_gold")}
@@ -74,13 +79,13 @@ export class RankingHeader extends LitElement {
     }
   }
 
-  private renderBombHeaderButton(label: string, type: RankType) {
+  private renderMultipleChoiceHeaderButton(label: string, type: RankType) {
     return html`
       <button
         @click=${() => this.onSort(type)}
         class="${this.rankType === type
           ? "border-b-2 border-b-white"
-          : nothing}"
+          : nothing} h-[28px]"
       >
         ${label}
       </button>

tests/GameInfoRanking.test.ts

@@ -13,6 +13,8 @@ import { AnalyticsRecord } from "../src/core/Schemas";
 import {
   GOLD_INDEX_STEAL,
   GOLD_INDEX_TRADE,
+  GOLD_INDEX_TRAIN_OTHER,
+  GOLD_INDEX_TRAIN_SELF,
   GOLD_INDEX_WAR,
 } from "../src/core/StatsSchemas";
 
@@ -55,7 +57,7 @@ describe("Ranking class", () => {
             stats: {
               units: { port: [2n, 0n, 0n, 2n] },
               conquests: 5n,
-              gold: [0n, 100n, 20n, 0n], // total 120
+              gold: [0n, 100n, 20n, 0n, 15n, 5n], // total 140
               bombs: {
                 abomb: [1n],
                 hbomb: [1n],
@@ -70,7 +72,7 @@ describe("Ranking class", () => {
             stats: {
               units: { city: [2n, 0n, 0n, 2n] },
               conquests: 8n,
-              gold: [0n, 50n, 10n, 5n], // total 65
+              gold: [0n, 50n, 10n, 5n], // total 65, no train trade
               bombs: {
                 abomb: [0n],
                 hbomb: [2n],
@@ -86,7 +88,7 @@ describe("Ranking class", () => {
               // no units, but has conquests/killedAt to count as played
               conquests: 8n,
               killedAt: BigInt(600),
-              gold: [0n, 10n, 2n, 10n], //  total 22
+              gold: [0n, 10n, 2n, 10n, 0n, 5n], //  total 27
               bombs: {},
             },
             persistentID: null,
@@ -178,9 +180,14 @@ describe("Ranking class", () => {
     expect(r.score(p1, RankType.StolenGold)).toBe(
       Number(p1.gold[GOLD_INDEX_STEAL] ?? 0n),
     );
-    expect(r.score(p1, RankType.TradedGold)).toBe(
+    expect(r.score(p1, RankType.NavalTrade)).toBe(
       Number(p1.gold[GOLD_INDEX_TRADE] ?? 0n),
     );
+    const ownTrain = p1.gold[GOLD_INDEX_TRAIN_SELF] ?? 0n;
+    const otherTrain = p1.gold[GOLD_INDEX_TRAIN_OTHER] ?? 0n;
+    expect(r.score(p1, RankType.TrainTrade)).toBe(
+      Number(ownTrain + otherTrain),
+    );
     expect(r.score(p1, RankType.ConqueredGold)).toBe(
       Number(p1.gold[GOLD_INDEX_WAR] ?? 0n),
     );