Choosing a character (extending sprites) ?

[jzcodes]

Hello, I'm working on a racing game and I have a character select screen that allows the player to choose between 3 variations of the same character (blue, pink, purple).  In my main.js I have a global variable to hold the character value (blue, pink or purple). In stateChoice.js I have 3 buttons, and I am using .bind. When the player chooses the global variable becomes whatever color they picked. 

However, in my mainState.js I have the game and I'm currently using a ton of repetitive code to say if (character == 'blue') { // add this sprite , etc. etc.}. Obviously, this is not ideal since I am repeating a ton of code for all 3 characters. I did some reading on extending sprites but, the examples I've seen are for the same sprite now different ones.

How do I go about adding a sprite (any of the colors) in a way that I can do everything once in the main game?? Thank you!

 

//BUTTONS TO CHOOSE CHARACTER


    //Choose Racer1
    this.pickRacer1 = game.add.button(game.world.centerX-150, game.world.centerY+105,
      "buttons", this.racerStart.bind(this, "blue"), this);
    this.pickRacer1.anchor.set(0.5, 0.5);

    //Choose Racer2
    this.pickRacer2 = game.add.button(game.world.centerX, game.world.centerY+105,
      "buttons", this.racerStart.bind(this, "pink"), this);
    this.pickRacer2.anchor.set(0.5, 0.5);

    //Choose Racer3
    this.pickRacer3 = game.add.button(game.world.centerX+150, game.world.centerY+105,
      "buttons", this.racerStart.bind(this, "purple"), this);
    this.pickRacer3.anchor.set(0.5, 0.5);  


//BUTTON FUNCTION


racerStart: function (racer){
    console.log(racer);
    for (var key in this.buttons) {
      this.buttons[key].frame = 0;
    }

    this.buttons[racer].frame = 1;
    character = racer;
    this.startConfirm.animations.play("neon");
    // character.animations.play("blue");
    console.log(character);
  },