Battleship_Server/public/js/salaespera.js

import { ListaUsuarios } from "./listausuarios.js";
import { ListaPartidas } from "./listapartidas.js";

const usersConnectUlEl = document.querySelector('#users_connect');
const usersDisconnectUlEl = document.querySelector('#users_disconnect');
const partidasAbiertasEl = document.querySelector('#partidas_abiertas');
const partidasProcesoEl = document.querySelector('#tus_partidas');

const chat = document.getElementById('logchat');
const userId = localStorage.getItem('userId');
const socket = io('/salachat', { closeOnBeforeunload: true, auth: { userId } });

let listaUsuarios;
let listaPartidas;

function unirse(data) {
  console.log(data);
}

// Funciones que modifican el DOM
// Añadir lista de usuarios al DOM
function agregarUsuarioToLista(usuario, listaElemento, claseCSS) {
  const liUsuario = document.createElement('li');
  liUsuario.innerHTML = usuario.nickname;
  liUsuario.classList.add(claseCSS);
  listaElemento.appendChild(liUsuario);
}
function listarUsuarios() {
  usersConnectUlEl.innerHTML = '';
  usersDisconnectUlEl.innerHTML = '';
  const miUsuario = listaUsuarios.usuario;
  agregarUsuarioToLista(miUsuario, usersConnectUlEl, 'spanNickPropio');
  const usuariosConectados = listaUsuarios.usuariosConectados;
  usuariosConectados.forEach((usuario) => {
    agregarUsuarioToLista(usuario, usersConnectUlEl, 'spanNick');
  });
  const usuariosDesconectados = listaUsuarios.usuariosDesconectados;
  usuariosDesconectados.forEach((usuario) => {
    agregarUsuarioToLista(usuario, usersDisconnectUlEl, 'spanNickOffline');
  });
}
function listarPartidasAbiertas() {
  listaPartidas.partidasAbiertas.forEach((partida) => {
    cardGameHTML(partida.nickJugadorA, partida.uuid);
  });
}

// Añadir msg al chat
function agregaMsg({ uuid, msg }) {
  const spanUser = document.createElement('span');
  const spanMsg = document.createElement('span');
  if (userId === uuid) {
    spanUser.classList.add('spanNickPropio');
    spanUser.textContent = `Tú: `;
    spanMsg.textContent = msg;
  } else {
    spanUser.classList.add('spanNick');
    spanUser.textContent = `${listaUsuarios.obtenerUsuarioPorUuid(uuid).nickname}: `;
    spanMsg.textContent = msg;
  }
  const linea = document.createElement('p');
  linea.appendChild(spanUser);
  linea.appendChild(spanMsg);
  chat.appendChild(linea);
  logchat.scrollTop = logchat.scrollHeight;
}
//Añadir mensaje del servidor
function agregaMsgBroadcast(msg) {
  const spanMsg = document.createElement('span');
  spanMsg.textContent = msg;
  spanMsg.classList.add('broadcastMsg');
  const linea = document.createElement('p');
  linea.appendChild(spanMsg);
  chat.appendChild(linea);
  logchat.scrollTop = logchat.scrollHeight;
}

const cardGameHTML = (nickname, game_id) => {
  var cardGameDiv = document.createElement('div');
  cardGameDiv.classList.add('cardGame');
  cardGameDiv.innerHTML =
    nickname === listaUsuarios.usuario.nickname
      ? `<span>${nickname}</span>
      <span>Esperando rival...</span>
      <button onclick="eliminarPartida('${game_id}')">Cancelar</button>
      `
      : `<span>${nickname}</span>
      <span>VS</span>
      <button onclick="unirsePartida('${game_id}')">Unirse</button>
      `;
  partidasAbiertasEl.appendChild(cardGameDiv);
};



// Logica de negocio de la aplicacion
//Entra a la sala
const entraSala = ({ usuarios, partidas }) => {
  listaUsuarios = new ListaUsuarios(userId, usuarios);
  listarUsuarios();
  listaPartidas = new ListaPartidas(partidas);
  listarPartidasAbiertas();
};
// Actualiza info Usuarios
const actualizaUsuarios = (usuario) => {
  listaUsuarios.actualizaUsuario(usuario);
  listarUsuarios();
  usuario.conectado
    ? agregaMsgBroadcast(`${usuario.nickname} se ha conectado`)
    : agregaMsgBroadcast(`${usuario.nickname} se ha desconectado`);
};

const agregaPartida = (partida) => {
  partidasAbiertasEl.innerHTML = '';
  listaPartidas.agregarPartida(partida);
  listarPartidasAbiertas();
};

const onCloseClick = () => {
  localStorage.removeItem('userId');
  window.location.replace('/');
};
// Cerrar sesión
const cerrarSesion = (reason) => {
  if (reason === 'io server disconnect') {
    localStorage.removeItem('userId');
    window.location.replace('/');
  }
};
// Enviar mensaje
function enviarMensaje(event) {
  if (event.key === 'Enter') {
    const mensaje = event.target.value.trim();
    if (mensaje != '') {
      socket.emit('chatMsg', mensaje);
    }
    event.target.value = '';
  }
}
// Crear partida
const crearPartida = () => {
  socket.emit('creaPartida');
};

// Manejadores de eventos del socket
socket.on('onConnectRoom', entraSala);
socket.on('onUserConnectRoom', actualizaUsuarios);
socket.on('chatMsg', agregaMsg);
socket.on('onUserDisconnectRoom', actualizaUsuarios);
socket.on('disconnect', cerrarSesion);
socket.on('on_create_partida', agregaPartida);

// const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
// window.open(url, '_blank');