Character select - button that toggles "on" when choice is made but deselects all other buttons

[jzcodes]

Hi, I'm still pretty new to Phaser and I'm making a character select screen that shows all of the characters (only 3). Each one has a button that looks like a power on/off switch. When you click the button it should toggle the button to the correct frame ("on"), but if you click another character it should switch "off" the button of the previously chosen character and turn the currently chosen button to "on."

The toggling was one issue, this was the best thing I could think of (it works, but it ends up being repetitive since there are 3 characters): 

//Button
 this.pickPink = game.add.button(game.world.centerX, game.world.centerY+105,
     "buttons", this.pinkStart, this);
 this.pickPink.anchor.set(0.5, 0.5);
 

//Start with Pink
 pinkStart: function () {
    if(this.pickPink && character !== "pink"){
      //set button frame to "ON"
      this.pickPink.frame = 1;

      character = "pink";
    }
    else if(this.pickPink && character === "pink"){
      //set button frame to "OFF"
      this.pickPink.frame = 0;
      character = undefined;
    }
    console.log(character);
  },

 

But now I need to figure out how I would detect that if another button gets picked, turn the previous one (or all others) to OFF. I don't want more than one of these toggled on at a time.

Is there anyway of achieving this? 

 

Many thanks and much appreciated!!

[Garlov]

I would take a look at Phaser.Signal. With that you could create a shared signal between the selectors. Then when one character is selected you can dispatch the signal with the selected character as payload. Then depending on the character in the payload, you can toggle all buttons with listeners hooked up to the signal.

[jzcodes]

@Garlov Oh! That is really interesting!! I've never heard of this before and I can't wait to look into it, this sounds perfect!! 

Thank you so so much!!!!