add chat in radial menu

src/client/graphics/layers/RadialMenu.ts

@@ -2,6 +2,7 @@ import * as d3 from "d3";
 import allianceIcon from "../../../../resources/images/AllianceIconWhite.svg";
 import boatIcon from "../../../../resources/images/BoatIconWhite.svg";
 import buildIcon from "../../../../resources/images/BuildIconWhite.svg";
+import chatIcon from "../../../../resources/images/ChatIconWhite.svg";
 import disabledIcon from "../../../../resources/images/DisabledIcon.svg";
 import infoIcon from "../../../../resources/images/InfoIcon.svg";
 import swordIcon from "../../../../resources/images/SwordIconWhite.svg";
@@ -28,6 +29,7 @@ import {
 import { TransformHandler } from "../TransformHandler";
 import { UIState } from "../UIState";
 import { BuildMenu } from "./BuildMenu";
+import { ChatModal } from "./ChatModal";
 import { EmojiTable } from "./EmojiTable";
 import { Layer } from "./Layer";
 import { PlayerInfoOverlay } from "./PlayerInfoOverlay";
@@ -38,6 +40,7 @@ enum Slot {
   Boat,
   Build,
   Ally,
+  Chat,
 }
 
 export class RadialMenu implements Layer {
@@ -47,6 +50,18 @@ export class RadialMenu implements Layer {
   private menuElement: d3.Selection<HTMLDivElement, unknown, null, undefined>;
   private isVisible: boolean = false;
   private readonly menuItems = new Map([
+    [Slot.Ally, { name: "ally", disabled: true, action: () => {} }],
+    [Slot.Build, { name: "build", disabled: true, action: () => {} }],
+    [
+      Slot.Info,
+      {
+        name: "info",
+        disabled: true,
+        action: () => {},
+        color: null,
+        icon: null,
+      },
+    ],
     [
       Slot.Boat,
       {
@@ -57,12 +72,10 @@ export class RadialMenu implements Layer {
         icon: null,
       },
     ],
-    [Slot.Ally, { name: "ally", disabled: true, action: () => {} }],
-    [Slot.Build, { name: "build", disabled: true, action: () => {} }],
     [
-      Slot.Info,
+      Slot.Chat,
       {
-        name: "info",
+        name: "chat",
         disabled: true,
         action: () => {},
         color: null,
@@ -79,6 +92,8 @@ export class RadialMenu implements Layer {
 
   private isCenterButtonEnabled = false;
 
+  private ctModal;
+
   constructor(
     private eventBus: EventBus,
     private g: GameView,
@@ -115,6 +130,8 @@ export class RadialMenu implements Layer {
 
     this.eventBus.on(CloseViewEvent, () => this.closeMenu());
 
+    this.ctModal = document.querySelector("chat-modal") as ChatModal;
+
     this.createMenuElement();
   }
 
@@ -154,8 +171,8 @@ export class RadialMenu implements Layer {
       .pie<any>()
       .value(() => 1)
       .padAngle(0.03)
-      .startAngle(Math.PI / 4) // Start at 45 degrees (π/4 radians)
-      .endAngle(2 * Math.PI + Math.PI / 4); // Complete the circle but shifted by 45 degrees
+      .startAngle(Math.PI)
+      .endAngle(4 * Math.PI);
 
     const arc = d3
       .arc<any>()
@@ -375,7 +392,14 @@ export class RadialMenu implements Layer {
     if (actions.canAttack) {
       this.enableCenterButton(true);
     }
-
+    if (this.g.hasOwner(tile)) {
+      const owner = this.g.owner(tile);
+      if (owner.isPlayer() && myPlayer !== owner) {
+        this.activateMenuElement(Slot.Chat, "#7f8c8d", chatIcon, () => {
+          this.ctModal.open(myPlayer, owner as PlayerView);
+        });
+      }
+    }
     if (!this.g.hasOwner(tile)) {
       return;
     }