From 5a8eb65586a4214aa183246012eacbaf0f1d833e Mon Sep 17 00:00:00 2001
From: yanir <100792995+Boostry123@users.noreply.github.com>
Date: Fri, 22 Aug 2025 22:10:40 +0300
Subject: [PATCH] added the ability to see players Flag inside the player panel
 with full flag name. (#1892)

## Description:

Sometimes I found it interesting to know what flag players choose, now
its possible with this new feature.

Feature added to the players panel.

- Added the Full flag name
- Added the flag svg
- countries with no flag, the whole section will be hidden
<img width="250" height="388" alt="My own Flag"
src="https://github.com/user-attachments/assets/69eda520-83f7-4864-8cc1-f19419f13143"
/>

<img width="250" height="388" alt="Bot with flag"
src="https://github.com/user-attachments/assets/1d4e9fbd-1b63-4dae-8bf7-38d3e78a3c80"
/>

<img width="250" height="388" alt="Bot with no flag"
src="https://github.com/user-attachments/assets/7ae06b30-4e26-49d6-a136-23d82c11b1f6"
/>


## 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 ( Made local
tests seems to all work with long or short names)
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## My discord:

boostry

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>
---
 resources/lang/en.json                    |  3 ++-
 src/client/graphics/layers/PlayerPanel.ts | 24 ++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 795f7db1b..c6d931b72 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -549,7 +549,8 @@
     "yes": "Yes",
     "no": "No",
     "none": "None",
-    "alliances": "Alliances"
+    "alliances": "Alliances",
+    "flag": "Flag"
   },
   "replay_panel": {
     "replay_speed": "Replay speed",
diff --git a/src/client/graphics/layers/PlayerPanel.ts b/src/client/graphics/layers/PlayerPanel.ts
index 7f4f425db..0f049a7cd 100644
--- a/src/client/graphics/layers/PlayerPanel.ts
+++ b/src/client/graphics/layers/PlayerPanel.ts
@@ -26,6 +26,7 @@ import {
 import { renderNumber, renderTroops } from "../../Utils";
 import { UIState } from "../UIState";
 import { ChatModal } from "./ChatModal";
+import Countries from "../../data/countries.json";
 import { EmojiTable } from "./EmojiTable";
 import { Layer } from "./Layer";
 
@@ -244,6 +245,11 @@ export class PlayerPanel extends LitElement implements Layer {
     const canTarget = this.actions?.interaction?.canTarget;
     const canEmbargo = this.actions?.interaction?.canEmbargo;
 
+    //flag icon in the playerPanel
+    const flagCode = other.cosmetics.flag;
+    const country = typeof flagCode === "string" ? Countries.find((c) => c.code === flagCode) : undefined;
+    const flagName = country?.name;
+
     return html`
       <div
         class="fixed inset-0 flex items-center justify-center z-[1001] pointer-events-none overflow-auto"
@@ -277,7 +283,23 @@ export class PlayerPanel extends LitElement implements Layer {
                   ${other?.name()}
                 </div>
               </div>
-
+              <!-- Flag -->
+              ${country
+                ? html`
+                    <div>
+                      <div class="text-white text-opacity-80 text-sm px-2">
+                        ${translateText("player_panel.flag")}
+                      </div>
+                      <div
+                        class="px-4 h-8 lg:h-10 flex items-center justify-center gap-4
+                        bg-opacity-50 bg-gray-700 text-opacity-90 text-white
+                        rounded text-sm lg:text-xl w-full"
+                      >
+                        ${flagName} <img src="/flags/${flagCode}.svg" width=60 height=60>
+                      </div>
+                    </div>
+                  `
+                : ""}
               <!-- Resources section -->
               <div class="grid grid-cols-2 gap-2">
                 <div class="flex flex-col gap-1">