From d980319ebd1762999d15fed92ed1833ecd77e847 Mon Sep 17 00:00:00 2001 From: evanpelle Date: Fri, 27 Sep 2024 21:27:20 -0700 Subject: [PATCH] request/break alliance radial buttons --- TODO.txt | 8 +- src/client/graphics/layers/RadialMenu.ts | 113 ++++++++++++----------- 2 files changed, 63 insertions(+), 58 deletions(-) diff --git a/TODO.txt b/TODO.txt index 5f19ef098..4e87f4b14 100644 --- a/TODO.txt +++ b/TODO.txt @@ -137,9 +137,11 @@ * fake humans handle alliances DONE 9/22/2024 * make alliances expire DONE 9/22/2024 * make radial menu buttons grayed out DONE 9/27/2024 -* add send boat button -* add request alliance button -* add break alliance button +* add request alliance radial button DONE 9/27/2024 +* add break alliance radial button DONE 9/27/2024 +* add send boat radial button +* attack radial center button only on enemy +* Make buttons icons * add emoji button * buttons greyed out when not active * make alliance request mobile friendly diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts index e1dad6462..d0760a886 100644 --- a/src/client/graphics/layers/RadialMenu.ts +++ b/src/client/graphics/layers/RadialMenu.ts @@ -8,16 +8,22 @@ import {MessageType} from "./EventsDisplay"; import {Layer} from "./Layer"; import * as d3 from 'd3'; +enum RadialElement { + RequestAlliance, + BreakAlliance, + BoatAttack +} + export class RadialMenu implements Layer { private clickedCell: Cell | null = null private menuElement: d3.Selection; private isVisible: boolean = false; - private readonly menuItems = [ - {name: "alliance", color: "#3498db", disabled: true, action: () => { }}, - {name: "boat", color: "#3498db", disabled: true, action: () => { }}, - {name: "request", color: "#2ecc71", disabled: true, action: () => { }}, - ]; + private readonly menuItems = new Map([ + [RadialElement.RequestAlliance, {name: "alliance", color: "#3498db", disabled: true, action: () => { }}], + [RadialElement.BreakAlliance, {name: "breakAlliance", color: "#3498db", disabled: true, action: () => { }}], + [RadialElement.BoatAttack, {name: "boat", color: "#3498db", disabled: true, action: () => { }}], + ]); private readonly menuSize = 190; private readonly centerButtonSize = 30; @@ -57,7 +63,7 @@ export class RadialMenu implements Layer { .outerRadius(this.menuSize / 2 - 10); const arcs = svg.selectAll('path') - .data(pie(this.menuItems)) + .data(pie(Array.from(this.menuItems.values()))) .enter() .append('g'); @@ -165,53 +171,58 @@ export class RadialMenu implements Layer { private onContextMenu(event: ContextMenuEvent) { if (this.isVisible) { this.hideRadialMenu() + return } else { this.showRadialMenu(event.x, event.y); } + for (const item of this.menuItems.values()) { + item.disabled = true + this.updateMenuItemState(item) + } - // const cell = this.transformHandler.screenToWorldCoordinates(e.x, e.y) - // if (!this.game.isOnMap(cell)) { - // return - // } - // const tile = this.game.tile(cell) - // if (!tile.hasOwner()) { - // return - // } - // const options: MenuOption[] = [] - // const owner = tile.owner() as Player - // if (owner.clientID() == this.clientID) { - // return - // } - // const myPlayer = this.game.players().find(p => p.clientID() == this.clientID) - // if (!myPlayer) { - // console.warn('my player not found') - // return - // } + const cell = this.transformHandler.screenToWorldCoordinates(event.x, event.y) + if (!this.game.isOnMap(cell)) { + return + } + const tile = this.game.tile(cell) + if (!tile.hasOwner()) { + return + } + const owner = tile.owner() as Player + if (owner.clientID() == this.clientID) { + return + } + const myPlayer = this.game.players().find(p => p.clientID() == this.clientID) + if (!myPlayer) { + console.warn('my player not found') + return + } - // if (myPlayer.pendingAllianceRequestWith(owner)) { - // return - // } + if (myPlayer.pendingAllianceRequestWith(owner)) { + return + } - // if (myPlayer.isAlliedWith(owner)) { - // options.push({ - // label: "Break Alliance", - // action: (): void => { - // this.eventBus.emit( - // new SendBreakAllianceIntentEvent(myPlayer, owner) - // ) - // }, - // }) - // } else { - // options.push({ - // label: "Request Alliance", - // action: (): void => { - // this.eventBus.emit( - // new SendAllianceRequestIntentEvent(myPlayer, owner) - // ) - // this.game.displayMessage(`sending alliance request to ${owner.name()}`, MessageType.INFO, myPlayer.id()) - // }, - // }) - // } + if (myPlayer.isAlliedWith(owner)) { + this.activateMenuElement(RadialElement.BreakAlliance, () => { + this.eventBus.emit( + new SendBreakAllianceIntentEvent(myPlayer, owner) + ) + }) + } else { + this.activateMenuElement(RadialElement.RequestAlliance, () => { + this.eventBus.emit( + new SendAllianceRequestIntentEvent(myPlayer, owner) + ) + this.game.displayMessage(`sending alliance request to ${owner.name()}`, MessageType.INFO, myPlayer.id()) + }) + } + } + + private activateMenuElement(el: RadialElement, action: () => void) { + const menuItem = this.menuItems.get(el) + menuItem.action = action + menuItem.disabled = false + this.updateMenuItemState(menuItem) } private onPointerUp(event: MouseUpEvent) { @@ -240,14 +251,6 @@ export class RadialMenu implements Layer { this.hideRadialMenu(); } - public setMenuItemDisabled(itemName: string, disabled: boolean) { - const item = this.menuItems.find(item => item.name === itemName); - if (item) { - item.disabled = disabled; - this.updateMenuItemState(item); - } - } - private updateMenuItemState(item: any) { this.menuElement.select(`path[data-name="${item.name}"]`) .attr('fill', item.disabled ? this.getDisabledColor(item.color) : item.color)