support for unlockable flags (#3479)

## Description:

Add support for purchasable/gated flags.

* Create a new "Store" modal that renders both skins & flags
* move all store related logic out of TerritoryPatternsModal
* use nation:code for existing nation flags & flag:key for gated flags
* check if user has the appropriate flags before purchasing

## 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/PatternInput.ts

@@ -46,9 +46,13 @@ export class PatternInput extends LitElement {
     this.pattern = cosmetics.pattern ?? null;
     if (!this.isConnected) return;
     this.isLoading = false;
-    window.addEventListener("pattern-selected", this._onPatternSelected, {
-      signal: this._abortController.signal,
-    });
+    window.addEventListener(
+      "event:user-settings-changed:pattern",
+      this._onPatternSelected,
+      {
+        signal: this._abortController.signal,
+      },
+    );
   }
 
   disconnectedCallback() {
@@ -79,10 +83,10 @@ export class PatternInput extends LitElement {
     }
 
     const showSelect = this.showSelectLabel && this.getIsDefaultPattern();
-    this.style.setProperty("height", "3rem");
+    this.style.setProperty("height", "2.5rem");
     this.style.setProperty(
       "width",
-      showSelect ? "clamp(6.5rem, 28vw, 9.5rem)" : "3rem",
+      showSelect ? "clamp(3.25rem, 14vw, 4.75rem)" : "2.5rem",
     );
   }
 
@@ -136,7 +140,9 @@ export class PatternInput extends LitElement {
         </span>
         ${showSelect
           ? html`<span
-              class="text-[10px] font-black text-white uppercase leading-none break-words w-full text-center px-1"
+              class="${this.adaptiveSize
+                ? "text-[7px] leading-tight px-0.5"
+                : "text-[10px] leading-none break-words px-1"} font-black text-white uppercase w-full text-center"
             >
               ${translateText("territory_patterns.select_skin")}
             </span>`