bugfix: territory pattern modal opening on page load (#1871)

## Description:

The territory modal was opening on page load, this has it not open on
page load, but refresh the button on onUserMe().

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

@@ -215,7 +215,7 @@ class Client {
     if (patternButton === null)
       throw new Error("territory-patterns-input-preview-button");
     territoryModal.previewButton = patternButton;
-    territoryModal.updatePreview();
+    territoryModal.refresh();
     patternButton.addEventListener("click", () => {
       territoryModal.open();
     });

src/client/TerritoryPatternsModal.ts

@@ -40,16 +40,6 @@ export class TerritoryPatternsModal extends LitElement {
     super();
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("keydown", this.handleKeyDown);
-    this.updateComplete.then(() => {
-      this.open().then(() => {
-        this.updatePreview();
-      });
-    });
-  }
-
   disconnectedCallback() {
     window.removeEventListener("keydown", this.handleKeyDown);
     super.disconnectedCallback();
@@ -61,7 +51,7 @@ export class TerritoryPatternsModal extends LitElement {
     if (storedPatternName) {
       this.selectedPattern = this.patterns.get(storedPatternName);
     }
-    this.requestUpdate();
+    this.refresh();
   }
 
   private handleKeyDown = (e: KeyboardEvent) => {
@@ -234,18 +224,7 @@ export class TerritoryPatternsModal extends LitElement {
 
   public async open() {
     this.isActive = true;
-    this.requestUpdate();
-
-    // Wait for the DOM to be updated and the o-modal element to be available
-    await this.updateComplete;
-
-    // Now modalEl should be available
-    if (this.modalEl) {
-      this.modalEl.open();
-    } else {
-      console.warn("modalEl is still null after updateComplete");
-    }
-
+    await this.refresh();
     window.addEventListener("keydown", this.handleKeyDown);
   }
 
@@ -258,7 +237,7 @@ export class TerritoryPatternsModal extends LitElement {
   private selectPattern(pattern: Pattern | undefined) {
     this.userSettings.setSelectedPatternName(pattern?.name);
     this.selectedPattern = pattern;
-    this.updatePreview();
+    this.refresh();
     this.close();
   }
 
@@ -314,14 +293,26 @@ export class TerritoryPatternsModal extends LitElement {
     `;
   }
 
-  public updatePreview() {
-    if (this.previewButton === null) return;
+  public async refresh() {
     const preview = this.renderPatternPreview(
       this.selectedPattern?.pattern,
       48,
       48,
     );
+    this.requestUpdate();
+
+    // Wait for the DOM to be updated and the o-modal element to be available
+    await this.updateComplete;
+
+    // Now modalEl should be available
+    if (this.modalEl) {
+      this.modalEl.open();
+    } else {
+      console.warn("modalEl is still null after updateComplete");
+    }
+    if (this.previewButton === null) return;
     render(preview, this.previewButton);
+    this.requestUpdate();
   }
 
   private handleMouseEnter(pattern: Pattern, event: MouseEvent) {