feature: adds label for the team game mode with player team (#605)

adds label for the teams game mode indicating what team a player is on

## Description:

Implements a sticky label informing the player which team they are on. 
The label will persist through the positioning phase of the round and
disappear once the game round begins.
***
Desktop Image:

![image](https://github.com/user-attachments/assets/094be388-a40d-47ff-ab01-d0dd6363b063)
***
Mobile Image:


![image](https://github.com/user-attachments/assets/3d2f1d47-a887-4bb1-8e13-62cd30259c00)

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [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

## Refers to
https://github.com/openfrontio/OpenFrontIO/issues/604

[Discord suggestion thread
link](https://discord.com/channels/1284581928254701718/1365300537628819647)

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

***
Signed-off-by: MartinIvovIv <https://github.com/martinIvovIv>

src/client/graphics/GameRenderer.ts

@@ -20,6 +20,7 @@ import { NameLayer } from "./layers/NameLayer";
 import { OptionsMenu } from "./layers/OptionsMenu";
 import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay";
 import { PlayerPanel } from "./layers/PlayerPanel";
+import { PlayerTeamLabel } from "./layers/PlayerTeamLabel";
 import { RadialMenu } from "./layers/RadialMenu";
 import { SpawnTimer } from "./layers/SpawnTimer";
 import { StructureLayer } from "./layers/StructureLayer";
@@ -162,6 +163,14 @@ export function createRenderer(
   }
   multiTabModal.game = game;
 
+  const playerTeamLabel = document.querySelector(
+    "player-team-label",
+  ) as PlayerTeamLabel;
+  if (!(playerTeamLabel instanceof PlayerTeamLabel)) {
+    console.error("player team label not found");
+  }
+  playerTeamLabel.game = game;
+
   const layers: Layer[] = [
     new TerrainLayer(game, transformHandler),
     new TerritoryLayer(game, eventBus),
@@ -193,6 +202,7 @@ export function createRenderer(
     teamStats,
     topBar,
     playerPanel,
+    playerTeamLabel,
     multiTabModal,
   ];
 

src/client/graphics/layers/OptionsMenu.ts

@@ -167,7 +167,7 @@ export class OptionsMenu extends LitElement implements Layer {
               children: this.isPaused ? "▶️" : "⏸",
             })}
             <div
-              class="w-15 h-8 lg:w-24 lg:h-10 flex items-center justify-center
+              class="w-15 h-8 lg:w-24 lg:h-10 flex items-center justify-center w-full
                               bg-opacity-50 bg-gray-700 text-opacity-90 text-white
                               rounded text-sm lg:text-xl"
             >

src/client/graphics/layers/PlayerTeamLabel.ts

@@ -0,0 +1,74 @@
+import { Colord } from "colord";
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { GameMode } from "../../../core/game/Game";
+import { GameView } from "../../../core/game/GameView";
+import { Layer } from "./Layer";
+
+@customElement("player-team-label")
+export class PlayerTeamLabel extends LitElement implements Layer {
+  public game: GameView;
+
+  @state()
+  private isTeamsGameMode: boolean = false;
+
+  private isVisible = false;
+
+  private playerTeam: string | null = null;
+
+  private playerColor: Colord = new Colord("#FFFFFF");
+
+  createRenderRoot() {
+    return this;
+  }
+
+  init() {
+    this.isTeamsGameMode =
+      this.game.config().gameConfig().gameMode === GameMode.Team;
+
+    if (this.isTeamsGameMode) {
+      this.isVisible = true;
+      this.requestUpdate();
+    }
+  }
+
+  tick() {
+    if (
+      this.isTeamsGameMode &&
+      !this.playerTeam &&
+      this.game.myPlayer()?.team()
+    ) {
+      this.playerTeam = this.game.myPlayer()!.team();
+      if (this.playerTeam) {
+        this.playerColor = this.game
+          .config()
+          .theme()
+          .teamColor(this.playerTeam);
+        this.requestUpdate();
+      }
+    }
+
+    if (!this.game.inSpawnPhase() && this.isVisible) {
+      this.isVisible = false;
+      this.requestUpdate();
+    }
+  }
+
+  render() {
+    if (!this.isVisible) {
+      return html``;
+    }
+
+    return html`
+      <div
+        class="flex items-center w-full justify-evenly h-8 lg:h-10 top-0 lg:top-4 left-0 lg:left-4 bg-opacity-60 bg-gray-900 rounded-es-sm lg:rounded-lg backdrop-blur-md text-white py-1 lg:p-2"
+        @contextmenu=${(e) => e.preventDefault()}
+      >
+        Your team:
+        <span style="color: ${this.playerColor?.toRgbString()}"
+          >${this.playerTeam} &#10687;</span
+        >
+      </div>
+    `;
+  }
+}

src/client/index.html

@@ -338,6 +338,9 @@
       <options-menu></options-menu>
       <player-info-overlay></player-info-overlay>
     </div>
+    <div class="fixed left-[10px] top-[10px] z-50 w-36 lg:w-48 items-center">
+      <player-team-label></player-team-label>
+    </div>
 
     <div
       class="bottom-0 w-full flex-col-reverse sm:flex-row z-50"