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/core/Schemas.ts

@@ -115,6 +115,7 @@ export type Player = z.infer<typeof PlayerSchema>;
 export type PlayerCosmetics = z.infer<typeof PlayerCosmeticsSchema>;
 export type PlayerCosmeticRefs = z.infer<typeof PlayerCosmeticRefsSchema>;
 export type PlayerPattern = z.infer<typeof PlayerPatternSchema>;
+export type PlayerColor = z.infer<typeof PlayerColorSchema>;
 export type Flag = z.infer<typeof FlagSchema>;
 export type GameStartInfo = z.infer<typeof GameStartInfoSchema>;
 
@@ -386,6 +387,7 @@ export const FlagSchema = z
 
 export const PlayerCosmeticRefsSchema = z.object({
   flag: FlagSchema.optional(),
+  color: z.string().optional(),
   patternName: PatternNameSchema.optional(),
   patternColorPaletteName: z.string().optional(),
 });
@@ -395,10 +397,17 @@ export const PlayerPatternSchema = z.object({
   patternData: PatternDataSchema,
   colorPalette: ColorPaletteSchema.optional(),
 });
+
+export const PlayerColorSchema = z.object({
+  color: z.string(),
+});
+
 export const PlayerCosmeticsSchema = z.object({
   flag: FlagSchema.optional(),
   pattern: PlayerPatternSchema.optional(),
+  color: PlayerColorSchema.optional(),
 });
+
 export const PlayerSchema = z.object({
   clientID: ID,
   username: UsernameSchema,

src/core/configuration/Config.ts

@@ -183,7 +183,7 @@ export interface Theme {
   // Don't call directly, use PlayerView
   territoryColor(playerInfo: PlayerView): Colord;
   // Don't call directly, use PlayerView
-  borderColor(playerInfo: PlayerView): Colord;
+  borderColor(territoryColor: Colord): Colord;
   // Don't call directly, use PlayerView
   defendedBorderColors(territoryColor: Colord): { light: Colord; dark: Colord };
   focusedBorderColor(): Colord;

src/core/configuration/PastelTheme.ts

@@ -55,19 +55,8 @@ export class PastelTheme implements Theme {
   }
 
   // Don't call directly, use PlayerView
-  borderColor(player: PlayerView): Colord {
-    if (this.borderColorCache.has(player.id())) {
-      return this.borderColorCache.get(player.id())!;
-    }
-    const tc = this.territoryColor(player).rgba;
-    const color = colord({
-      r: Math.max(tc.r - 40, 0),
-      g: Math.max(tc.g - 40, 0),
-      b: Math.max(tc.b - 40, 0),
-    });
-
-    this.borderColorCache.set(player.id(), color);
-    return color;
+  borderColor(territoryColor: Colord): Colord {
+    return territoryColor.darken(0.125);
   }
 
   defendedBorderColors(territoryColor: Colord): {

src/core/game/GameView.ts

@@ -197,36 +197,44 @@ export class PlayerView {
       );
     }
 
+    const defaultTerritoryColor = this.game
+      .config()
+      .theme()
+      .territoryColor(this);
+    const defaultBorderColor = this.game
+      .config()
+      .theme()
+      .borderColor(defaultTerritoryColor);
+
     const pattern = this.cosmetics.pattern;
     if (pattern) {
-      const territoryColor = this.game.config().theme().territoryColor(this);
       pattern.colorPalette ??= {
         name: "",
-        primaryColor: territoryColor.toHex(),
-        secondaryColor: territoryColor.darken(0.125).toHex(),
+        primaryColor: defaultTerritoryColor.toHex(),
+        secondaryColor: defaultBorderColor.toHex(),
       } satisfies ColorPalette;
     }
 
-    if (
-      this.team() === null &&
-      this.cosmetics.pattern?.colorPalette?.primaryColor !== undefined
-    ) {
+    if (this.team() === null) {
       this._territoryColor = colord(
-        this.cosmetics.pattern.colorPalette.primaryColor,
+        this.cosmetics.color?.color ??
+          this.cosmetics.pattern?.colorPalette?.primaryColor ??
+          defaultTerritoryColor.toHex(),
       );
     } else {
-      this._territoryColor = this.game.config().theme().territoryColor(this);
+      this._territoryColor = defaultTerritoryColor;
     }
 
-    if (this.cosmetics.pattern?.colorPalette?.secondaryColor !== undefined) {
-      this._borderColor = colord(
-        this.cosmetics.pattern.colorPalette.secondaryColor,
-      );
-    } else if (this.game.myClientID() === this.data.clientID) {
-      this._borderColor = this.game.config().theme().focusedBorderColor();
-    } else {
-      this._borderColor = this.game.config().theme().borderColor(this);
-    }
+    const maybeFocusedBorderColor =
+      this.game.myClientID() === this.data.clientID
+        ? this.game.config().theme().focusedBorderColor()
+        : defaultBorderColor;
+
+    this._borderColor = new Colord(
+      pattern?.colorPalette?.secondaryColor ??
+        this.cosmetics.color?.color ??
+        maybeFocusedBorderColor.toHex(),
+    );
 
     this._defendedBorderColors = this.game
       .config()

src/core/game/UserSettings.ts

@@ -169,6 +169,20 @@ export class UserSettings {
     }
   }
 
+  getSelectedColor(): string | undefined {
+    const data = localStorage.getItem("settings.territoryColor") ?? undefined;
+    if (data === undefined) return undefined;
+    return data;
+  }
+
+  setSelectedColor(color: string | undefined): void {
+    if (color === undefined) {
+      localStorage.removeItem("settings.territoryColor");
+    } else {
+      localStorage.setItem("settings.territoryColor", color);
+    }
+  }
+
   backgroundMusicVolume(): number {
     return this.getFloat("settings.backgroundMusicVolume", 0);
   }