alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 10:32:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

give radial menu delay so don't immediately click on mobile.

Browse Source
This commit is contained in:
evanpelle
2024-10-17 08:26:08 -07:00
parent da3e726b4d
commit 8d3d9dfc4a
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/radial/RadialMenu.ts
+20 -20
View File
@@ -199,7 +199,7 @@ export class RadialMenu implements Layer {
} else { } else {
this.showRadialMenu(event.x, event.y); this.showRadialMenu(event.x, event.y);
} }
this.renderCenterButton(false) this.enableCenterButton(false)
for (const item of this.menuItems.values()) { for (const item of this.menuItems.values()) {
item.disabled = true item.disabled = true
this.updateMenuItemState(item) this.updateMenuItemState(item)
@@ -214,7 +214,7 @@ export class RadialMenu implements Layer {
if (this.game.inSpawnPhase()) { if (this.game.inSpawnPhase()) {
if (tile.isLand() && !tile.hasOwner()) { if (tile.isLand() && !tile.hasOwner()) {
this.renderCenterButton(true) this.enableCenterButton(true)
} }
return return
} }
@@ -241,13 +241,13 @@ export class RadialMenu implements Layer {
if (tile.owner() != myPlayer && tile.isLand() && myPlayer.sharesBorderWith(other)) { if (tile.owner() != myPlayer && tile.isLand() && myPlayer.sharesBorderWith(other)) {
if (other.isPlayer()) { if (other.isPlayer()) {
if (!myPlayer.isAlliedWith(other)) { if (!myPlayer.isAlliedWith(other)) {
this.renderCenterButton(true) this.enableCenterButton(true)
} }
} else { } else {
outer_loop: for (const t of bfs(tile, and(t => !t.hasOwner() && t.isLand(), dist(tile, 200)))) { outer_loop: for (const t of bfs(tile, and(t => !t.hasOwner() && t.isLand(), dist(tile, 200)))) {
for (const n of t.neighbors()) { for (const n of t.neighbors()) {
if (n.owner() == myPlayer) { if (n.owner() == myPlayer) {
this.renderCenterButton(true) this.enableCenterButton(true)
break outer_loop break outer_loop
} }
} }
@@ -352,11 +352,14 @@ export class RadialMenu implements Layer {
} }
private showRadialMenu(x: number, y: number) { private showRadialMenu(x: number, y: number) {
this.menuElement // Delay so center button isn't clicked immediately on press.
.style('left', `${x - this.menuSize / 2}px`) setTimeout(() => {
.style('top', `${y - this.menuSize / 2}px`) this.menuElement
.style('display', 'block'); .style('left', `${x - this.menuSize / 2}px`)
this.isVisible = true; .style('top', `${y - this.menuSize / 2}px`)
.style('display', 'block');
this.isVisible = true;
}, 50)
} }
private hideRadialMenu() { private hideRadialMenu() {
@@ -412,20 +415,17 @@ export class RadialMenu implements Layer {
this.menuElement.select('.center-button-text').transition().duration(200).style('font-size', fontSize); this.menuElement.select('.center-button-text').transition().duration(200).style('font-size', fontSize);
} }
private renderCenterButton(enabled: boolean) { private enableCenterButton(enabled: boolean) {
this.isCenterButtonEnabled = enabled this.isCenterButtonEnabled = enabled
// Add delay so center button is clicked immediately on creation. const centerButton = this.menuElement.select('.center-button');
setTimeout(() => {
const centerButton = this.menuElement.select('.center-button');
centerButton.select('.center-button-hitbox') centerButton.select('.center-button-hitbox')
.style('cursor', enabled ? 'pointer' : 'not-allowed'); .style('cursor', enabled ? 'pointer' : 'not-allowed');
centerButton.select('.center-button-visible') centerButton.select('.center-button-visible')
.attr('fill', enabled ? '#2c3e50' : '#999999'); .attr('fill', enabled ? '#2c3e50' : '#999999');
centerButton.select('.center-button-text') centerButton.select('.center-button-text')
.attr('fill', enabled ? 'white' : '#cccccc'); .attr('fill', enabled ? 'white' : '#cccccc');
}, 25);
} }
} }