fix(ping): use string literals for PingType and fix parsing errors

src/client/graphics/fx/PingFx.ts

@@ -27,13 +27,13 @@ export class PingFx implements Fx {
 
   private getPingColor(pingType: PingType): string {
     switch (pingType) {
-      case PingType.Attack:
+      case "attack":
         return "rgba(255, 0, 0, 0.7)"; // Red
-      case PingType.Retreat:
+      case "retreat":
         return "rgba(0, 255, 0, 0.7)"; // Green
-      case PingType.Defend:
+      case "defend":
         return "rgba(0, 0, 255, 0.7)"; // Blue
-      case PingType.WatchOut:
+      case "watchOut":
         return "rgba(255, 255, 0, 0.7)"; // Yellow
       default:
         return "rgba(128, 128, 128, 0.7)"; // Default to gray
@@ -42,13 +42,13 @@ export class PingFx implements Fx {
 
   private getIconPath(pingType: PingType): string | null {
     switch (pingType) {
-      case PingType.Attack:
+      case "attack":
         return "/resources/images/SwordIconWhite.svg";
-      case PingType.Retreat:
+      case "retreat":
         return "/resources/images/BackIconWhite.svg";
-      case PingType.Defend:
+      case "defend":
         return "/resources/images/ShieldIconWhite.svg";
-      case PingType.WatchOut:
+      case "watchOut":
         return "/resources/images/ExclamationMarkIcon.svg";
       default:
         return null;
@@ -70,7 +70,10 @@ export class PingFx implements Fx {
     }
   }
 
-  renderTick(duration: number, context: CanvasRenderingContext2D): boolean {
+  private static readonly PING_RADIUS = 15;
+  private static readonly ICON_SIZE = 20;
+
+  renderTick(_duration: number, context: CanvasRenderingContext2D): boolean {
     const elapsed = performance.now() - this.startTime;
     if (elapsed > this.durationMs) {
       return false; // Fx is finished
@@ -89,18 +92,17 @@ export class PingFx implements Fx {
     // Draw colored circle
     context.fillStyle = this.pingColor;
     context.beginPath();
-    context.arc(x + offsetX, y + offsetY, 15, 0, 2 * Math.PI);
+    context.arc(x + offsetX, y + offsetY, PingFx.PING_RADIUS, 0, 2 * Math.PI);
     context.fill();
 
     // Draw icon
     if (this.icon && this.icon.complete) {
-      const iconSize = 20;
       context.drawImage(
         this.icon,
-        x + offsetX - iconSize / 2,
-        y + offsetY - iconSize / 2,
-        iconSize,
-        iconSize,
+        x + offsetX - PingFx.ICON_SIZE / 2,
+        y + offsetY - PingFx.ICON_SIZE / 2,
+        PingFx.ICON_SIZE,
+        PingFx.ICON_SIZE,
       );
     }
 

src/client/graphics/layers/PingMenu.ts

@@ -2,6 +2,7 @@ import retreatIcon from "../../../../resources/images/BackIconWhite.svg";
 import pingIcon from "../../../../resources/images/PingIcon.svg";
 import watchOutIcon from "../../../../resources/images/QuestionMarkIcon.svg";
 import defendIcon from "../../../../resources/images/ShieldIconWhite.svg";
+import swordIcon from "../../../../resources/images/SwordIconWhite.svg";
 import { EventBus } from "../../../core/EventBus";
 import { PingType } from "../../../core/game/Ping";
 import { PingSelectedEvent } from "../../InputHandler";
@@ -9,11 +10,11 @@ import { COLORS, MenuElement, MenuElementParams } from "./RadialMenuElements";
 
 export const PING_ICON = pingIcon;
 
-export const PING_COLORS = {
-  [PingType.Attack]: "#ff0000",
-  [PingType.Retreat]: "#ffa600",
-  [PingType.Defend]: "#0000ff",
-  [PingType.WatchOut]: "#ffff00",
+export const PING_COLORS: Record<PingType, string> = {
+  attack: "#ff0000",
+  retreat: "#ffa600",
+  defend: "#0000ff",
+  watchOut: "#ffff00",
 };
 
 function createPingElement(
@@ -31,7 +32,7 @@ function createPingElement(
     disabled: () => false,
     action: (params?: MenuElementParams) => {
       eventBus.emit(new PingSelectedEvent(pingType));
-      if (params) {
+      if (params && params.closeMenu) {
         params.closeMenu();
       }
     },
@@ -43,28 +44,28 @@ export function createPingMenu(eventBus: EventBus): MenuElement {
     "ping_attack",
     "Attack",
     swordIcon,
-    PingType.Attack,
+    "attack",
     eventBus,
   );
   const pingRetreatElement = createPingElement(
     "ping_retreat",
     "Retreat",
     retreatIcon,
-    PingType.Retreat,
+    "retreat",
     eventBus,
   );
   const pingDefendElement = createPingElement(
     "ping_defend",
     "Defend",
     defendIcon,
-    PingType.Defend,
+    "defend",
     eventBus,
   );
   const pingWatchOutElement = createPingElement(
     "ping_watch_out",
     "Watch out",
     watchOutIcon,
-    PingType.WatchOut,
+    "watchOut",
     eventBus,
   );
 

src/client/graphics/layers/PingTrajectoryPreviewLayer.ts

@@ -84,13 +84,13 @@ export class PingTrajectoryPreviewLayer implements Layer {
 
   private getPingColor(): string {
     switch (this.currentPingType) {
-      case PingType.Attack:
+      case "attack":
         return "rgba(255, 0, 0, 0.7)"; // Red
-      case PingType.Retreat:
+      case "retreat":
         return "rgba(0, 255, 0, 0.7)"; // Green
-      case PingType.Defend:
+      case "defend":
         return "rgba(0, 0, 255, 0.7)"; // Blue
-      case PingType.WatchOut:
+      case "watchOut":
         return "rgba(255, 255, 0, 0.7)"; // Yellow
       default:
         return "rgba(128, 128, 128, 0.7)"; // Gray fallback
@@ -105,11 +105,8 @@ export class PingTrajectoryPreviewLayer implements Layer {
 
     const pingColor = this.getPingColor();
 
-    const offsetX = -this.game.width() / 2;
-    const offsetY = -this.game.height() / 2;
-
-    const x = this.game.x(this.pingTargetTile) + offsetX;
-    const y = this.game.y(this.pingTargetTile) + offsetY;
+    const x = this.game.x(this.pingTargetTile);
+    const y = this.game.y(this.pingTargetTile);
 
     context.save();
     context.fillStyle = pingColor;
@@ -124,4 +121,4 @@ export class PingTrajectoryPreviewLayer implements Layer {
     context.fill();
     context.restore();
   }
-}
+}