Lista de partidas

public/js/htmlTmpl.js

@@ -1,27 +1,27 @@
-export const cardGamePropia = (nickname, game_id) => {
+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">Cancelar</button>
+      <button class="cancel-game-btn button button-orange">Cancelar</button>
   `;
   const cancelGameBtn = cardGameDiv.querySelector('.cancel-game-btn');
   cancelGameBtn.addEventListener('click', () => {
-    eliminarPartida(game_id);
+    eliminarPartidaCallback(game_id);
   });
   return cardGameDiv;
 };
 
-export const cardGameGeneral = (nickname, game_id) => {
+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">Unirse</button>
+      <button class="join-game-btn button button-green">Unirse</button>
   `;
   const joinGameBtn = cardGameDiv.querySelector('.join-game-btn');
   joinGameBtn.addEventListener('click', () => {
-    unirsePartida(game_id);
+    unirsePartidaCallback(game_id);
   });
   return cardGameDiv;
 };

public/js/listapartidas.js

@@ -1,25 +1,26 @@
 export class ListaPartidas {
-    _partidas = [];
-    constructor(partidas) {
-      this._partidas = partidas;
-    }
-    agregarPartida(partida) {
-      this._partidas.push(partida);
-    }
-    eliminaPartida(uuid){
-      const index = this._partidas.findIndex((partida) => partida.uuid === uuid);
-      if (index !== -1) {
-        this._partidas.splice(index, 1);
-      }
-    }
-    get partidasAbiertas() {
-      return this._partidas.filter((partida) => partida.abierta);
-    }
-    getPartidasEnCurso(uuid) {
-      return this._partidas.filter((partida) => partida.uuid === uuid && !partida.abierta);
-    }
-    obtenerPartidaPorUuid(uuid) {
-      return this._partidas.find((partida) => partida.uuid === uuid);
+  _partidas = [];
+  constructor(partidas) {
+    this._partidas = partidas;
+  }
+  agregarPartida(partida) {
+    this._partidas.push(partida);
+  }
+  actualizarPartida(partidaActualizada) {
+    const index = this._partidas.findIndex(
+      (partida) => partida.uuid === partidaActualizada.uuid,
+    );
+    if (index !== -1) {
+      this._partidas[index] = partidaActualizada;
     }
   }
-  
+  eliminarPartida(uuid) {
+    const index = this._partidas.findIndex((partida) => partida.uuid === uuid);
+    if (index !== -1) {
+      this._partidas.splice(index, 1);
+    }
+  }
+  get partidas() {
+    return this._partidas;
+  }
+}

public/js/salaespera.js

@@ -11,125 +11,164 @@ const chat = document.querySelector('#logchat');
 const userId = localStorage.getItem('userId');
 const socket = io('/salachat', { closeOnBeforeunload: true, auth: { userId } });
 
-document.querySelector('#btnCerrar').addEventListener('click', () => {
-  cerrarSesion('buttonClick');
-});
-document.querySelector('#btnCrearPartida').addEventListener('click', () => {
-  crearPartida();
-});
-document.querySelector('#chatinput').addEventListener('keyup', (event) => {
-  enviarMensaje(event);
-});
-
 let listaUsuarios;
-let listaPartidas;
+let listaPartidasAbiertas;
 
-// Funciones que modifican el DOM
-function agregarUsuarioToLista(usuario, listaElemento, claseCSS) {
+// Función para generar elementos de lista de usuarios
+function generarElementoListaUsuario(usuario, claseCSS) {
   const liUsuario = document.createElement('li');
-  liUsuario.innerHTML = usuario.nickname;
+  liUsuario.textContent = usuario.nickname;
   liUsuario.classList.add(claseCSS);
-  listaElemento.appendChild(liUsuario);
+  return liUsuario;
 }
-function listarUsuarios() {
+// Función para actualizar la lista de usuarios
+function actualizarListaUsuarios() {
   usersConnectUlEl.innerHTML = '';
   usersDisconnectUlEl.innerHTML = '';
+
   const miUsuario = listaUsuarios.usuario;
-  agregarUsuarioToLista(miUsuario, usersConnectUlEl, 'spanNickPropio');
-  const usuariosConectados = listaUsuarios.usuariosConectados;
-  usuariosConectados.forEach((usuario) => {
-    agregarUsuarioToLista(usuario, usersConnectUlEl, 'spanNick');
+  usersConnectUlEl.appendChild(
+    generarElementoListaUsuario(miUsuario, 'spanNickPropio'),
+  );
+
+  listaUsuarios.usuariosConectados.forEach((usuario) => {
+    usersConnectUlEl.appendChild(
+      generarElementoListaUsuario(usuario, 'spanNick'),
+    );
   });
-  const usuariosDesconectados = listaUsuarios.usuariosDesconectados;
-  usuariosDesconectados.forEach((usuario) => {
-    agregarUsuarioToLista(usuario, usersDisconnectUlEl, 'spanNickOffline');
+
+  listaUsuarios.usuariosDesconectados.forEach((usuario) => {
+    usersDisconnectUlEl.appendChild(
+      generarElementoListaUsuario(usuario, 'spanNickOffline'),
+    );
   });
 }
-function listarPartidasAbiertas() {
-  partidasAbiertasEl.innerHTML = '';
-  listaPartidas.partidasAbiertas.forEach((partida) => {
-    const cardGame =
-      userId === partida.uuidJugadorA
-        ? cardGamePropia(partida.nickJugadorA, partida.uuid)
-        : cardGameGeneral(partida.nickJugadorA, partida.uuid);
-    partidasAbiertasEl.appendChild(cardGame);
+// 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 actualizarListaPartidasAbiertas() {
+  partidasAbiertasEl.innerHTML = '<legend>Partidas abiertas</legend>';
+  partidasProcesoEl.innerHTML = '<legend>Tus partidas</legend>';
+
+  listaPartidasAbiertas.partidas.forEach((partida) => {
+    const cardGame = generarElementoListaPartida(partida);
+    userId === partida.uuidJugadorA || userId === partida.uuidJugadorB
+      ? partidasProcesoEl.appendChild(cardGame)
+      : partidasAbiertasEl.appendChild(cardGame);
   });
 }
-function agregaMsg({ uuid, msg }) {
+// 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');
-  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;
-  }
+  spanMsg.textContent = msg;
+
   const linea = document.createElement('p');
   linea.appendChild(spanUser);
   linea.appendChild(spanMsg);
+
   chat.appendChild(linea);
   logchat.scrollTop = logchat.scrollHeight;
 }
-function agregaMsgBroadcast(msg) {
+// 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;
 }
 
-// Logica de negocio de la aplicacion
-const entraSala = ({ usuarios, partidas }) => {
-  listaUsuarios = new ListaUsuarios(userId, usuarios);
-  listaPartidas = new ListaPartidas(partidas);
-  listarUsuarios();
-  listarPartidasAbiertas();
-};
-const actualizaUsuarios = (usuario) => {
-  listaUsuarios.actualizaUsuario(usuario);
-  listarUsuarios();
-  usuario.conectado
-    ? agregaMsgBroadcast(`${usuario.nickname} se ha conectado`)
-    : agregaMsgBroadcast(`${usuario.nickname} se ha desconectado`);
-};
-const agregarPartida = (partida) => {
-  listaPartidas.agregarPartida(partida);
-  listarPartidasAbiertas();
+const handlers = {
+  onConnectRoom: ({ usuarios, partidas }) => {
+    listaUsuarios = new ListaUsuarios(userId, usuarios);
+    listaPartidasAbiertas = new ListaPartidas(partidas);
+    actualizarListaUsuarios();
+    actualizarListaPartidasAbiertas();
+  },
+  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);
+    actualizarListaPartidasAbiertas();
+  },
+  onJoinPartida: (partida) => {
+    listaPartidasAbiertas.eliminarPartida(partida);
+    actualizarListaPartidasAbiertas();
+  },
+  onCancelPartida: (uuid) => {
+    listaPartidasAbiertas.eliminarPartida(uuid);
+    actualizarListaPartidasAbiertas();
+  },
+  disconnect: (reason) => {
+    if (reason === 'io server disconnect' || reason === 'buttonClick') {
+      localStorage.removeItem('userId');
+      window.location.replace('/');
+    }
+  },
 };
 
-// Cerrar sesión
-const cerrarSesion = (reason) => {
-  if (reason === 'io server disconnect' || reason === 'buttonClick') {
-    localStorage.removeItem('userId');
-    window.location.replace('/');
-  }
-};
-// Enviar mensaje
-function enviarMensaje(event) {
+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('chatMsg', mensaje, agregaMsg);
+      socket.emit('msgChat', mensaje, agregarMensajeAlChat);
     }
     event.target.value = '';
   }
-}
-function crearPartida() {
-  socket.emit('creaPartida');
-}
-
-// Manejadores de eventos del socket
-socket.on('onConnectRoom', entraSala);
-socket.on('onUserConnectRoom', actualizaUsuarios);
-socket.on('chatMsg', agregaMsg);
-socket.on('onCrearPartida', agregarPartida);
-socket.on('onUserDisconnectRoom', actualizaUsuarios);
-socket.on('disconnect', cerrarSesion);
+});
 
 // // const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
 // // window.open(url, '_blank');
+
+function onClickEliminarPartida(game_id) {
+  socket.emit('cancelPartida', game_id, handlers.onCancelPartida);
+}
+function onClickUnirsePartida(game_id) {
+  socket.emit('joinPartida', game_id, handlers.onJoinPartida);
+}