Fix flag preview not updating after selecting a new flag (#1812)

## Description:
Fixed to redraw when triggered by a custom event (flag-change).
Fixes https://github.com/openfrontio/OpenFrontIO/issues/1803

## 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:
aotumuri

src/client/FlagInput.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { renderPlayerFlag } from "../core/CustomFlag";
+import { FlagSchema } from "../core/Schemas";
 const flagKey: string = "flag";
 
 @customElement("flag-input")
@@ -41,10 +42,24 @@ export class FlagInput extends LitElement {
     );
   }
 
+  private updateFlag = (ev: Event) => {
+    const e = ev as CustomEvent<{ flag: string }>;
+    if (!FlagSchema.safeParse(e.detail.flag).success) return;
+    if (this.flag !== e.detail.flag) {
+      this.flag = e.detail.flag;
+    }
+  };
+
   connectedCallback() {
     super.connectedCallback();
     this.flag = this.getStoredFlag();
     this.dispatchFlagEvent();
+    window.addEventListener("flag-change", this.updateFlag as EventListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("flag-change", this.updateFlag as EventListener);
   }
 
   createRenderRoot() {