Desacoplar UI con la logica del juego

[aromeronavia]

Ahorita el board está acoplado a los divs del DOM. Voy a hacer un script en visual basic para decodificar la IP de los usuarios y entrenar una red neuronal que prediga cuántas veces me van a confundir con @huichops dado cierto evento.

Ok no

Voy a desacoplar todo amikos

Spec: Voy a separar el Board en dos partes: BoardHandler y Board.

BORD JANLER

El board handler sólo sabe que hay un board y que le tiene que dar instrucciones como

1. Prende las pinshis lucecitas.
2. Déjate clickear.
3. Cada que te hagan click, has esta madre.

Pero el BoardHandler no conoce de DOM, delega esa responsabilidad a su amiko el Board.

BORD

El board es el que sabe de dom, y le hace caso al boardHandler en cómo prender lucecitas y así, pero el detalle está justo ahí

Pseucódigo digital sensasional

Board Handler

class BoardHandler {
  constructor(args) {
    const { onColorClick, graphicBoard } = args;

    this.board = graphicBoard;
    this.buttons = new Map();
    this.buttons.set(RED, this.redButton);
    this.buttons.set(BLUE, this.blueButton);
    this.buttons.set(YELLOW, this.yellowButton);
    this.buttons.set(GREEN, this.greenButton);

    this.board.setHandlers(onColorClick);
  }

  showLightSequence() {
    sequence.reduce((p, color) => {
      return p.then(() => this.board.setLighted(color))
        .then(() => this.board.unsetLighted(color))
    }, Promise.resolve())
    .then(cb);
  }
}

Board

class Board {
  constructor(onColorClick) {
    this.board = document.querySelector('.simon');
    this.redButton = document.getElementById('button-red');
    this.blueButton = document.getElementById('button-blue');
    this.yellowButton = document.getElementById('button-yellow');
    this.greenButton = document.getElementById('button-green');

    this.board.addEventListener('click', onColorClick);
  }

  setLighted(color) {
    return new Promise((resolve) => {
      setTimeout(() => resolve(this.buttons.get(color).classList.add('lighted')), 500);
    });
  }

  unsetLighted(color) {
    return new Promise((resolve) => {
      setTimeout(() => resolve(this.buttons.get(color).classList.remove('lighted')), 500);
    });
  }
}

Y en el momento que queramos otro board que use Three.js o mamadas así, se hace plug and play y sha

[aromeronavia]

@huichops @Alex-TH ^ chequen el spec porfa

[huichops]

que boneetou <3 de paso mueves el audio al board? aunque podemos verlo de dos maneras el audio es totalmente otro adapter que debería ser parámetro de Board o simplemente parte de el, como si unificaramos el delivery de audio y video en una sola cosa, tenerlos separados bien podría ser sobreingeniería.

[Alex-TH]

Me gusta, pero no se si onClick que recibe board lo haga estar acoplado 🤔

[aromeronavia]

🤔

[abiee]

[abiee]

Por lo que veo la idea es que el Board sea un UI solamente... Pero tiene el método showLightSequence() que lo hace ser "inteligente" cuando debería ser tonto... La API del board, en mi opinión, debería de contener únicamente métodos para hacer cosas muy simples:

board.turnOnRedLight()
board.turnOffRedLight()
board.turnOffBoard()

De tal suerte que el BoardHandler maneje toda la lógica de negocios, y el Board solo prenda foquitos.

[aromeronavia]

Añañe, esa es la idea <3 gracias