diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts index 1fe1e0c6d..30d697f87 100644 --- a/src/client/graphics/layers/RadialMenu.ts +++ b/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; 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() .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() @@ -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; }