Clan System Part 1

src/client/ClientGameRunner.ts

@@ -56,6 +56,7 @@ export interface LobbyConfig {
   serverConfig: ServerConfig;
   cosmetics: PlayerCosmeticRefs;
   playerName: string;
+  playerClanTag: string | null;
   gameID: GameID;
   turnstileToken: string | null;
   // GameStartInfo only exists when playing a singleplayer game.
@@ -228,6 +229,7 @@ async function createClientGame(
     gameMap,
     clientID,
     lobbyConfig.playerName,
+    lobbyConfig.playerClanTag,
     lobbyConfig.gameStartInfo.gameID,
     lobbyConfig.gameStartInfo.players,
   );
@@ -301,6 +303,7 @@ export class ClientGameRunner {
       {
         persistentID: getPersistentID(),
         username: this.lobby.playerName,
+        clanTag: this.lobby.playerClanTag ?? undefined,
         clientID: this.clientID,
         stats: update.allPlayersStats[this.clientID],
       },

src/client/GameInfoModal.ts

@@ -4,7 +4,6 @@ import { GameEndInfo } from "../core/Schemas";
 import { GameMapType, hasUnusualThumbnailSize } from "../core/game/Game";
 import { fetchGameById } from "./Api";
 import { terrainMapFileLoader } from "./TerrainMapFileLoader";
-import { UsernameInput } from "./UsernameInput";
 import { renderDuration, translateText } from "./Utils";
 import {
   PlayerInfo,
@@ -28,7 +27,7 @@ export class GameInfoModal extends LitElement {
   @property({ type: String }) gameId: string | null = null;
   @property({ type: String }) rankType = RankType.Lifetime;
 
-  @state() private username: string | null = null;
+  @state() private currentClientID: string | null = null;
   @state() private isLoadingGame: boolean = true;
 
   private ranking: Ranking | null = null;
@@ -155,7 +154,7 @@ export class GameInfoModal extends LitElement {
               .score=${this.ranking?.score(player, this.rankType) ?? 0}
               .rankType=${this.rankType}
               .bestScore=${bestScore}
-              .currentPlayer=${this.username === player.rawUsername}
+              .currentPlayer=${this.currentClientID === player.id}
             ></player-row>
           `,
         )}
@@ -186,26 +185,16 @@ export class GameInfoModal extends LitElement {
     }
   }
 
-  public loadUserName() {
-    const usernameInput = document.querySelector(
-      "username-input",
-    ) as UsernameInput;
-    if (usernameInput) {
-      this.username = usernameInput.getCurrentUsername();
-    }
-  }
-
-  public async loadGame(gameId: string) {
+  public async loadGame(gameId: string, currentClientID: string | null = null) {
     try {
       this.isLoadingGame = true;
-      this.loadUserName();
+      this.currentClientID = currentClientID;
       const session = await fetchGameById(gameId);
       if (!session) return;
 
       this.gameInfo = session.info;
       this.ranking = new Ranking(session);
       this.updateRanking();
-      this.isLoadingGame = false;
       await this.loadMapImage(session.info.config.gameMap);
     } catch (err) {
       console.error("Failed to load game:", err);

src/client/GameModeSelector.ts

@@ -16,6 +16,7 @@ import { PublicLobbySocket } from "./LobbySocket";
 import { JoinLobbyEvent } from "./Main";
 import { SinglePlayerModal } from "./SinglePlayerModal";
 import { terrainMapFileLoader } from "./TerrainMapFileLoader";
+import { UsernameInput } from "./UsernameInput";
 import { getMapName, renderDuration, translateText } from "./Utils";
 
 const CARD_BG = "bg-[color-mix(in_oklab,var(--frenchBlue)_70%,black)]";
@@ -38,20 +39,10 @@ export class GameModeSelector extends LitElement {
    * Returns true if valid, false otherwise.
    */
   private validateUsername(): boolean {
-    const usernameInput = document.querySelector("username-input") as any;
-    if (usernameInput?.isValid?.() === false) {
-      window.dispatchEvent(
-        new CustomEvent("show-message", {
-          detail: {
-            message: usernameInput.validationError,
-            color: "red",
-            duration: 3000,
-          },
-        }),
-      );
-      return false;
-    }
-    return true;
+    const usernameInput = document.querySelector(
+      "username-input",
+    ) as UsernameInput | null;
+    return usernameInput ? usernameInput.validateOrShowError() : true;
   }
 
   connectedCallback() {

src/client/HostLobbyModal.ts

@@ -19,7 +19,7 @@ import {
   TeamCountConfig,
   isValidGameID,
 } from "../core/Schemas";
-import { generateID } from "../core/Util";
+import { clientInfoListsEqual, generateID } from "../core/Util";
 import { getPlayToken } from "./Auth";
 import "./components/baseComponents/Modal";
 import { BaseModal } from "./components/BaseModal";
@@ -90,7 +90,7 @@ export class HostLobbyModal extends BaseModal {
       return;
     }
     this.lobbyCreatorClientID = lobby.lobbyCreatorClientID ?? "";
-    if (lobby.clients) {
+    if (lobby.clients && !clientInfoListsEqual(this.clients, lobby.clients)) {
       this.clients = lobby.clients;
     }
   };

src/client/JoinLobbyModal.ts

@@ -18,6 +18,7 @@ import {
   LobbyInfoEvent,
   PublicGameInfo,
 } from "../core/Schemas";
+import { clientInfoListsEqual, gameConfigsEqual } from "../core/Util";
 import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
 import {
   GameMapSize,
@@ -61,7 +62,9 @@ export class JoinLobbyModal extends BaseModal {
 
   private readonly handleLobbyInfo = (event: LobbyInfoEvent) => {
     const lobby = event.lobby;
-    this.currentClientID = event.myClientID;
+    if (this.currentClientID !== event.myClientID) {
+      this.currentClientID = event.myClientID;
+    }
     // Only stop showing spinner when we have player info
     if (this.isConnecting && lobby.clients) {
       this.isConnecting = false;
@@ -514,21 +517,34 @@ export class JoinLobbyModal extends BaseModal {
   // --- Lobby event handling ---
 
   private updateFromLobby(lobby: GameInfo | PublicGameInfo) {
-    this.players = "clients" in lobby ? (lobby.clients ?? []) : [];
-    this.lobbyStartAt = lobby.startsAt ?? null;
+    const nextPlayers = "clients" in lobby ? (lobby.clients ?? []) : [];
+    if (!clientInfoListsEqual(this.players, nextPlayers)) {
+      this.players = nextPlayers;
+    }
+
+    const nextLobbyStartAt = lobby.startsAt ?? null;
+    if (this.lobbyStartAt !== nextLobbyStartAt) {
+      this.lobbyStartAt = nextLobbyStartAt;
+    }
     this.syncCountdownTimer();
     if (lobby.gameConfig) {
       const mapChanged = this.gameConfig?.gameMap !== lobby.gameConfig.gameMap;
-      this.gameConfig = lobby.gameConfig;
+      // Avoid unnecessary rerenders from per-second lobby_info broadcasts.
+      if (!gameConfigsEqual(this.gameConfig, lobby.gameConfig)) {
+        this.gameConfig = lobby.gameConfig;
+      }
       if (mapChanged) {
         this.loadNationCount();
       }
     }
 
-    this.lobbyCreatorClientID =
+    const nextLobbyCreatorClientID =
       "lobbyCreatorClientID" in lobby
         ? (lobby.lobbyCreatorClientID ?? null)
         : null;
+    if (this.lobbyCreatorClientID !== nextLobbyCreatorClientID) {
+      this.lobbyCreatorClientID = nextLobbyCreatorClientID;
+    }
   }
 
   private startLobbyUpdates() {

src/client/LocalServer.ts

@@ -15,7 +15,6 @@ import {
 import {
   createPartialGameRecord,
   decompressGameRecord,
-  getClanTag,
   replacer,
 } from "../core/Util";
 import { getPersistentID } from "./Auth";
@@ -240,10 +239,10 @@ export class LocalServer {
       {
         persistentID: getPersistentID(),
         username: this.lobbyConfig.playerName,
+        clanTag: this.lobbyConfig.playerClanTag ?? undefined,
         clientID: this.clientID!,
         stats: this.allPlayersStats[this.clientID!],
         cosmetics: this.lobbyConfig.gameStartInfo?.players[0].cosmetics,
-        clanTag: getClanTag(this.lobbyConfig.playerName) ?? undefined,
       },
     ];
     if (this.lobbyConfig.gameStartInfo === undefined) {

src/client/Main.ts

@@ -737,6 +737,10 @@ class Client {
 
   private async handleJoinLobby(event: CustomEvent<JoinLobbyEvent>) {
     const lobby = event.detail;
+    if (this.usernameInput && !this.usernameInput.validateOrShowError()) {
+      return;
+    }
+
     console.log(`joining lobby ${lobby.gameID}`);
     if (this.gameStop !== null) {
       console.log("joining lobby, stopping existing game");
@@ -758,8 +762,8 @@ class Client {
         serverConfig: config,
         cosmetics: await getPlayerCosmeticsRefs(),
         turnstileToken: await this.getTurnstileToken(lobby),
-        playerName:
-          this.usernameInput?.getCurrentUsername() ?? genAnonUsername(),
+        playerName: this.usernameInput?.getUsername() ?? genAnonUsername(),
+        playerClanTag: this.usernameInput?.getClanTag() ?? null,
         gameStartInfo: lobby.gameStartInfo ?? lobby.gameRecord?.info,
         gameRecord: lobby.gameRecord,
       },

src/client/SinglePlayerModal.ts

@@ -633,7 +633,8 @@ export class SinglePlayerModal extends BaseModal {
             players: [
               {
                 clientID,
-                username: usernameInput.getCurrentUsername(),
+                username: usernameInput.getUsername(),
+                clanTag: usernameInput.getClanTag() ?? undefined,
                 cosmetics: await getPlayerCosmetics(),
               },
             ],

src/client/Transport.ts

@@ -399,6 +399,7 @@ export class Transport {
       gameID: this.lobbyConfig.gameID,
       // Note: clientID is not sent - server assigns it based on persistentID
       username: this.lobbyConfig.playerName,
+      clanTag: this.lobbyConfig.playerClanTag ?? undefined,
       cosmetics: this.lobbyConfig.cosmetics,
       turnstileToken: this.lobbyConfig.turnstileToken,
       token: await getPlayToken(),