export const cardGamePropia = (nickname, game_id,eliminarPartidaCallback) => {
  var cardGameDiv = document.createElement('div');
  cardGameDiv.classList.add('cardGame');
  cardGameDiv.innerHTML = `<span>${nickname}</span>
      <span class="parpadea">Esperando rival...</span>
      <button class="cancel-game-btn button button-orange">Cancelar</button>
  `;
  const cancelGameBtn = cardGameDiv.querySelector('.cancel-game-btn');
  cancelGameBtn.addEventListener('click', () => {
    eliminarPartidaCallback(game_id);
  });
  return cardGameDiv;
};

export const cardGameGeneral = (nickname, game_id,unirsePartidaCallback) => {
  var cardGameDiv = document.createElement('div');
  cardGameDiv.classList.add('cardGame');
  cardGameDiv.innerHTML = `<span>${nickname}</span>
      <span>VS</span>
      <button class="join-game-btn button button-green">Unirse</button>
  `;
  const joinGameBtn = cardGameDiv.querySelector('.join-game-btn');
  joinGameBtn.addEventListener('click', () => {
    unirsePartidaCallback(game_id);
  });
  return cardGameDiv;
};

export const cardGameEnCurso = (partida,entrarEnPartidaCallBack) => {
  var cardGameDiv = document.createElement('div');
  cardGameDiv.classList.add('cardGame');
  cardGameDiv.innerHTML = `<span>${partida.nickJugadorA}</span>
      <span class=""> vs </span>
      <span class=""> ${partida.nickJugadorB} </span>
      <button class="enter-game-btn button button-blue">Ingresar</button>
  `;
  const enterGameBtn = cardGameDiv.querySelector('.enter-game-btn');
  enterGameBtn.addEventListener('click', () => {
    entrarEnPartidaCallBack(partida.uuid);
  });
  return cardGameDiv;
};