Add remove border

Phaser 3
1

Hello everyone!
How create add and remove border for button if we clicked to some button:

  • If we clicked for button 1 - add this button border
  • if we clicked for button 2 - if some button has border - remove border, and add border for button 2.

I create Graphics, when i clicked on sprite:

let rect = new Phaser.Geom.Rectangle(x, y, width, height);
graphics.strokeRectShape(rect);

But i am don’t undestand how remove graphics if i clicked on another buttons.

2

I would use Rectangle game object instead.

3

Thanks, its helped.
But a simple function gets too many lines of code:

onFlagClicked(pointer, flag) {
		let x = flag.x - 2;
		let y = flag.y - 2;
		let width = flag.width + 4;
		let height = flag.height + 4;

		if (flag.value == 1 && flag.row == 0) {
			this.r1 = this.add.rectangle(x, y, width, height).setOrigin(0);
			this.r1.setStrokeStyle(3, 0x00D1FF);
			sessionStorage.setItem('player-team', 1);
			if (this.r2) this.r2.setStrokeStyle(0, 0x00D1FF);
			if (this.r3) this.r3.setStrokeStyle(0, 0x00D1FF);
			if (this.r4) this.r4.setStrokeStyle(0, 0x00D1FF);
		} else if (flag.value == 2 && flag.row == 0) {
			this.r2 = this.add.rectangle(x, y, width, height).setOrigin(0);
			this.r2.setStrokeStyle(3, 0x00D1FF);
			sessionStorage.setItem('player-team', 2);
			if (this.r1) this.r1.setStrokeStyle(0, 0x00D1FF);
			if (this.r3) this.r3.setStrokeStyle(0, 0x00D1FF);
			if (this.r4) this.r4.setStrokeStyle(0, 0x00D1FF);
		}
}

When i click on the rectangle - i check the value of that rectangle, and check created rectangles - if some rectangles is created - i add lineWidth 0.
Is this how it should be done or is there a better way?