From d758e213513990b5c9a1470ed195533c6ed89adf Mon Sep 17 00:00:00 2001 From: DevelopingTom Date: Fri, 16 Jan 2026 19:14:38 +0100 Subject: [PATCH] Restyle game rank modal (#2918) ## Description: The game rank modal was still using the old style, which clashes strongly with the new one. This PR changes changes the modal style to be consistent with the new one: ### Old image ### New ![redesign](https://github.com/user-attachments/assets/ecf4f0ae-88f0-433c-90be-f41447e17afe) Tagged as `v29` to have a consistent style in the same version. ## 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 --- resources/lang/en.json | 2 + src/client/GameInfoModal.ts | 8 ++- src/client/components/baseComponents/Modal.ts | 4 +- .../baseComponents/ranking/PlayerRow.ts | 60 +++++++++---------- .../baseComponents/ranking/RankingControls.ts | 10 ++-- .../baseComponents/ranking/RankingHeader.ts | 14 +++-- 6 files changed, 54 insertions(+), 44 deletions(-) diff --git a/resources/lang/en.json b/resources/lang/en.json index c18d7be1a..d3c3d4e62 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -224,6 +224,8 @@ "total_gold": "Total", "all_gold": "All gold", "trade": "Trade", + "train_trade": "Train", + "naval_trade": "Tradeship", "conquest_gold": "Conquered player gold", "stolen_gold": "Stolen with warships", "num_of_conquests": "Number of conquered players", diff --git a/src/client/GameInfoModal.ts b/src/client/GameInfoModal.ts index a1f50e4b7..917665a93 100644 --- a/src/client/GameInfoModal.ts +++ b/src/client/GameInfoModal.ts @@ -49,7 +49,9 @@ export class GameInfoModal extends LitElement { title="${translateText("game_info_modal.title")}" translationKey="main.game_info" > -
+
${this.isLoadingGame ? this.renderLoadingAnimation() @@ -108,7 +110,7 @@ export class GameInfoModal extends LitElement { const isUnusualThumbnailSize = hasUnusualThumbnailSize(info.config.gameMap); return html`
${this.mapImage ? html` 0 ? this.score(this.rankedPlayers[0]) : 0; return html` -
    +
      `} ${!this.hideHeader && this.title ? html`
      ${this.title}
      ` diff --git a/src/client/components/baseComponents/ranking/PlayerRow.ts b/src/client/components/baseComponents/ranking/PlayerRow.ts index 9989962a9..773188c8b 100644 --- a/src/client/components/baseComponents/ranking/PlayerRow.ts +++ b/src/client/components/baseComponents/ranking/PlayerRow.ts @@ -27,15 +27,13 @@ export class PlayerRow extends LitElement { const visibleBorder = player.winner || this.currentPlayer; return html`
    • ${Number(this.score).toFixed(0)}
      @@ -106,10 +104,10 @@ export class PlayerRow extends LitElement { const width = Math.min(Math.max((this.score / bestScore) * 100, 0), 100); return html`
      -
      +
      @@ -121,8 +119,8 @@ export class PlayerRow extends LitElement { return html`
      ${renderNumber(value)}
      @@ -157,13 +155,13 @@ export class PlayerRow extends LitElement { return html`
      ${this.renderMultiScoreType( - Number(navalTrade), - this.rankType === RankType.NavalTrade, + Number(ownTrainTrade + otherTrainTrade), + this.rankType === RankType.TrainTrade, )} / ${this.renderMultiScoreType( - Number(ownTrainTrade + otherTrainTrade), - this.rankType === RankType.TrainTrade, + Number(navalTrade), + this.rankType === RankType.NavalTrade, )}
      `; @@ -189,7 +187,7 @@ export class PlayerRow extends LitElement {
      ${renderNumber(this.score)}
      @@ -200,18 +198,20 @@ export class PlayerRow extends LitElement { private renderTradeScore() { return html` -
      - ${this.renderPlayerIcon()} -
      ${this.renderPlayerName()}
      -
      - -
      -
      - ${this.renderAllTrades()} +
      +
      + ${this.renderPlayerIcon()} +
      + ${this.renderPlayerName()} +
      +
      + +
      +
      + ${this.renderAllTrades()} +
      +
      -
      `; } @@ -221,7 +221,7 @@ export class PlayerRow extends LitElement {
      ${this.player.tag ? this.renderTag(this.player.tag) : ""}
      ${this.player.username}
      @@ -232,7 +232,7 @@ export class PlayerRow extends LitElement { private renderTag(tag: string) { return html`
      ${tag}
      diff --git a/src/client/components/baseComponents/ranking/RankingControls.ts b/src/client/components/baseComponents/ranking/RankingControls.ts index 25321d8aa..e32933efe 100644 --- a/src/client/components/baseComponents/ranking/RankingControls.ts +++ b/src/client/components/baseComponents/ranking/RankingControls.ts @@ -57,9 +57,9 @@ export class RankingControls extends LitElement { private renderButton(type: RankType, active: boolean, label: string) { return html`