Как запустить функцию после того, как другой объект достигнет определенного состояния

Question

У меня есть игра. У меня есть 3 файла app.js, game.js, modal.js. Модал устанавливает прослушиватель событий на кнопку «Далее» на модале и отслеживает «currentStep». То есть модал имеет несколько шагов. Теперь я хочу в файле app.js запустить игру, только после того, как пользователь завершил модал. В моем модале у меня есть:

constructor(){
    this.currentStep = 0;

}
complete() {
    return (this.currentStep >= 4 ? true : false);
}

activate() {
   ....



    nextButton.addEventListener( 'click' , (e) => {

       if (this.currentStep === 0) {
          firstInstructions.classList.add('hideMe');
          firstGif.classList.remove("hideMe");  
          ....    
       }else if (this.currentStep === 4) {
          modal.classList.add("hideMe");
       }
    this.currentStep++;
});

}

Теперь, суть в том, что я каким-то образом хочу, чтобы мой app.js знал, когда пользователь завершил модальную работу, чтобы я мог запустить game.play (); Так что-то вроде:

 const game = new Game();
 const modal = new Modal();
 modal.activate();

 // game.play() WHEN modal.complete

Может ли кто-нибудь предложить правильный способ для Модала сообщить приложению, что оно завершено, когда бы это ни происходило. Я знаю, что могу использовать цикл while и продолжать проверять, является ли modal.complete () и когда он запускается game.play (), но это кажется неправильным. Спасибо.

Answer 1

Я могу придумать два пути, один из них - вы можете просто добавить активацию самой игры следующим образом.

const game = new Game();
const modal = new Modal();
modal.activate(game);

Тогда в активации вы можете сделать это:

activate (game) {
   ....



   nextButton.addEventListener( 'click' , (e) => {

     if (this.currentStep === 0) {
       firstInstructions.classList.add('hideMe');
       firstGif.classList.remove("hideMe");  
       ....    
     } else if (this.currentStep === 4) {
       modal.classList.add("hideMe");

       // Put it here
       game.play();
     }
  this.currentStep++;
};

Это если последний модальный шаг запустит игру. Но если вы действительно хотите поместить это в полный метод. Вы также можете сделать это

const game = new Game();
// put the game inside the Modal constructor
const modal = new Modal(game);
modal.activate();

Тогда вы кладете игру в метод конструктора

constructor (game) {
  this.currentStep = 0;
  // put it here
  this._game = game;
}

Тогда в полном методе вы можете просто вызвать игру из игры

complete () {
  this._game.play();
  return (this.currentStep >= 4 ? true : false);
}

Надеюсь, это поможет