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/UserSettingModal.ts

@@ -10,14 +10,8 @@ import "./components/baseComponents/setting/SettingSlider";
 import "./components/baseComponents/setting/SettingToggle";
 import { BaseModal } from "./components/BaseModal";
 import { modalHeader } from "./components/ui/ModalHeader";
-import "./FlagInputModal";
 import { Platform } from "./Platform";
 
-interface FlagInputModalElement extends HTMLElement {
-  open(): void;
-  returnTo?: string;
-}
-
 const isMac = Platform.isMac;
 
 const DefaultKeybinds: Record<string, string> = {
@@ -396,16 +390,6 @@ export class UserSettingModal extends BaseModal {
     this.userSettings.set("settings.performanceOverlay", enabled);
   }
 
-  private openFlagSelector = () => {
-    const flagInputModal =
-      document.querySelector<FlagInputModalElement>("#flag-input-modal");
-    if (flagInputModal?.open) {
-      this.close();
-      flagInputModal.returnTo = "#" + (this.id || "page-settings");
-      flagInputModal.open();
-    }
-  };
-
   render() {
     const activeContent =
       this.activeTab === "basic"
@@ -786,35 +770,6 @@ export class UserSettingModal extends BaseModal {
 
   private renderBasicSettings() {
     return html`
-      <!-- 🚩 Flag Selector -->
-      <div
-        class="flex flex-row items-center justify-between w-full p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all gap-4 cursor-pointer"
-        role="button"
-        tabindex="0"
-        @click=${this.openFlagSelector}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            this.openFlagSelector();
-          }
-        }}
-      >
-        <div class="flex flex-col flex-1 min-w-0 mr-4">
-          <div class="text-white font-bold text-base block mb-1">
-            ${translateText("flag_input.title")}
-          </div>
-          <div class="text-white/50 text-sm leading-snug">
-            ${translateText("flag_input.button_title")}
-          </div>
-        </div>
-
-        <div
-          class="relative inline-block w-12 h-8 shrink-0 rounded overflow-hidden border border-white/20"
-        >
-          <flag-input class="w-full h-full pointer-events-none"></flag-input>
-        </div>
-      </div>
-
       <!-- 🌙 Dark Mode -->
       <setting-toggle
         label="${translateText("user_setting.dark_mode_label")}"