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 <img width="894" height="451" alt="image" src="https://github.com/user-attachments/assets/c83177cf-a1ed-4ee5-9e12-7d2a9d8004cf" /> ### 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
2026-07-04 18:22:00 +00:00 · 2026-01-16 19:14:38 +01:00
parent e1d4b9a00e
commit d758e21351
6 changed files with 54 additions and 44 deletions
@@ -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",
@@ -49,7 +49,9 @@ export class GameInfoModal extends LitElement {
        title="${translateText("game_info_modal.title")}"
        translationKey="main.game_info"
      >
-        <div class="flex flex-col items-center px-25 text-center mb-4">
+        <div
+          class="h-full flex flex-col items-center px-25 text-center mb-4 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent"
+        >
          <div class="w-75 sm:w-125">
            ${this.isLoadingGame
              ? this.renderLoadingAnimation()
@@ -108,7 +110,7 @@ export class GameInfoModal extends LitElement {
    const isUnusualThumbnailSize = hasUnusualThumbnailSize(info.config.gameMap);
    return html`
      <div
-        class="h-37.5 flex relative justify-between rounded-xl bg-blue-600 items-center"
+        class="h-37.5 flex relative justify-between rounded-xl bg-black/20 items-center"
      >
        ${this.mapImage
          ? html`<img
@@ -140,7 +142,7 @@ export class GameInfoModal extends LitElement {
    const bestScore =
      this.rankedPlayers.length > 0 ? this.score(this.rankedPlayers[0]) : 0;
    return html`
-      <ul class="">
+      <ul>
        <ranking-header
          .rankType=${this.rankType}
          @sort=${this.sort}
@@ -63,7 +63,7 @@ export class OModal extends LitElement {
  render() {
    const backdropClass = this.inline
      ? "relative z-10 w-full h-full flex items-stretch bg-transparent"
-      : "fixed inset-0 z-[9999] bg-black/70 flex items-center justify-center overflow-hidden";
+      : "fixed inset-0 z-[9999] bg-black/60 flex items-center justify-center overflow-hidden";

    const wrapperClass = this.inline
      ? "relative flex flex-col w-full h-full m-0 max-w-full max-h-none shadow-none"
@@ -95,7 +95,7 @@ export class OModal extends LitElement {
                    </div>`}
                ${!this.hideHeader && this.title
                  ? html`<div
-                      class="px-[1.4rem] py-[1rem] pt-0 text-2xl font-bold text-white"
+                      class="px-[1.4rem] py-[1rem] text-2xl font-bold text-white"
                    >
                      ${this.title}
                    </div>`
@@ -27,15 +27,13 @@ export class PlayerRow extends LitElement {
    const visibleBorder = player.winner || this.currentPlayer;
    return html`
      <li
-        class="${player.winner
-          ? "bg-linear-to-r via-none from-sky-400 to-blue-700"
-          : "bg-slate-700"} border-2
+        class="${player.winner ? "bg-black/20" : "bg-black/20"} border-b-1
          ${player.winner
-          ? "border-yellow-500"
+          ? "border-yellow-500 border-1 box-content"
          : visibleBorder
-            ? "border-yellow-50"
-            : "border-yellow-50/0"}
-          relative pt-1 pb-1 pr-2 pl-2 sm:pl-5 sm:pr-5 mb-1.25 rounded-lg flex justify-between items-center hover:bg-slate-500 transition duration-150 ease-in-out"
+            ? "border-white/5"
+            : "border-transparent"}
+           relative pt-1 pb-1 pr-2 pl-2 sm:pl-5 sm:pr-5 flex justify-between items-center hover:bg-white/[0.07] transition-colors duration-150 ease-in-out"
      >
        <div
          class="font-bold text-right w-7.5 text-lg text-white absolute -left-10"
@@ -93,7 +91,7 @@ export class PlayerRow extends LitElement {
      </div>
      <div>
        <div
-          class="font-bold rounded-[50%] size-7.5 leading-[1.6rem] border border-gray-200 text-center bg-white text-black"
+          class="font-bold rounded-[50%] size-7.5 leading-[1.6rem] border border-white/10 text-center bg-white/5 text-white/80"
        >
          ${Number(this.score).toFixed(0)}
        </div>
@@ -106,10 +104,10 @@ export class PlayerRow extends LitElement {
    const width = Math.min(Math.max((this.score / bestScore) * 100, 0), 100);
    return html`
      <div class="w-full pr-2.5 m-auto">
-        <div class="h-1.75 bg-neutral-800 w-full">
+        <div class="h-1.75 bg-white/10 w-full">
          <!-- bar background -->
          <div
-            class="h-1.75 bg-white w-(--width)"
+            class="h-1.75 bg-blue-500/50 w-(--width)"
            style="--width: ${width}%;"
          ></div>
        </div>
@@ -121,8 +119,8 @@ export class PlayerRow extends LitElement {
    return html`
      <div
        class="${highlight
-          ? "font-bold text-[18px]"
-          : "leading-[24px]"} min-w-7.5 sm:min-w-15 inline-block text-center"
+          ? "font-bold text-[18px] text-white/80"
+          : "leading-[24px] text-white/40"} min-w-7.5 sm:min-w-15 inline-block text-center"
      >
        ${renderNumber(value)}
      </div>
@@ -157,13 +155,13 @@ export class PlayerRow extends LitElement {
    return html`
      <div class="flex justify-between text-sm align-baseline">
        ${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,
        )}
      </div>
    `;
@@ -189,7 +187,7 @@ export class PlayerRow extends LitElement {

      <div class="flex gap-2">
        <div
-          class="font-bold rounded-md w-15 shrink-0 text-sm sm:w-25 leading-[1.9rem] text-center"
+          class="font-bold rounded-md w-15 text-white/80 text-sm sm:w-25 leading-[1.9rem] text-center"
        >
          ${renderNumber(this.score)}
        </div>
@@ -200,18 +198,20 @@ 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 class="flex flex-col sm:flex-row gap-1 text-left w-full">
+        <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 justify-between items-center w-full">
+          <div class="rounded-md text-sm leading-[1.9rem] text-center w-full">
+            ${this.renderAllTrades()}
+          </div>
+          <img src="/images/GoldCoinIcon.svg" class="w-5 size-3.5 sm:size-5" />
        </div>
-        <img src="/images/GoldCoinIcon.svg" class="w-5 size-3.5 sm:size-5" />
      </div>
    `;
  }
@@ -221,7 +221,7 @@ export class PlayerRow extends LitElement {
      <div class="flex gap-1 items-center w-50 shrink-0">
        ${this.player.tag ? this.renderTag(this.player.tag) : ""}
        <div
-          class="text-xs sm:text-sm font-bold text-ellipsis w-37.5 shrink-0 overflow-hidden whitespace-nowrap"
+          class="text-xs sm:text-sm font-bold tracking-wide text-white/80 text-ellipsis w-37.5 shrink-0 overflow-hidden whitespace-nowrap"
        >
          ${this.player.username}
        </div>
@@ -232,7 +232,7 @@ export class PlayerRow extends LitElement {
  private renderTag(tag: string) {
    return html`
      <div
-        class="bg-white text-black rounded-lg sm:rounded-xl border border-gray-200 text-xs leading-3 sm:leading-4.5 text-blue-900 h-3.75 px-1 sm:h-5 sm:px-2 font-bold"
+        class="px-2.5 py-1 rounded bg-blue-500/10 border border-blue-500/20 text-blue-300 font-bold text-xs tracking-wide group-hover:bg-blue-500/20 transition-colors"
      >
        ${tag}
      </div>
@@ -57,9 +57,9 @@ export class RankingControls extends LitElement {
  private renderButton(type: RankType, active: boolean, label: string) {
    return html`
      <button
-        class="rounded-lg bg-blue-600 text-white text-lg p-3 hover:bg-blue-400 ${active
-          ? "active outline-2 outline-white font-bold"
-          : ""}"
+        class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest hover:text-white hover:bg-white/5 border ${active
+          ? "bg-blue-500/20 text-blue-400 border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+          : "text-white/40 border-transparent"}"
        @click=${() => this.onSort(type)}
      >
        ${translateText(label)}
@@ -113,8 +113,8 @@ export class RankingControls extends LitElement {
    return html`
      <button
        @click=${() => this.onSort(type)}
-        class="rounded-md bg-blue-50 text-black text-sm p-2 hover:bg-blue-200 ${active
-          ? "outline-2 outline-white font-bold"
+        class="text-[10px] font-bold uppercase tracking-wider bg-white/5 border border-white/10 hover:bg-white/20 px-3 py-1 rounded text-white/60 hover:text-white transition-colors ${active
+          ? "outline-1 outline-white/80 font-bold"
          : ""}"
      >
        ${translateText(label)}
@@ -14,7 +14,7 @@ export class RankingHeader extends LitElement {
  render() {
    return html`
      <li
-        class="text-lg bg-gray-800 font-bold relative pt-2 pb-2 pr-5 pl-5 mb-1.25 rounded-md flex justify-between items-center"
+        class="text-lg border-white/5 bg-white/[0.02] text-white/60 text-xs uppercase tracking-wider relative pt-2 pb-2 pr-5 pl-5 flex justify-between items-center"
      >
        ${this.renderHeaderContent()}
      </li>
@@ -60,9 +60,15 @@ export class RankingHeader extends LitElement {
      case RankType.TrainTrade:
        return html`
          <div class="flex justify-between sm:px-17.5 w-full">
-            ${this.renderMultipleChoiceHeaderButton("🚂", RankType.TrainTrade)}
+            ${this.renderMultipleChoiceHeaderButton(
+              translateText("game_info_modal.train_trade"),
+              RankType.TrainTrade,
+            )}
            /
-            ${this.renderMultipleChoiceHeaderButton("🚢", RankType.NavalTrade)}
+            ${this.renderMultipleChoiceHeaderButton(
+              translateText("game_info_modal.naval_trade"),
+              RankType.NavalTrade,
+            )}
          </div>
        `;
      case RankType.ConqueredGold:
@@ -85,7 +91,7 @@ export class RankingHeader extends LitElement {
        @click=${() => this.onSort(type)}
        class="${this.rankType === type
          ? "border-b-2 border-b-white"
-          : nothing} h-[28px]"
+          : nothing}"
      >
        ${label}
      </button>