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

@@ -537,7 +537,8 @@
     "yes": "Yes",
     "no": "No",
     "none": "None",
-    "alliances": "Alliances"
+    "alliances": "Alliances",
+    "flag": "Flag"
   },
   "replay_panel": {
     "replay_speed": "Replay speed",

src/client/graphics/layers/PlayerPanel.ts

@@ -14,6 +14,7 @@ import {
 import { customElement, state } from "lit/decorators.js";
 import { renderNumber, renderTroops } from "../../Utils";
 import { ChatModal } from "./ChatModal";
+import Countries from "../../data/countries.json";
 import { EmojiTable } from "./EmojiTable";
 import { EventBus } from "../../../core/EventBus";
 import { Layer } from "./Layer";
@@ -243,6 +244,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"
@@ -276,7 +282,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">