From debcadf34bbb33b887946b684cf27d907898084b Mon Sep 17 00:00:00 2001
From: Tamer Suliman <84022203+TLS15@users.noreply.github.com>
Date: Tue, 12 Aug 2025 02:58:56 +0200
Subject: [PATCH] Make the player info overlay collapsible (#1768)

## Description:

Describe the PR.
This PR makes the playerInfoOverlay collapsible by clicking on the
player name.

This overlay was covering a decent chunk of the mobile screen.


![1754819765364](https://github.com/user-attachments/assets/a74b0853-bdaa-4c1b-b28d-a270665f2955)

Now the details can be toggled by just clicking on the name freeing a
lot of the screen on mobile.

![1754819765361](https://github.com/user-attachments/assets/800917b9-1a98-4aa5-b4bd-e9c35e47e9d3)

## 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 have read and accepted the CLA agreement (only required once).

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

DISCORD_USERNAME
tls_15

Co-authored-by: Drills Kibo <59177241+drillskibo@users.noreply.github.com>
---
 .../graphics/layers/PlayerInfoOverlay.ts      | 125 ++++++++++--------
 1 file changed, 69 insertions(+), 56 deletions(-)

diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index f78b1cb6a..dab035023 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -66,6 +66,8 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
   private lastMouseUpdate = 0;
 
+  private showDetails = true;
+
   init() {
     this.eventBus.on(MouseMoveEvent, (e: MouseMoveEvent) =>
       this.onMouseEvent(e),
@@ -219,10 +221,14 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
     return html`
       <div class="p-2">
-        <div
+        <button
           class="text-bold text-sm lg:text-lg font-bold mb-1 inline-flex break-all ${isFriendly
             ? "text-green-500"
             : "text-white"}"
+          @click=${() => {
+            this.showDetails = !this.showDetails;
+            this.requestUpdate?.();
+          }}
         >
           ${player.cosmetics.flag
             ? player.cosmetics.flag!.startsWith("!")
@@ -242,62 +248,69 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
                 />`
             : html``}
           ${player.name()}
-        </div>
-        ${player.team() !== null
-          ? html`<div class="text-sm opacity-80">
-              ${translateText("player_info_overlay.team")}: ${player.team()}
-            </div>`
+        </button>
+
+        <!-- Collapsible section -->
+        ${this.showDetails
+          ? html`
+              ${player.team() !== null
+                ? html`<div class="text-sm opacity-80">
+                    ${translateText("player_info_overlay.team")}:
+                    ${player.team()}
+                  </div>`
+                : ""}
+              <div class="text-sm opacity-80">
+                ${translateText("player_info_overlay.type")}: ${playerType}
+              </div>
+              ${player.troops() >= 1
+                ? html`<div class="text-sm opacity-80" translate="no">
+                    ${translateText("player_info_overlay.d_troops")}:
+                    ${renderTroops(player.troops())}
+                  </div>`
+                : ""}
+              ${attackingTroops >= 1
+                ? html`<div class="text-sm opacity-80" translate="no">
+                    ${translateText("player_info_overlay.a_troops")}:
+                    ${renderTroops(attackingTroops)}
+                  </div>`
+                : ""}
+              <div class="text-sm opacity-80" translate="no">
+                ${translateText("player_info_overlay.gold")}:
+                ${renderNumber(player.gold())}
+              </div>
+              ${this.displayUnitCount(
+                player,
+                UnitType.Port,
+                "player_info_overlay.ports",
+              )}
+              ${this.displayUnitCount(
+                player,
+                UnitType.City,
+                "player_info_overlay.cities",
+              )}
+              ${this.displayUnitCount(
+                player,
+                UnitType.Factory,
+                "player_info_overlay.factories",
+              )}
+              ${this.displayUnitCount(
+                player,
+                UnitType.MissileSilo,
+                "player_info_overlay.missile_launchers",
+              )}
+              ${this.displayUnitCount(
+                player,
+                UnitType.SAMLauncher,
+                "player_info_overlay.sams",
+              )}
+              ${this.displayUnitCount(
+                player,
+                UnitType.Warship,
+                "player_info_overlay.warships",
+              )}
+              ${relationHtml}
+            `
           : ""}
-        <div class="text-sm opacity-80">
-          ${translateText("player_info_overlay.type")}: ${playerType}
-        </div>
-        ${player.troops() >= 1
-          ? html`<div class="text-sm opacity-80" translate="no">
-              ${translateText("player_info_overlay.d_troops")}:
-              ${renderTroops(player.troops())}
-            </div>`
-          : ""}
-        ${attackingTroops >= 1
-          ? html`<div class="text-sm opacity-80" translate="no">
-              ${translateText("player_info_overlay.a_troops")}:
-              ${renderTroops(attackingTroops)}
-            </div>`
-          : ""}
-        <div class="text-sm opacity-80" translate="no">
-          ${translateText("player_info_overlay.gold")}:
-          ${renderNumber(player.gold())}
-        </div>
-        ${this.displayUnitCount(
-          player,
-          UnitType.Port,
-          "player_info_overlay.ports",
-        )}
-        ${this.displayUnitCount(
-          player,
-          UnitType.City,
-          "player_info_overlay.cities",
-        )}
-        ${this.displayUnitCount(
-          player,
-          UnitType.Factory,
-          "player_info_overlay.factories",
-        )}
-        ${this.displayUnitCount(
-          player,
-          UnitType.MissileSilo,
-          "player_info_overlay.missile_launchers",
-        )}
-        ${this.displayUnitCount(
-          player,
-          UnitType.SAMLauncher,
-          "player_info_overlay.sams",
-        )}
-        ${this.displayUnitCount(
-          player,
-          UnitType.Warship,
-          "player_info_overlay.warships",
-        )}
-        ${relationHtml}
       </div>
     `;
   }