Merge branch 'main' into patterned-territory

src/client/PublicLobby.ts

@@ -134,7 +134,7 @@ export class PublicLobby extends LitElement {
               </div>
             </div>
             <div class="flex flex-col items-center">
-              <div class="text-md font-medium text-blue-100 mb-2">
+              <div class="text-md font-medium text-blue-100 mb-4">
                 ${lobby.numClients} / ${lobby.gameConfig.maxPlayers}
               </div>
               <div class="text-md font-medium text-blue-100">

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

@@ -345,6 +345,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"