Clan System Part 1 (#3276)

## Description:

Properly split out clantags and usernames, a clantag should not be part
of a username.

<img width="285" height="286" alt="image"
src="https://github.com/user-attachments/assets/8ac56e82-b12c-4fc0-9774-e445252a6e61"
/>

https://api.openfront.dev/game/ojkqZFb2


<img width="296" height="596" alt="image"
src="https://github.com/user-attachments/assets/85152f80-c111-4f87-b85b-8516c9c6137b"
/>


https://api.openfront.dev/game/MF32BkVc


requires;
https://github.com/openfrontio/infra/pull/264

## 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

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

w.o.n

src/client/graphics/NameBoxCalculator.ts

@@ -52,7 +52,7 @@ export function placeName(game: Game, player: Player): NameViewData {
     ),
   );
 
-  const fontSize = calculateFontSize(largestRectangle, player.name());
+  const fontSize = calculateFontSize(largestRectangle, player.displayName());
   center = new Cell(center.x, center.y - fontSize / 3);
 
   return {

src/client/graphics/layers/AttacksDisplay.ts

@@ -235,7 +235,7 @@ export class AttacksDisplay extends LitElement implements Layer {
               <span class="truncate ml-1"
                 >${(
                   this.game.playerBySmallID(attack.attackerID) as PlayerView
-                )?.name()}</span
+                )?.displayName()}</span
               >
               ${attack.retreating
                 ? `(${translateText("events_display.retreating")}...)`
@@ -282,7 +282,7 @@ export class AttacksDisplay extends LitElement implements Layer {
               <span class="truncate ml-1"
                 >${(
                   this.game.playerBySmallID(attack.targetID) as PlayerView
-                )?.name()}</span
+                )?.displayName()}</span
               > `,
             onClick: async () => this.attackWarningOnClick(attack),
             className:
@@ -346,7 +346,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     const ownerID = this.game.ownerID(target);
     if (ownerID === 0) return "";
     const player = this.game.playerBySmallID(ownerID) as PlayerView;
-    return player?.name() ?? "";
+    return player?.displayName() ?? "";
   }
 
   private renderBoatIcon(boat: UnitView) {
@@ -409,7 +409,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 >${renderTroops(boat.troops())}</span
               >
               <span class="truncate text-xs ml-1"
-                >${boat.owner()?.name()}</span
+                >${boat.owner()?.displayName()}</span
               >`,
             onClick: () => this.eventBus.emit(new GoToUnitEvent(boat)),
             className:

src/client/graphics/layers/ChatModal.ts

@@ -147,7 +147,7 @@ export class ChatModal extends LitElement {
                             .toHex()};"
                           @click=${() => this.selectPlayer(player)}
                         >
-                          ${player.name()}
+                          ${player.displayName()}
                         </button>
                       `,
                     )}
@@ -216,7 +216,8 @@ export class ChatModal extends LitElement {
   private selectPlayer(player: PlayerView) {
     if (this.previewText) {
       this.previewText =
-        this.selectedPhraseTemplate?.replace("[P1]", player.name()) ?? null;
+        this.selectedPhraseTemplate?.replace("[P1]", player.displayName()) ??
+        null;
       this.selectedPlayer = player;
       this.requiresPlayerSelection = false;
       this.requestUpdate();
@@ -255,13 +256,13 @@ export class ChatModal extends LitElement {
 
   private getSortedFilteredPlayers(): PlayerView[] {
     const sorted = [...this.players].sort((a, b) =>
-      a.name().localeCompare(b.name()),
+      a.displayName().localeCompare(b.displayName()),
     );
     const filtered = sorted.filter((p) =>
-      p.name().toLowerCase().includes(this.playerSearchQuery),
+      p.displayName().toLowerCase().includes(this.playerSearchQuery),
     );
     const others = sorted.filter(
-      (p) => !p.name().toLowerCase().includes(this.playerSearchQuery),
+      (p) => !p.displayName().toLowerCase().includes(this.playerSearchQuery),
     );
     return [...filtered, ...others];
   }

src/client/graphics/layers/EventsDisplay.ts

@@ -283,7 +283,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
       this.addEvent({
         description: translateText("events_display.about_to_expire", {
-          name: other.name(),
+          name: other.displayName(),
         }),
         type: MessageType.RENEW_ALLIANCE,
         duration: this.game.config().allianceExtensionPromptOffset() - 3 * 10, // 3 second buffer
@@ -296,7 +296,7 @@ export class EventsDisplay extends LitElement implements Layer {
           },
           {
             text: translateText("events_display.renew_alliance", {
-              name: other.name(),
+              name: other.displayName(),
             }),
             className: "btn",
             action: () =>
@@ -460,7 +460,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
     this.addEvent({
       description: translateText("events_display.request_alliance", {
-        name: requestor.name(),
+        name: requestor.displayName(),
       }),
       buttons: [
         {
@@ -525,7 +525,7 @@ export class EventsDisplay extends LitElement implements Layer {
     ) as PlayerView;
     this.addEvent({
       description: translateText("events_display.alliance_request_status", {
-        name: recipient.name(),
+        name: recipient.displayName(),
         status: update.accepted
           ? translateText("events_display.alliance_accepted")
           : translateText("events_display.alliance_rejected"),
@@ -569,7 +569,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
       this.addEvent({
         description: translateText("events_display.betrayal_description", {
-          name: betrayed.name(),
+          name: betrayed.displayName(),
           malusPercent: malusPercent,
           durationText: durationText,
         }),
@@ -589,7 +589,7 @@ export class EventsDisplay extends LitElement implements Layer {
       ];
       this.addEvent({
         description: translateText("events_display.betrayed_you", {
-          name: traitor.name(),
+          name: traitor.displayName(),
         }),
         type: MessageType.ALLIANCE_BROKEN,
         highlight: true,
@@ -616,7 +616,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
     this.addEvent({
       description: translateText("events_display.alliance_expired", {
-        name: other.name(),
+        name: other.displayName(),
       }),
       type: MessageType.ALLIANCE_EXPIRED,
       highlight: true,
@@ -641,8 +641,8 @@ export class EventsDisplay extends LitElement implements Layer {
 
     this.addEvent({
       description: translateText("events_display.attack_request", {
-        name: other.name(),
-        target: target.name(),
+        name: other.displayName(),
+        target: target.displayName(),
       }),
       type: MessageType.ATTACK_REQUEST,
       highlight: true,

src/client/graphics/layers/NameLayer.ts

@@ -239,7 +239,7 @@ export class NameLayer implements Layer {
 
     const nameSpan = document.createElement("span");
     nameSpan.className = "player-name-span";
-    nameSpan.innerHTML = player.name();
+    nameSpan.textContent = player.displayName();
     nameDiv.appendChild(nameSpan);
     element.appendChild(nameDiv);
 
@@ -338,7 +338,7 @@ export class NameLayer implements Layer {
     nameDiv.style.color = render.fontColor;
     const span = nameDiv.querySelector(".player-name-span");
     if (span) {
-      span.innerHTML = render.player.name();
+      span.textContent = render.player.displayName();
     }
     if (flagDiv) {
       flagDiv.style.height = `${render.fontSize}px`;

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -380,7 +380,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
                     src=${"/flags/" + player.cosmetics.flag! + ".svg"}
                   />`
               : html``}
-            <span>${player.name()}</span>
+            <span>${player.displayName()}</span>
             ${playerTeam !== "" && player.type() !== PlayerType.Bot
               ? html`<div class="flex flex-col leading-tight">
                   <span class="text-gray-400 text-xs font-normal"
@@ -488,7 +488,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     return html`
       <div class="p-2">
         <div class="font-bold mb-1 ${isAlly ? "text-green-500" : "text-white"}">
-          ${unit.owner().name()}
+          ${unit.owner().displayName()}
         </div>
         <div class="mt-1">
           <div class="text-sm opacity-80">${unit.type()}</div>

src/client/graphics/layers/PlayerModerationModal.ts

@@ -65,7 +65,7 @@ export class PlayerModerationModal extends LitElement {
     if (!targetClientID || targetClientID.length === 0) return;
 
     const confirmed = confirm(
-      translateText("player_panel.kick_confirm", { name: other.name() }),
+      translateText("player_panel.kick_confirm", { name: other.displayName() }),
     );
     if (!confirmed) return;
 
@@ -142,9 +142,9 @@ export class PlayerModerationModal extends LitElement {
             >
               <div
                 class="text-sm font-semibold text-zinc-100 truncate"
-                title=${other.name()}
+                title=${other.displayName()}
               >
-                ${other.name()}
+                ${other.displayName()}
               </div>
             </div>
 

src/client/graphics/layers/PlayerPanel.ts

@@ -505,9 +505,9 @@ export class PlayerPanel extends LitElement implements Layer {
         <div class="flex-1 min-w-0">
           <h2
             class="text-xl font-bold tracking-[-0.01em] text-zinc-50 truncate"
-            title=${other.name()}
+            title=${other.displayName()}
           >
-            ${other.name()}
+            ${other.displayName()}
           </h2>
         </div>
         ${chip
@@ -626,7 +626,7 @@ export class PlayerPanel extends LitElement implements Layer {
 
     const nameCollator = new Intl.Collator(undefined, { sensitivity: "base" });
     const alliesSorted = [...allies].sort((a, b) =>
-      nameCollator.compare(a.name(), b.name()),
+      nameCollator.compare(a.displayName(), b.displayName()),
     );
 
     return html`
@@ -669,9 +669,9 @@ export class PlayerPanel extends LitElement implements Layer {
                              rounded-md border border-white/10 bg-white/5
                              px-2.5 py-1 text-[14px] text-zinc-100
                              hover:bg-white/8 active:scale-[0.99] transition"
-                      title=${p.name()}
+                      title=${p.displayName()}
                     >
-                      <span class="truncate">${p.name()}</span>
+                      <span class="truncate">${p.displayName()}</span>
                     </li>`,
                 )}
           </ul>

src/client/graphics/layers/WinModal.ts

@@ -334,7 +334,7 @@ export class WinModal extends LitElement implements Layer {
           crazyGamesSDK.happytime();
         } else {
           this._title = translateText("win_modal.other_won", {
-            player: winner.name(),
+            player: winner.displayName(),
           });
           this.isWin = false;
         }