add support for custom colors (#2103)

## Description:

Added a colors tab in territory patterns modal so players can select
their color.

Refactored the PrivilegeChecker, removed custom flag checks since we no
longer support custom flags.

<img width="479" height="345" alt="Screenshot 2025-09-27 at 5 01 17 PM"
src="https://github.com/user-attachments/assets/ad96da65-f0eb-4731-a861-e6e5fcb4566a"
/>
## 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:

evan

src/client/ClientGameRunner.ts

@@ -5,7 +5,7 @@ import {
   GameID,
   GameRecord,
   GameStartInfo,
-  PlayerPattern,
+  PlayerCosmeticRefs,
   PlayerRecord,
   ServerMessage,
 } from "../core/Schemas";
@@ -51,8 +51,7 @@ import SoundManager from "./sound/SoundManager";
 
 export interface LobbyConfig {
   serverConfig: ServerConfig;
-  pattern: PlayerPattern | undefined;
-  flag: string;
+  cosmetics: PlayerCosmeticRefs;
   playerName: string;
   clientID: ClientID;
   gameID: GameID;

src/client/Main.ts

@@ -509,18 +509,24 @@ class Client {
     }
     const config = await getServerConfigFromClient();
 
+    const pattern = this.userSettings.getSelectedPatternName(
+      await fetchCosmetics(),
+    );
+
     this.gameStop = joinLobby(
       this.eventBus,
       {
         gameID: lobby.gameID,
         serverConfig: config,
-        pattern:
-          this.userSettings.getSelectedPatternName(await fetchCosmetics()) ??
-          undefined,
-        flag:
-          this.flagInput === null || this.flagInput.getCurrentFlag() === "xx"
-            ? ""
-            : this.flagInput.getCurrentFlag(),
+        cosmetics: {
+          color: this.userSettings.getSelectedColor() ?? undefined,
+          patternName: pattern?.name ?? undefined,
+          patternColorPaletteName: pattern?.colorPalette?.name ?? undefined,
+          flag:
+            this.flagInput === null || this.flagInput.getCurrentFlag() === "xx"
+              ? ""
+              : this.flagInput.getCurrentFlag(),
+        },
         playerName: this.usernameInput?.getCurrentUsername() ?? "",
         token: getPlayToken(),
         clientID: lobby.clientID,

src/client/SinglePlayerModal.ts

@@ -449,6 +449,8 @@ export class SinglePlayerModal extends LitElement {
       ? (this.userSettings.getDevOnlyPattern() ?? null)
       : null;
 
+    const selectedColor = this.userSettings.getSelectedColor();
+
     this.dispatchEvent(
       new CustomEvent("join-lobby", {
         detail: {
@@ -466,6 +468,7 @@ export class SinglePlayerModal extends LitElement {
                       ? ""
                       : flagInput.getCurrentFlag(),
                   pattern: selectedPattern ?? undefined,
+                  color: selectedColor ? { color: selectedColor } : undefined,
                 },
               },
             ],

src/client/TerritoryPatternsModal.ts

@@ -25,6 +25,9 @@ export class TerritoryPatternsModal extends LitElement {
   public previewButton: HTMLElement | null = null;
 
   @state() private selectedPattern: PlayerPattern | null;
+  @state() private selectedColor: string | null = null;
+
+  @state() private activeTab: "patterns" | "colors" = "patterns";
 
   private cosmetics: Cosmetics | null = null;
 
@@ -44,6 +47,7 @@ export class TerritoryPatternsModal extends LitElement {
     if (userMeResponse === null) {
       this.userSettings.setSelectedPatternName(undefined);
       this.selectedPattern = null;
+      this.selectedColor = null;
     }
     this.userMeResponse = userMeResponse;
     this.cosmetics = await fetchCosmetics();
@@ -51,6 +55,7 @@ export class TerritoryPatternsModal extends LitElement {
       this.cosmetics !== null
         ? this.userSettings.getSelectedPatternName(this.cosmetics)
         : null;
+    this.selectedColor = this.userSettings.getSelectedColor() ?? null;
     this.refresh();
   }
 
@@ -58,6 +63,31 @@ export class TerritoryPatternsModal extends LitElement {
     return this;
   }
 
+  private renderTabNavigation(): TemplateResult {
+    return html`
+      <div class="flex border-b border-gray-600 mb-4 justify-center">
+        <button
+          class="px-4 py-2 text-sm font-medium transition-colors duration-200 ${this
+            .activeTab === "patterns"
+            ? "text-blue-400 border-b-2 border-blue-400 bg-blue-400/10"
+            : "text-gray-400 hover:text-white"}"
+          @click=${() => (this.activeTab = "patterns")}
+        >
+          ${translateText("territory_patterns.title")}
+        </button>
+        <button
+          class="px-4 py-2 text-sm font-medium transition-colors duration-200 ${this
+            .activeTab === "colors"
+            ? "text-blue-400 border-b-2 border-blue-400 bg-blue-400/10"
+            : "text-gray-400 hover:text-white"}"
+          @click=${() => (this.activeTab = "colors")}
+        >
+          ${translateText("territory_patterns.colors")}
+        </button>
+      </div>
+    `;
+  }
+
   private renderPatternGrid(): TemplateResult {
     const buttons: TemplateResult[] = [];
     for (const pattern of Object.values(this.cosmetics?.patterns ?? {})) {
@@ -105,14 +135,39 @@ export class TerritoryPatternsModal extends LitElement {
     `;
   }
 
+  private renderColorSwatchGrid(): TemplateResult {
+    const hexCodes = (this.userMeResponse?.player.flares ?? [])
+      .filter((flare) => flare.startsWith("color:"))
+      .map((flare) => "#" + flare.split(":")[1]);
+    return html`
+      <div class="flex flex-wrap gap-3 p-2 justify-center items-center">
+        ${hexCodes.map(
+          (hexCode) => html`
+            <div
+              class="w-12 h-12 rounded-lg border-2 border-white/30 cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-lg"
+              style="background-color: ${hexCode};"
+              title="${hexCode}"
+              @click=${() => this.selectColor(hexCode)}
+            ></div>
+          `,
+        )}
+      </div>
+    `;
+  }
+
   render() {
     if (!this.isActive) return html``;
     return html`
       <o-modal
         id="territoryPatternsModal"
-        title="${translateText("territory_patterns.title")}"
+        title="${this.activeTab === "patterns"
+          ? translateText("territory_patterns.title")
+          : translateText("territory_patterns.colors")}"
       >
-        ${this.renderPatternGrid()}
+        ${this.renderTabNavigation()}
+        ${this.activeTab === "patterns"
+          ? this.renderPatternGrid()
+          : this.renderColorSwatchGrid()}
       </o-modal>
     `;
   }
@@ -130,6 +185,8 @@ export class TerritoryPatternsModal extends LitElement {
   }
 
   private selectPattern(pattern: PlayerPattern | null) {
+    this.selectedColor = null;
+    this.userSettings.setSelectedColor(undefined);
     if (pattern === null) {
       this.userSettings.setSelectedPatternName(undefined);
     } else {
@@ -145,8 +202,32 @@ export class TerritoryPatternsModal extends LitElement {
     this.close();
   }
 
+  private selectColor(hexCode: string) {
+    this.selectedPattern = null;
+    this.userSettings.setSelectedPatternName(undefined);
+    this.selectedColor = hexCode;
+    this.userSettings.setSelectedColor(hexCode);
+    this.refresh();
+    this.close();
+  }
+
+  private renderColorPreview(
+    hexCode: string,
+    width: number,
+    height: number,
+  ): TemplateResult {
+    return html`
+      <div
+        class="rounded"
+        style="width: ${width}px; height: ${height}px; background-color: ${hexCode};"
+      ></div>
+    `;
+  }
+
   public async refresh() {
-    const preview = renderPatternPreview(this.selectedPattern ?? null, 48, 48);
+    const preview = this.selectedColor
+      ? this.renderColorPreview(this.selectedColor, 48, 48)
+      : renderPatternPreview(this.selectedPattern ?? null, 48, 48);
     this.requestUpdate();
 
     // Wait for the DOM to be updated and the o-modal element to be available

src/client/Transport.ts

@@ -377,11 +377,7 @@ export class Transport {
       lastTurn: numTurns,
       token: this.lobbyConfig.token,
       username: this.lobbyConfig.playerName,
-      cosmetics: {
-        flag: this.lobbyConfig.flag,
-        patternName: this.lobbyConfig.pattern?.name,
-        patternColorPaletteName: this.lobbyConfig.pattern?.colorPalette?.name,
-      },
+      cosmetics: this.lobbyConfig.cosmetics,
     } satisfies ClientJoinMessage);
   }