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

@@ -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,

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

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