refactorizacion a modulos

public/js/cardgames.js

@@ -1,17 +0,0 @@
-export const cardGame = (nickname, game_id) => {
-  var cardGameDiv = document.createElement('div');
-  cardGameDiv.classList.add('cardGame');
-  cardGameDiv.innerHTML = `<span>${nickname}</span>
-        <span>Esperando rival...</span>
-        <button onclick="eliminarPartida('${game_id}')">Cancelar</button>
-        `;
-};
-
-export const cardGame = (nickname, game_id) => {
-  var cardGameDiv = document.createElement('div');
-  cardGameDiv.classList.add('cardGame');
-  cardGameDiv.innerHTML = `<span>${nickname}</span>
-    <span>VS</span>
-    <button onclick="unirsePartida('${game_id}')">Unirse</button>
-    `;
-};

public/js/htmlTmpl.js

@@ -0,0 +1,27 @@
+export const cardGamePropia = (nickname, game_id) => {
+  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>
+  `;
+  const cancelGameBtn = cardGameDiv.querySelector('.cancel-game-btn');
+  cancelGameBtn.addEventListener('click', () => {
+    eliminarPartida(game_id);
+  });
+  return cardGameDiv;
+};
+
+export const cardGameGeneral = (nickname, game_id) => {
+  var cardGameDiv = document.createElement('div');
+  cardGameDiv.classList.add('cardGame');
+  cardGameDiv.innerHTML = `<span>${nickname}</span>
+      <span>VS</span>
+      <button class="join-game-btn">Unirse</button>
+  `;
+  const joinGameBtn = cardGameDiv.querySelector('.join-game-btn');
+  joinGameBtn.addEventListener('click', () => {
+    unirsePartida(game_id);
+  });
+  return cardGameDiv;
+};

public/js/listapartidas.js

@@ -6,9 +6,20 @@ export class ListaPartidas {
     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);
+    }
   }
   

public/js/listausuarios.js

@@ -6,19 +6,23 @@ export class ListaUsuarios {
       this._usuario = usuarios.find((usuario) => usuario.uuid === uuidUsuario);
       this._usuarios = usuarios.filter((usuario) => usuario.uuid !== uuidUsuario);
     }
+
     get usuario() {
       return this._usuario;
     }
+
     get usuariosConectados() {
       return this._usuarios
         .filter((usuario) => usuario.conectado)
         .sort((a, b) => a.nickname.localeCompare(b.nickname));
     }
+
     get usuariosDesconectados() {
       return this._usuarios
         .filter((usuario) => !usuario.conectado)
         .sort((a, b) => a.nickname.localeCompare(b.nickname));
     }
+
     actualizaUsuario(usuario) {
       const user = this.obtenerUsuarioPorUuid(usuario.uuid);
       if (user) {
@@ -27,6 +31,7 @@ export class ListaUsuarios {
         this._usuarios.push(usuario);
       }
     }
+    
     obtenerUsuarioPorUuid(uuid) {
       return this._usuarios.find((usuario) => usuario.uuid === uuid);
     }

public/js/salaespera.js

@@ -1,24 +1,30 @@
-import { ListaUsuarios } from "./listausuarios.js";
-import { ListaPartidas } from "./listapartidas.js";
+import { ListaUsuarios } from './listausuarios.js';
+import { ListaPartidas } from './listapartidas.js';
+import { cardGamePropia, cardGameGeneral } 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 chat = document.getElementById('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;
 
-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;
@@ -40,12 +46,15 @@ function listarUsuarios() {
   });
 }
 function listarPartidasAbiertas() {
+  partidasAbiertasEl.innerHTML = '';
   listaPartidas.partidasAbiertas.forEach((partida) => {
-    cardGameHTML(partida.nickJugadorA, partida.uuid);
+    const cardGame =
+      userId === partida.uuidJugadorA
+        ? cardGamePropia(partida.nickJugadorA, partida.uuid)
+        : cardGameGeneral(partida.nickJugadorA, partida.uuid);
+    partidasAbiertasEl.appendChild(cardGame);
   });
 }
-
-// Añadir msg al chat
 function agregaMsg({ uuid, msg }) {
   const spanUser = document.createElement('span');
   const spanMsg = document.createElement('span');
@@ -64,7 +73,6 @@ function agregaMsg({ uuid, msg }) {
   chat.appendChild(linea);
   logchat.scrollTop = logchat.scrollHeight;
 }
-//Añadir mensaje del servidor
 function agregaMsgBroadcast(msg) {
   const spanMsg = document.createElement('span');
   spanMsg.textContent = msg;
@@ -75,33 +83,13 @@ function agregaMsgBroadcast(msg) {
   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);
+  listarUsuarios();
   listarPartidasAbiertas();
 };
-// Actualiza info Usuarios
 const actualizaUsuarios = (usuario) => {
   listaUsuarios.actualizaUsuario(usuario);
   listarUsuarios();
@@ -109,20 +97,15 @@ const actualizaUsuarios = (usuario) => {
     ? agregaMsgBroadcast(`${usuario.nickname} se ha conectado`)
     : agregaMsgBroadcast(`${usuario.nickname} se ha desconectado`);
 };
-
-const agregaPartida = (partida) => {
-  partidasAbiertasEl.innerHTML = '';
+const agregarPartida = (partida) =>{
   listaPartidas.agregarPartida(partida);
   listarPartidasAbiertas();
-};
+}
+
 
-const onCloseClick = () => {
-  localStorage.removeItem('userId');
-  window.location.replace('/');
-};
 // Cerrar sesión
 const cerrarSesion = (reason) => {
-  if (reason === 'io server disconnect') {
+  if (reason === 'io server disconnect' || reason === 'buttonClick') {
     localStorage.removeItem('userId');
     window.location.replace('/');
   }
@@ -137,18 +120,17 @@ function enviarMensaje(event) {
     event.target.value = '';
   }
 }
-// Crear partida
-const crearPartida = () => {
+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);
-socket.on('on_create_partida', agregaPartida);
 
-// const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
-// window.open(url, '_blank');
+// // const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
+// // window.open(url, '_blank');