_animateGainingChevron() {
    return new Promise((resolve) => {
      // Play gain chevron sfx
      audio_engine.current().play_effect(RSX.sfx_unit_onclick.audio, false);

      this._currentShownStars += 1;
      const chevronIndex = this._currentShownStars - 1;
      const oldChevronSprite = this._chevronSprites[chevronIndex];
      const newChevronSprite = new BaseSprite(RSX.ranked_chevron_full.img);
      this._chevronSprites[chevronIndex] = newChevronSprite;
      newChevronSprite.setPosition(oldChevronSprite.getPosition());
      newChevronSprite.setOpacity(0);
      newChevronSprite.setScale(0.8);
      this.addChild(newChevronSprite);

      const rings = BaseParticleSystem.create(RSX.ptcl_ring_glow_circle.plist);
      rings.setScale(1.1);
      rings.setPositionCenterOfSprite(oldChevronSprite);
      rings.resumeSystem();
      rings.setPositionType(cc.ParticleSystem.TYPE_RELATIVE);
      this.addChild(rings);

      this.runAction(cc.sequence(
        cc.targetedAction(newChevronSprite, cc.spawn(
          cc.fadeIn(CONFIG.ANIMATE_MEDIUM_DURATION),
          cc.scaleTo(CONFIG.ANIMATE_MEDIUM_DURATION, 1.0).easing(cc.easeBackOut()),
        )),
        cc.targetedAction(oldChevronSprite, cc.removeSelf()),
        cc.callFunc(((rings) => {
          rings.stopSystem();
          resolve();
        }).bind(this, rings)),
      ));
    });
  }
Animate filling the next chevron
@private
@return {Promise} A promise which resolves when animation is complete