Battleship_Server/public/js/salaespera.js

import { ListaUsuarios } from './listausuarios.js';
import { ListaPartidas } from './listapartidas.js';
import {
  cardGamePropia,
  cardGameGeneral,
  cardGameEnCurso,
} from './htmlTmpl.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.querySelector('#logchat');

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

let listaUsuarios;
let listaPartidasAbiertas;
let listaPartidasEnCurso;

// Función para generar elementos de lista de usuarios
function generarElementoListaUsuario(usuario, claseCSS) {
  const liUsuario = document.createElement('li');
  liUsuario.textContent = usuario.nickname;
  liUsuario.classList.add(claseCSS);
  return liUsuario;
}
// Función para actualizar la lista de usuarios
function actualizarListaUsuarios() {
  usersConnectUlEl.innerHTML = '';
  usersDisconnectUlEl.innerHTML = '';

  const miUsuario = listaUsuarios.usuario;
  usersConnectUlEl.appendChild(
    generarElementoListaUsuario(miUsuario, 'spanNickPropio'),
  );

  listaUsuarios.usuariosConectados.forEach((usuario) => {
    usersConnectUlEl.appendChild(
      generarElementoListaUsuario(usuario, 'spanNick'),
    );
  });

  listaUsuarios.usuariosDesconectados.forEach((usuario) => {
    usersDisconnectUlEl.appendChild(
      generarElementoListaUsuario(usuario, 'spanNickOffline'),
    );
  });
}
// Función para generar elementos de la lista de partidas
function generarElementoListaPartida(partida) {
  const cardGame =
    userId === partida.uuidJugadorA
      ? cardGamePropia(
          partida.nickJugadorA,
          partida.uuid,
          onClickEliminarPartida,
        )
      : cardGameGeneral(
          partida.nickJugadorA,
          partida.uuid,
          onClickUnirsePartida,
        );
  return cardGame;
}
// Función para actualizar la lista de partidas abiertas
function actualizarListaPartidas() {
  partidasAbiertasEl.innerHTML = '<legend>Partidas abiertas</legend>';
  partidasProcesoEl.innerHTML = '<legend>Tus partidas</legend>';

  listaPartidasEnCurso.partidas.forEach((partida) => {
    const cardGame = cardGameEnCurso(partida,onClickEntrarEnPartida);
    partidasProcesoEl.appendChild(cardGame);
  });

  listaPartidasAbiertas.partidas.forEach((partida) => {
    const cardGame = generarElementoListaPartida(partida);
    userId === partida.uuidJugadorA || userId === partida.uuidJugadorB
      ? partidasProcesoEl.appendChild(cardGame)
      : partidasAbiertasEl.appendChild(cardGame);
  });
}
// Función para agregar un mensaje al chat
function agregarMensajeAlChat({ uuid, msg }) {
  const spanUser = document.createElement('span');
  spanUser.textContent =
    userId === uuid
      ? 'Tú: '
      : `${listaUsuarios.obtenerUsuarioPorUuid(uuid).nickname}: `;
  spanUser.classList.add(userId === uuid ? 'spanNickPropio' : 'spanNick');

  const spanMsg = document.createElement('span');
  spanMsg.textContent = msg;

  const linea = document.createElement('p');
  linea.appendChild(spanUser);
  linea.appendChild(spanMsg);

  chat.appendChild(linea);
  logchat.scrollTop = logchat.scrollHeight;
}
// Función para agregar un mensaje de transmisión al chat
function agregarMensajeDeTransmisionAlChat(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 handlers = {
  onConnectRoom: ({ usuarios, partidas, partidasEnCurso }) => {
    listaUsuarios = new ListaUsuarios(userId, usuarios);
    listaPartidasAbiertas = new ListaPartidas(partidas);
    listaPartidasEnCurso = new ListaPartidas(partidasEnCurso);
    actualizarListaUsuarios();
    actualizarListaPartidas();
  },
  onUserChangeStatus: (usuario) => {
    listaUsuarios.actualizaUsuario(usuario);
    actualizarListaUsuarios();
    const mensaje = usuario.conectado
      ? `${usuario.nickname} se ha conectado`
      : `${usuario.nickname} se ha desconectado`;
    agregarMensajeDeTransmisionAlChat(mensaje);
  },
  onMsgChat: (mensaje) => {
    agregarMensajeAlChat(mensaje);
  },
  onCreatePartida: (partida) => {
    listaPartidasAbiertas.agregarPartida(partida);
    actualizarListaPartidas();
  },
  onJoinPartida: (partida) => {
    listaPartidasAbiertas.eliminarPartida(partida.uuid);
    if (partida.uuidJugadorA === userId || partida.uuidJugadorB === userId) {
      listaPartidasEnCurso.agregarPartida(partida);
    }
    actualizarListaPartidas();
  },
  onCancelPartida: (uuid) => {
    listaPartidasAbiertas.eliminarPartida(uuid);
    actualizarListaPartidas();
  },
  disconnect: (reason) => {
    if (reason === 'io server disconnect' || reason === 'buttonClick') {
      localStorage.removeItem('userId');
      window.location.replace('/');
    }
  },
};

Object.entries(handlers).forEach(([event, handler]) => {
  socket.on(event, handler);
});

document.querySelector('#btnCerrar').addEventListener('click', () => {
  handlers.disconnect('buttonClick');
});

document.querySelector('#btnCrearPartida').addEventListener('click', () => {
  socket.emit('createPartida', handlers.onCreatePartida);
});

document.querySelector('#chatinput').addEventListener('keyup', (event) => {
  if (event.key === 'Enter') {
    const mensaje = event.target.value.trim();
    if (mensaje != '') {
      socket.emit('msgChat', mensaje, agregarMensajeAlChat);
    }
    event.target.value = '';
  }
});

function onClickEliminarPartida(game_id) {
  socket.emit('cancelPartida', game_id, handlers.onCancelPartida);
}
function onClickUnirsePartida(game_id) {
  socket.emit('joinPartida', game_id, handlers.onJoinPartida);
}
function onClickEntrarEnPartida(game_id) {
  const url = '/batalla.html?game_id=' + encodeURIComponent(game_id);
  window.open(url, '_blank');
}