Redesign target fx (#2143)

## Description:

Resize the target fx.
It's still a little too big in my opinion, but it becomes very blurry
when shrinked down.


https://github.com/user-attachments/assets/c3cda98d-ed57-4933-93b4-1cc7f1cb8e50

The UI Layer should probably not be bound to the zoom level so we can
have a sharper UI.

## 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
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

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

IngloriousTom

src/client/graphics/fx/TargetFx.ts

@@ -4,12 +4,14 @@ export class TargetFx implements Fx {
   private lifeTime = 0;
   private ended = false;
   private endFade = 300;
+  private offset = 0;
+  private rotationSpeed = 14; // px per seconds
+  private radius = 4;
 
   constructor(
     private x: number,
     private y: number,
     private duration = 0,
-    private radius = 8,
     private persistent = false,
   ) {}
 
@@ -36,26 +38,26 @@ export class TargetFx implements Fx {
     const fadeAlpha =
       this.persistent && this.ended ? 1 - this.lifeTime / this.endFade : 1;
     const alpha = Math.max(0, Math.min(1, baseAlpha * fadeAlpha));
-    const pulse = 1 + 0.2 * Math.sin(t * Math.PI * 2);
 
     ctx.save();
     ctx.globalAlpha = alpha;
     ctx.lineWidth = 1;
     ctx.strokeStyle = `rgba(255,0,0,${alpha})`;
-
-    // size follows the pulsing radius so crosshair scales with it
-    const size = this.radius * pulse;
+    this.offset += this.rotationSpeed * (frameTime / 1000);
 
     ctx.beginPath();
-    ctx.arc(this.x, this.y, size, 0, Math.PI * 2);
+    ctx.lineWidth = 1;
+    ctx.lineDashOffset = this.offset;
+    ctx.setLineDash([3, 3]);
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
     ctx.stroke();
 
-    // crosshair (fixed size, does not scale with pulse)
     ctx.beginPath();
-    ctx.moveTo(this.x - this.radius * 1.2, this.y);
-    ctx.lineTo(this.x + this.radius * 1.2, this.y);
-    ctx.moveTo(this.x, this.y - this.radius * 1.2);
-    ctx.lineTo(this.x, this.y + this.radius * 1.2);
+    ctx.strokeStyle = `rgba(255,0,0,${alpha})`;
+    ctx.lineWidth = 2;
+    ctx.lineDashOffset = -this.offset / 2;
+    ctx.setLineDash([19, 3]);
+    ctx.arc(this.x, this.y, 7, 0, Math.PI * 2);
     ctx.stroke();
 
     ctx.restore();

src/client/graphics/layers/FxLayer.ts

@@ -116,11 +116,6 @@ export class FxLayer implements Layer {
     this.allFx.push(textFx);
   }
 
-  addTargetFx(x: number, y: number) {
-    const fx = new TargetFx(x, y, 1200, 12);
-    this.allFx.push(fx);
-  }
-
   onUnitEvent(unit: UnitView) {
     switch (unit.type()) {
       case UnitType.TransportShip: {
@@ -134,7 +129,7 @@ export class FxLayer implements Layer {
           const x = this.game.x(t);
           const y = this.game.y(t);
           // persistent until boat finishes or retreats
-          const fx = new TargetFx(x, y, 0, 12, true);
+          const fx = new TargetFx(x, y, 0, true);
           this.allFx.push(fx);
           this.boatTargetFxByUnitId.set(unit.id(), fx);
         }