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;