From 1cca6e2ebc4d4e01b9bdd7fa84aec90b37d072e0 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Fri, 25 Jul 2025 12:01:06 -0700
Subject: [PATCH] fix player overview overlay on mobile (#1572)

## Description:

Regression in v24 that prevented the player overlay from showing when
clicking on mobile.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [ ] I have added relevant tests to the test directory
- [ ] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [ ] I have read and accepted the CLA aggreement (only required once).

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
---
 src/client/graphics/layers/MainRadialMenu.ts    |  2 +-
 src/client/graphics/layers/PlayerInfoOverlay.ts |  9 +++++++--
 src/client/graphics/layers/RadialMenu.ts        | 12 +++++++++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/client/graphics/layers/MainRadialMenu.ts b/src/client/graphics/layers/MainRadialMenu.ts
index 3981c8986..7933ec702 100644
--- a/src/client/graphics/layers/MainRadialMenu.ts
+++ b/src/client/graphics/layers/MainRadialMenu.ts
@@ -56,7 +56,7 @@ export class MainRadialMenu extends LitElement implements Layer {
       `,
     };
 
-    this.radialMenu = new RadialMenu(menuConfig);
+    this.radialMenu = new RadialMenu(this.eventBus, menuConfig);
 
     this.playerActionHandler = new PlayerActionHandler(
       this.eventBus,
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index 0f6c4992f..85e14b0fd 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -13,10 +13,11 @@ import {
 } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { GameView, PlayerView, UnitView } from "../../../core/game/GameView";
-import { MouseMoveEvent } from "../../InputHandler";
+import { ContextMenuEvent, MouseMoveEvent } from "../../InputHandler";
 import { renderNumber, renderTroops } from "../../Utils";
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
+import { CloseRadialMenuEvent } from "./RadialMenu";
 
 function euclideanDistWorld(
   coord: { x: number; y: number },
@@ -69,6 +70,10 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     this.eventBus.on(MouseMoveEvent, (e: MouseMoveEvent) =>
       this.onMouseEvent(e),
     );
+    this.eventBus.on(ContextMenuEvent, (e: ContextMenuEvent) =>
+      this.maybeShow(e.x, e.y),
+    );
+    this.eventBus.on(CloseRadialMenuEvent, () => this.hide());
     this._isActive = true;
   }
 
@@ -312,7 +317,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
     return html`
       <div
-        class="hidden lg:flex fixed top-[150px] right-0 w-full z-50 flex-col max-w-[180px]"
+        class="block lg:flex fixed top-[150px] right-0 w-full z-50 flex-col max-w-[180px]"
         @contextmenu=${(e) => e.preventDefault()}
       >
         <div
diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts
index 2900987c3..a64c157e3 100644
--- a/src/client/graphics/layers/RadialMenu.ts
+++ b/src/client/graphics/layers/RadialMenu.ts
@@ -1,5 +1,6 @@
 import * as d3 from "d3";
 import backIcon from "../../../../resources/images/BackIconWhite.svg";
+import { EventBus, GameEvent } from "../../../core/EventBus";
 import { Layer } from "./Layer";
 import {
   CenterButtonElement,
@@ -7,6 +8,10 @@ import {
   MenuElementParams,
 } from "./RadialMenuElements";
 
+export class CloseRadialMenuEvent implements GameEvent {
+  constructor() {}
+}
+
 export interface TooltipItem {
   text: string;
   className: string;
@@ -72,7 +77,10 @@ export class RadialMenu implements Layer {
 
   private params: MenuElementParams | null = null;
 
-  constructor(config: RadialMenuConfig = {}) {
+  constructor(
+    private eventBus: EventBus,
+    config: RadialMenuConfig = {},
+  ) {
     this.config = {
       menuSize: config.menuSize ?? 190,
       submenuScale: config.submenuScale ?? 1.5,
@@ -112,10 +120,12 @@ export class RadialMenu implements Layer {
       .style("height", "100vh")
       .on("click", () => {
         this.hideRadialMenu();
+        this.eventBus.emit(new CloseRadialMenuEvent());
       })
       .on("contextmenu", (e) => {
         e.preventDefault();
         this.hideRadialMenu();
+        this.eventBus.emit(new CloseRadialMenuEvent());
       });
 
     // Calculate the total svg size needed for all potential nested menus