Merge branch 'v24' into Sound&Music

src/client/TerritoryPatternsModal.ts

@@ -37,6 +37,8 @@ export class TerritoryPatternsModal extends LitElement {
 
   private userSettings: UserSettings = new UserSettings();
 
+  private isActive = false;
+
   constructor() {
     super();
   }
@@ -44,7 +46,6 @@ export class TerritoryPatternsModal extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.selectedPattern = this.userSettings.getSelectedPattern();
-    window.addEventListener("keydown", this.handleKeyDown);
     this.updateComplete.then(() => {
       const containers = this.renderRoot.querySelectorAll(".preview-container");
       if (this.resizeObserver) {
@@ -54,12 +55,11 @@ export class TerritoryPatternsModal extends LitElement {
       }
       this.updatePreview();
     });
+    this.open();
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener("keydown", this.handleKeyDown);
-    this.resizeObserver.disconnect();
   }
 
   async onUserMe(userMeResponse: UserMeResponse | null) {
@@ -220,6 +220,7 @@ export class TerritoryPatternsModal extends LitElement {
   }
 
   render() {
+    if (!this.isActive) return html``;
     return html`
       ${this.renderTooltip()}
       <o-modal
@@ -233,10 +234,15 @@ export class TerritoryPatternsModal extends LitElement {
 
   public open() {
     this.modalEl?.open();
+    window.addEventListener("keydown", this.handleKeyDown);
+    this.isActive = true;
   }
 
   public close() {
     this.modalEl?.close();
+    window.removeEventListener("keydown", this.handleKeyDown);
+    this.resizeObserver?.disconnect();
+    this.isActive = false;
   }
 
   private selectPattern(pattern: string | undefined) {
@@ -336,6 +342,7 @@ export class TerritoryPatternsModal extends LitElement {
   }
 }
 
+const patternCache = new Map<string, string>();
 const DEFAULT_PATTERN_B64 = "AAAAAA"; // Empty 2x2 pattern
 const COLOR_SET = [0, 0, 0, 255]; // Black
 const COLOR_UNSET = [255, 255, 255, 255]; // White
@@ -344,11 +351,14 @@ export function generatePreviewDataUrl(
   width?: number,
   height?: number,
 ): string {
+  pattern ??= DEFAULT_PATTERN_B64;
+
+  if (patternCache.has(pattern)) {
+    return patternCache.get(pattern)!;
+  }
+
   // Calculate canvas size
-  const decoder = new PatternDecoder(
-    pattern ?? DEFAULT_PATTERN_B64,
-    base64url.decode,
-  );
+  const decoder = new PatternDecoder(pattern, base64url.decode);
   const scaledWidth = decoder.scaledWidth();
   const scaledHeight = decoder.scaledHeight();
 
@@ -384,5 +394,7 @@ export function generatePreviewDataUrl(
 
   // Create a data URL
   ctx.putImageData(imageData, 0, 0);
-  return canvas.toDataURL("image/png");
+  const dataUrl = canvas.toDataURL("image/png");
+  patternCache.set(pattern, dataUrl);
+  return dataUrl;
 }

src/client/graphics/GameRenderer.ts

@@ -183,6 +183,7 @@ export function createRenderer(
   }
   chatModal.g = game;
   chatModal.eventBus = eventBus;
+  chatModal.initEventBus();
 
   const multiTabModal = document.querySelector(
     "multi-tab-modal",

src/client/graphics/layers/ChatModal.ts

@@ -6,6 +6,7 @@ import { GameView, PlayerView } from "../../../core/game/GameView";
 
 import quickChatData from "../../../../resources/QuickChat.json";
 import { EventBus } from "../../../core/EventBus";
+import { CloseViewEvent } from "../../InputHandler";
 import { SendQuickChatEvent } from "../../Transport";
 import { translateText } from "../../Utils";
 
@@ -172,6 +173,14 @@ export class ChatModal extends LitElement {
     `;
   }
 
+  initEventBus() {
+    this.eventBus.on(CloseViewEvent, (e) => {
+      if (!this.hidden) {
+        this.close();
+      }
+    });
+  }
+
   private selectCategory(categoryId: string) {
     this.selectedCategory = categoryId;
     this.selectedPhraseText = null;

src/client/graphics/layers/EmojiTable.ts

@@ -5,7 +5,7 @@ import { AllPlayers } from "../../../core/game/Game";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { TerraNulliusImpl } from "../../../core/game/TerraNulliusImpl";
 import { emojiTable, flattenedEmojiTable } from "../../../core/Util";
-import { ShowEmojiMenuEvent } from "../../InputHandler";
+import { CloseViewEvent, ShowEmojiMenuEvent } from "../../InputHandler";
 import { SendEmojiIntentEvent } from "../../Transport";
 import { TransformHandler } from "../TransformHandler";
 
@@ -49,6 +49,11 @@ export class EmojiTable extends LitElement {
         this.hideTable();
       });
     });
+    this.eventBus.on(CloseViewEvent, (e) => {
+      if (!this.hidden) {
+        this.hideTable();
+      }
+    });
   }
 
   private onEmojiClicked: (emoji: string) => void = () => {};

src/client/graphics/layers/PlayerPanel.ts

@@ -13,7 +13,7 @@ import { AllPlayers, PlayerActions } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { flattenedEmojiTable } from "../../../core/Util";
-import { MouseUpEvent } from "../../InputHandler";
+import { CloseViewEvent, MouseUpEvent } from "../../InputHandler";
 import {
   SendAllianceRequestIntentEvent,
   SendBreakAllianceIntentEvent,
@@ -167,6 +167,10 @@ export class PlayerPanel extends LitElement implements Layer {
   init() {
     this.eventBus.on(MouseUpEvent, (e: MouseEvent) => this.hide());
 
+    this.eventBus.on(CloseViewEvent, (e) => {
+      this.hide();
+    });
+
     this.ctModal = document.querySelector("chat-modal") as ChatModal;
   }
 

src/client/graphics/layers/RadialMenu.ts

@@ -1,6 +1,7 @@
 import * as d3 from "d3";
 import backIcon from "../../../../resources/images/BackIconWhite.svg";
 import { EventBus, GameEvent } from "../../../core/EventBus";
+import { CloseViewEvent } from "../../InputHandler";
 import { Layer } from "./Layer";
 import {
   CenterButtonElement,
@@ -102,6 +103,9 @@ export class RadialMenu implements Layer {
   init() {
     this.createMenuElement();
     this.createTooltipElement();
+    this.eventBus.on(CloseViewEvent, (e) => {
+      this.hideRadialMenu();
+    });
   }
 
   private createMenuElement() {