Leaderboard improvements (#1424)

## Description:

1. Made leaderboard smaller
2. replaced show top 5/show all with a +/- to save space
3. show leaderboard by default on larger screens

<img width="458" height="393" alt="Screenshot 2025-07-13 at 5 27 10 PM"
src="https://github.com/user-attachments/assets/c18c732b-8b1e-4b71-89aa-b807ceb91e30"
/>

## 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
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

resources/lang/en.json

@@ -432,9 +432,7 @@
     "team": "Team",
     "owned": "Owned",
     "gold": "Gold",
-    "troops": "Troops",
+    "troops": "Troops"
-    "show_top_5": "Show Top 5",
-    "show_all": "Show All"
   },
   "player_info_overlay": {
     "type": "Type",

src/client/graphics/layers/GameLeftSidebar.ts

@@ -22,6 +22,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
 
   private playerColor: Colord = new Colord("#FFFFFF");
   public game: GameView;
+  private _shownOnInit = false;
 
   createRenderRoot() {
     return this;
@@ -32,6 +33,11 @@ export class GameLeftSidebar extends LitElement implements Layer {
     if (this.isTeamGame) {
       this.isPlayerTeamLabelVisible = true;
     }
+    // Make it visible by default on large screens
+    if (window.innerWidth >= 1024) {
+      // lg breakpoint
+      this._shownOnInit = true;
+    }
     this.requestUpdate();
   }
 
@@ -49,6 +55,12 @@ export class GameLeftSidebar extends LitElement implements Layer {
       }
     }
 
+    if (this._shownOnInit && !this.game.inSpawnPhase()) {
+      this._shownOnInit = false;
+      this.isLeaderboardShow = true;
+      this.requestUpdate();
+    }
+
     if (!this.game.inSpawnPhase()) {
       this.isPlayerTeamLabelVisible = false;
       this.requestUpdate();

src/client/graphics/layers/Leaderboard.ts

@@ -40,7 +40,6 @@ export class Leaderboard extends LitElement implements Layer {
   players: Entry[] = [];
 
   @property({ type: Boolean }) visible = false;
-  private _shownOnInit = false;
   private showTopFive = true;
 
   @state()
@@ -57,10 +56,6 @@ export class Leaderboard extends LitElement implements Layer {
 
   tick() {
     if (this.game === null) throw new Error("Not initialized");
-    if (!this._shownOnInit && !this.game.inSpawnPhase()) {
-      this._shownOnInit = true;
-      this.updateLeaderboard();
-    }
     if (!this.visible) return;
     if (this.game.ticks() % 10 === 0) {
       this.updateLeaderboard();
@@ -174,37 +169,25 @@ export class Leaderboard extends LitElement implements Layer {
     }
     return html`
       <div
-        class="max-h-[35vh] overflow-y-auto text-white text-xs md:text-sm md:max-h-[50vh]  ${this
+        class="max-h-[35vh] overflow-y-auto text-white text-xs md:text-xs lg:text-sm md:max-h-[50vh]  ${this
           .visible
           ? ""
           : "hidden"}"
         @contextmenu=${(e: Event) => e.preventDefault()}
       >
-        <button
-          class="mb-2 px-2 py-1 md:px-2.5 md:py-1.5 text-xs md:text-sm lg:text-base border border-white/20 hover:bg-white/10"
-          @click=${() => {
-            this.showTopFive = !this.showTopFive;
-            this.updateLeaderboard();
-          }}
-        >
-          ${this.showTopFive
-            ? translateText("leaderboard.show_all")
-            : translateText("leaderboard.show_top_5")}
-        </button>
-
         <div
-          class="grid bg-gray-800/70 w-full text-xs md:text-sm lg:text-base"
+          class="grid bg-gray-800/70 w-full text-xs md:text-xs lg:text-sm"
-          style="grid-template-columns: 35px 100px 85px 65px 65px;"
+          style="grid-template-columns: 30px 100px 70px 55px 75px;"
         >
           <div class="contents font-bold bg-gray-700/50">
-            <div class="py-1.5 md:py-2.5 text-center border-b border-slate-500">
+            <div class="py-1 md:py-2 text-center border-b border-slate-500">
               #
             </div>
-            <div class="py-1.5 md:py-2.5 text-center border-b border-slate-500">
+            <div class="py-1 md:py-2 text-center border-b border-slate-500">
               ${translateText("leaderboard.player")}
             </div>
             <div
-              class="py-1.5 md:py-2.5 text-center border-b border-slate-500 cursor-pointer"
+              class="py-1 md:py-2 text-center border-b border-slate-500 cursor-pointer whitespace-nowrap"
               @click=${() => this.setSort("tiles")}
             >
               ${translateText("leaderboard.owned")}
@@ -215,7 +198,7 @@ export class Leaderboard extends LitElement implements Layer {
                 : ""}
             </div>
             <div
-              class="py-1.5 md:py-2.5 text-center border-b border-slate-500 cursor-pointer"
+              class="py-1 md:py-2 text-center border-b border-slate-500 cursor-pointer whitespace-nowrap"
               @click=${() => this.setSort("gold")}
             >
               ${translateText("leaderboard.gold")}
@@ -226,7 +209,7 @@ export class Leaderboard extends LitElement implements Layer {
                 : ""}
             </div>
             <div
-              class="py-1.5 md:py-2.5 text-center border-b border-slate-500 cursor-pointer"
+              class="py-1 md:py-2 text-center border-b border-slate-500 cursor-pointer whitespace-nowrap"
               @click=${() => this.setSort("troops")}
             >
               ${translateText("leaderboard.troops")}
@@ -248,29 +231,21 @@ export class Leaderboard extends LitElement implements Layer {
                   : ""} cursor-pointer"
                 @click=${() => this.handleRowClickPlayer(player.player)}
               >
-                <div
+                <div class="py-1 md:py-2 text-center border-b border-slate-500">
-                  class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
-                >
                   ${player.position}
                 </div>
                 <div
-                  class="py-1.5 md:py-2.5 text-center border-b border-slate-500 truncate"
+                  class="py-1 md:py-2 text-center border-b border-slate-500 truncate"
                 >
                   ${player.name}
                 </div>
-                <div
+                <div class="py-1 md:py-2 text-center border-b border-slate-500">
-                  class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
-                >
                   ${player.score}
                 </div>
-                <div
+                <div class="py-1 md:py-2 text-center border-b border-slate-500">
-                  class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
-                >
                   ${player.gold}
                 </div>
-                <div
+                <div class="py-1 md:py-2 text-center border-b border-slate-500">
-                  class="py-1.5 md:py-2.5 text-center border-b border-slate-500"
-                >
                   ${player.troops}
                 </div>
               </div>
@@ -278,6 +253,16 @@ export class Leaderboard extends LitElement implements Layer {
           )}
         </div>
       </div>
+
+      <button
+        class="mt-1 px-1.5 py-0.5 md:px-2 md:py-0.5 text-xs md:text-xs lg:text-sm border border-white/20 hover:bg-white/10 text-white mx-auto block"
+        @click=${() => {
+          this.showTopFive = !this.showTopFive;
+          this.updateLeaderboard();
+        }}
+      >
+        ${this.showTopFive ? "+" : "-"}
+      </button>
     `;
   }
 }