From daf3fee14d1d292ba6951c252c57a35cebb68c05 Mon Sep 17 00:00:00 2001
From: Ryan Barlow <7389646+ryanbarlow97@users.noreply.github.com>
Date: Sat, 1 Nov 2025 02:30:49 +0000
Subject: [PATCH] Change Colour/Thickness and Add Rotation to SAM Radius
 (#2348)

## Description:

Change Colour/Thickness and Add Rotation to SAM Radius



https://github.com/user-attachments/assets/c701c877-4b71-4266-ad86-bf8e8d61756a



https://github.com/user-attachments/assets/2ea24df7-ae8f-425e-bb07-19c731529ab6



## 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:

w.o.n
---
 src/client/graphics/layers/SAMRadiusLayer.ts | 21 ++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/client/graphics/layers/SAMRadiusLayer.ts b/src/client/graphics/layers/SAMRadiusLayer.ts
index db1af04b1..eec7564ad 100644
--- a/src/client/graphics/layers/SAMRadiusLayer.ts
+++ b/src/client/graphics/layers/SAMRadiusLayer.ts
@@ -19,6 +19,9 @@ export class SAMRadiusLayer implements Layer {
   private hoveredShow: boolean = false;
   private ghostShow: boolean = false;
   private showStroke: boolean = false;
+  private dashOffset = 0;
+  private rotationSpeed = 14; // px per second
+  private lastTickTime = Date.now();
 
   private handleToggleStructure(e: ToggleStructureEvent) {
     const types = e.structureTypes;
@@ -112,6 +115,17 @@ export class SAMRadiusLayer implements Layer {
     this.updateStrokeVisibility();
 
     // Redraw if transform changed or if we need to redraw
+    const now = Date.now();
+    const dt = now - this.lastTickTime;
+    this.lastTickTime = now;
+
+    if (this.showStroke) {
+      this.dashOffset += (this.rotationSpeed * dt) / 1000;
+      if (this.dashOffset > 1e6) this.dashOffset = this.dashOffset % 1000000;
+      // animate by redrawing each frame whilst visible
+      this.needsRedraw = true;
+    }
+
     if (this.transformHandler.hasChanged() || this.needsRedraw) {
       this.redraw();
       this.needsRedraw = false;
@@ -168,9 +182,7 @@ export class SAMRadiusLayer implements Layer {
     if (circles.length === 0) return;
 
     // styles
-    const strokeStyleOuter =
-      this.game.myPlayer()?.borderColor().toRgbString() ??
-      "rgba(230, 230, 230, 0.9)";
+    const strokeStyleOuter = "rgba(0, 0, 0, 1)";
 
     // 1) Fill union simply by drawing all full circle paths and filling once
     ctx.save();
@@ -187,8 +199,9 @@ export class SAMRadiusLayer implements Layer {
     if (!this.showStroke) return;
 
     ctx.save();
-    ctx.lineWidth = 1;
+    ctx.lineWidth = 2;
     ctx.setLineDash([12, 6]);
+    ctx.lineDashOffset = this.dashOffset;
     ctx.strokeStyle = strokeStyleOuter;
 
     const TWO_PI = Math.PI * 2;