Patterned territory (#786)

## Description:
This is meant to give players more customization options.
Permission handling hasn’t really been implemented yet.
## 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
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

aotumuri

src/core/game/Game.ts

@@ -349,6 +349,7 @@ export class PlayerInfo {
   public readonly clan: string | null;
 
   constructor(
+    public readonly pattern: string | undefined,
     public readonly flag: string | undefined,
     public readonly name: string,
     public readonly playerType: PlayerType,

src/core/game/GameUpdates.ts

@@ -133,6 +133,7 @@ export interface PlayerUpdate {
   type: GameUpdateType.Player;
   nameViewData?: NameViewData;
   clientID: ClientID | null;
+  pattern: string | undefined;
   flag: string | undefined;
   name: string;
   displayName: string;

src/core/game/GameView.ts

@@ -1,4 +1,5 @@
 import { Config } from "../configuration/Config";
+import { PatternDecoder } from "../Cosmetics";
 import { ClientID, GameID } from "../Schemas";
 import { createRandomName } from "../Util";
 import { WorkerClient } from "../worker/WorkerClient";
@@ -138,6 +139,7 @@ export class UnitView {
 
 export class PlayerView {
   public anonymousName: string | null = null;
+  private decoder?: PatternDecoder;
 
   constructor(
     private game: GameView,
@@ -152,6 +154,12 @@ export class PlayerView {
         this.data.playerType,
       );
     }
+    this.decoder =
+      data.pattern === undefined ? undefined : new PatternDecoder(data.pattern);
+  }
+
+  patternDecoder(): PatternDecoder | undefined {
+    return this.decoder;
   }
 
   async actions(tile: TileRef): Promise<PlayerActions> {
@@ -197,6 +205,11 @@ export class PlayerView {
   flag(): string | undefined {
     return this.data.flag;
   }
+
+  pattern(): string | undefined {
+    return this.data.pattern;
+  }
+
   name(): string {
     return this.anonymousName !== null && userSettings.anonymousNames()
       ? this.anonymousName
@@ -295,6 +308,7 @@ export class PlayerView {
   }
   info(): PlayerInfo {
     return new PlayerInfo(
+      this.pattern(),
       this.flag(),
       this.name(),
       this.type(),

src/core/game/PlayerImpl.ts

@@ -81,7 +81,6 @@ export class PlayerImpl implements Player {
   public _units: Unit[] = [];
   public _tiles: Set<TileRef> = new Set();
 
-  private _flag: string | undefined;
   private _name: string;
   private _displayName: string;
 
@@ -109,7 +108,6 @@ export class PlayerImpl implements Player {
     startTroops: number,
     private readonly _team: Team | null,
   ) {
-    this._flag = playerInfo.flag;
     this._name = sanitizeUsername(playerInfo.name);
     this._targetTroopRatio = 95n;
     this._troops = toInt(startTroops);
@@ -130,6 +128,7 @@ export class PlayerImpl implements Player {
     return {
       type: GameUpdateType.Player,
       clientID: this.clientID(),
+      pattern: this.pattern(),
       flag: this.flag(),
       name: this.name(),
       displayName: this.displayName(),
@@ -178,8 +177,12 @@ export class PlayerImpl implements Player {
     return this._smallID;
   }
 
+  pattern(): string | undefined {
+    return this.playerInfo.pattern;
+  }
+
   flag(): string | undefined {
-    return this._flag;
+    return this.playerInfo.flag;
   }
 
   name(): string {

src/core/game/UserSettings.ts

@@ -33,6 +33,10 @@ export class UserSettings {
     return this.get("settings.leftClickOpensMenu", false);
   }
 
+  territoryPatterns() {
+    return this.get("settings.territoryPatterns", true);
+  }
+
   focusLocked() {
     return false;
     // TODO: renable when performance issues are fixed.
@@ -59,6 +63,10 @@ export class UserSettings {
     this.set("settings.specialEffects", !this.fxLayer());
   }
 
+  toggleTerritoryPatterns() {
+    this.set("settings.territoryPatterns", !this.territoryPatterns());
+  }
+
   toggleDarkMode() {
     this.set("settings.darkMode", !this.darkMode());
     if (this.darkMode()) {
@@ -67,4 +75,14 @@ export class UserSettings {
       document.documentElement.classList.remove("dark");
     }
   }
+
+  private readonly PATTERN_KEY = "territoryPattern";
+
+  getSelectedPattern(): string | undefined {
+    return localStorage.getItem(this.PATTERN_KEY) ?? undefined;
+  }
+
+  setSelectedPattern(base64: string): void {
+    localStorage.setItem(this.PATTERN_KEY, base64);
+  }
 }