diff --git a/src/client/graphics/fx/PingFx.ts b/src/client/graphics/fx/PingFx.ts index cb1bd5e66..44ed2addd 100644 --- a/src/client/graphics/fx/PingFx.ts +++ b/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, ); } diff --git a/src/client/graphics/layers/PingMenu.ts b/src/client/graphics/layers/PingMenu.ts index 66a19e604..1496bfef3 100644 --- a/src/client/graphics/layers/PingMenu.ts +++ b/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 = { + 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, ); diff --git a/src/client/graphics/layers/PingTrajectoryPreviewLayer.ts b/src/client/graphics/layers/PingTrajectoryPreviewLayer.ts index 909cc4a98..272c22e94 100644 --- a/src/client/graphics/layers/PingTrajectoryPreviewLayer.ts +++ b/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(); } -} \ No newline at end of file +}