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/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);
   }