mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-22 21:45:22 +00:00
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
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user