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/components/PurchaseButton.ts

@@ -0,0 +1,37 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Product } from "../../core/CosmeticSchemas";
+import { translateText } from "../Utils";
+
+@customElement("purchase-button")
+export class PurchaseButton extends LitElement {
+  @property({ type: Object })
+  product!: Product;
+
+  @property({ type: Function })
+  onPurchase?: () => void;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleClick(e: Event) {
+    e.stopPropagation();
+    this.onPurchase?.();
+  }
+
+  render() {
+    return html`
+      <div class="no-crazygames w-full mt-2">
+        <button
+          class="w-full px-4 py-2 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg text-xs font-bold uppercase tracking-wider cursor-pointer transition-all duration-200
+           hover:bg-green-500/30 hover:shadow-[0_0_15px_rgba(74,222,128,0.2)]"
+          @click=${this.handleClick}
+        >
+          ${translateText("territory_patterns.purchase")}
+          <span class="ml-1 text-white/60">(${this.product.price})</span>
+        </button>
+      </div>
+    `;
+  }
+}