event-bingo.js

'use strict';
/**
 * Writer: DK
 * Date: 2023/02/26
 */

/**
 * 참가자들의 상태 Enum
 * Wait: 아직 준비가 안된 상태. Event가 발생해도 게임에 참가하지 않습니다.
 * Ready: 게임을 즐길 준비가 완료된 상태
 * Terminate: 빙고를 달성한 상태
 *
 * Enum naming convention: https://google.github.io/styleguide/javascriptguide.xml?showone=Naming#Naming
 */
const PlayerStatus = Object.freeze({
  Wait: Symbol('wait'),
  Ready: Symbol('ready'),
  Terminate: Symbol('terminate')
});

/**
 * 빙고 게임을 플레이하는 참가자
 */
class BingoPlayer {
  /**
   * 처음 생성 시 대기합니다.
   * @param {button} readyButton
   */
  constructor (readyButton) {
    this.status = PlayerStatus.Wait;
    this.readyButton = readyButton;
    readyButton.addEventListener('click', () => { this.getReady(); });
  }

  /** 빙고 게임을 플레이할 준비를 끝마칩니다.
   * 초기 생성 시 1에서 15 (inclusive) 사이의 난수 정수를 담은 길이 5짜리 배열을 생성합니다.
   */
  getReady () {
    this.arr = Array.from(
      { length: 5 },
      () => Math.floor(Math.random() * 15) + 1
    );
    console.log('PLAYER: Get Ready! creating', this.arr);

    addEventListener('bingoBroadcast', (e) => this.eraseNumber(e.detail.number));
    this.status = PlayerStatus.Ready;
  }

  /**
   * 배열 내부에 존재하는 정수 n값을 모두 삭제합니다.
   * 만약 배열이 비면 BINGO를 외칩니다.
   * @param {number} n
   */
  eraseNumber (n) {
    this.arr = this.arr.filter((x) => x !== n);
    console.log('PLAYER: Delete', n, 'from my arr. Now my arr is', this.arr);

    if (this.arr.length === 0) {
      console.log('PLAYER: BINGO!!!');
      this.status = PlayerStatus.Terminate;
    }
  }
}

/**
 * 빙고 게임을 운영하는 호스트
 */
class BingoHost {
  constructor () {
    this.players = [];
  }

  /**
   * 플레이어를 게임에 참가시킵니다.
   * @param {BingoPlayer} player
   */
  registerPlayer (player) {
    this.players.push(player);
  }

  /**
   * 게임을 1턴 진행합니다.
   * 1에서 15 사이의 난수를 발생시키고 bingoBroadcast라는 커스텀 이벤트를 dispatch 합니다.
   */
  broadcast () {
    const number = Math.floor(Math.random() * 15) + 1;
    console.log('HOST: Number is', number);

    const event = new CustomEvent('bingoBroadcast', {
      detail: {
        number
      }
    });
    dispatchEvent(event);
  }
}

(() => {
  const host = new BingoHost();
  // 플레이어 3명을 게임에 참가시킵니다.
  const button1 = document.getElementById('player1');
  const button2 = document.getElementById('player2');
  const button3 = document.getElementById('player3');
  const player1 = new BingoPlayer(button1);
  const player2 = new BingoPlayer(button2);
  const player3 = new BingoPlayer(button3);
  host.registerPlayer(player1);
  host.registerPlayer(player2);
  host.registerPlayer(player3);

  // 해당 버튼을 누를 때마다 host가 게임을 진행합니다.
  const button = document.getElementById('host');
  button.addEventListener('click', () => {
    host.broadcast();
  });
})();