In this q I didn't add model and event class but view and controller class is added, It's tic tac toe game q. View class of tic-tac-toe game
class View {
constructor() {
this.playEvent = new Event();
}
display() {
const board = document.createElement('div');
board.className = 'board';
this.cells = Array(9).fill().map((_, i) => {
const cell = document.createElement('div');
cell.className = 'cell';
cell.addEventListener('click', () => {
this.playEvent.triggerListener(i);
});
board.appendChild(cell);
return cell;
});
this.message = document.createElement('div');
this.message.className = 'message';
document.body.appendChild(board);
document.body.appendChild(this.message);
}
victory(winner) {
this.message.innerHTML = `${winner} wins!`;
}
draw() {
this.message.innerHTML = "It's a draw!";
}
}
this display is not working my controller class is
class Controller {
constructor(model, view) {
this.model = new Model();
this.view = new View();
next 3 lines are fo the connection of Model and View
this.view.playEvent.addListener(moveIndex => { this.model.gameStart(moveIndex); });
this.model.gameWinnerEvent.addListeners(winner => { this.view.gamewinner(winner); });
this.model.gameDrawEvent.addListeners(() => { this.view.gameDraw(); });
}
run(){
this.view.display()
}
}
this where I run the whole program
const app = new Controller()
app.run()
You should maybe defined your display method like this :
By defined the function like you did, JS understand that it have to be executed on the definition of the class (as the constructor do)