custom flag (1) (#1257)

## Description:
This PR separates only the rendering logic.

The settings and other related parts will be handled when updating the
UI.

The remaining work will be split into two separate PRs.
Once this is done, I’ll move on to the next one.
## 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

src/client/graphics/layers/NameLayer.ts

@@ -10,6 +10,7 @@ import nukeWhiteIcon from "../../../../resources/images/NukeIconWhite.svg";
 import shieldIcon from "../../../../resources/images/ShieldIconBlack.svg";
 import targetIcon from "../../../../resources/images/TargetIcon.svg";
 import traitorIcon from "../../../../resources/images/TraitorIcon.svg";
+import { renderPlayerFlag } from "../../../core/CustomFlag";
 import { PseudoRandom } from "../../../core/PseudoRandom";
 import { Theme } from "../../../core/configuration/Config";
 import { AllPlayers, Cell, nukeTypes } from "../../../core/game/Game";
@@ -190,14 +191,26 @@ export class NameLayer implements Layer {
     element.appendChild(iconsDiv);
 
     const nameDiv = document.createElement("div");
+    const applyFlagStyles = (element: HTMLElement): void => {
+      element.classList.add("player-flag");
+      element.style.opacity = "0.8";
+      element.style.zIndex = "1";
+      element.style.aspectRatio = "3/4";
+    };
+
     if (player.flag()) {
-      const flagImg = document.createElement("img");
-      flagImg.classList.add("player-flag");
-      flagImg.style.opacity = "0.8";
-      flagImg.src = "/flags/" + player.flag() + ".svg";
-      flagImg.style.zIndex = "1";
-      flagImg.style.aspectRatio = "3/4";
-      nameDiv.appendChild(flagImg);
+      const flag = player.flag();
+      if (flag !== undefined && flag !== null && flag.startsWith("!")) {
+        const flagWrapper = document.createElement("div");
+        applyFlagStyles(flagWrapper);
+        renderPlayerFlag(flag, flagWrapper);
+        nameDiv.appendChild(flagWrapper);
+      } else if (flag !== undefined && flag !== null) {
+        const flagImg = document.createElement("img");
+        applyFlagStyles(flagImg);
+        flagImg.src = "/flags/" + flag + ".svg";
+        nameDiv.appendChild(flagImg);
+      }
     }
     nameDiv.classList.add("player-name");
     nameDiv.style.color = this.theme.textColor(player);

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -1,6 +1,8 @@
 import { LitElement, TemplateResult, html } from "lit";
+import { ref } from "lit-html/directives/ref.js";
 import { customElement, property, state } from "lit/decorators.js";
 import { translateText } from "../../../client/Utils";
+import { renderPlayerFlag } from "../../../core/CustomFlag";
 import { EventBus } from "../../../core/EventBus";
 import {
   PlayerProfile,
@@ -206,11 +208,22 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
             : "text-white"}"
         >
           ${player.flag()
-            ? html`<img
-                class="h-8 mr-1 aspect-[3/4]"
-                src=${"/flags/" + player.flag() + ".svg"}
-              />`
-            : ""}
+            ? player.flag()!.startsWith("!")
+              ? html`<div
+                  class="h-8 mr-1 aspect-[3/4] player-flag"
+                  ${ref((el) => {
+                    if (el instanceof HTMLElement) {
+                      requestAnimationFrame(() => {
+                        renderPlayerFlag(player.flag()!, el);
+                      });
+                    }
+                  })}
+                ></div>`
+              : html`<img
+                  class="h-8 mr-1 aspect-[3/4]"
+                  src=${"/flags/" + player.flag()! + ".svg"}
+                />`
+            : html``}
           ${player.name()}
         </div>
         ${player.team() !== null