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 { ListaUsuarios } from './listausuarios.js';
-import { ListaPartidas } from "./listapartidas.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 agregarPartida = (partida) =>{
-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') {
+  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
+function crearPartida() {
-const 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);
+// // const url = '/batalla.html?game_id=' + encodeURIComponent(partida.uuid);
-// window.open(url, '_blank');
+// // window.open(url, '_blank');

public/salageneral.html

@@ -11,8 +11,8 @@
 
 <body>
     <div class="container">
-        <div class="container_col" style="max-width: 13rem;">    
+        <div class="container_col" style="max-width: 13rem;">
-            <h3 style="border-bottom: 2px solid #2c5364;">Lista de usuarios</h3>       
+            <h3 style="border-bottom: 2px solid #2c5364;">Lista de usuarios</h3>
             <div class="container_col" style="border: none; padding: 0;">
                 <h4>Conectados</h4>
                 <ul id="users_connect">
@@ -22,17 +22,17 @@
                 <ul id="users_disconnect">
                 </ul>
             </div>
-            <button onclick="onCloseClick();">Cerrar</button>
+            <button id="btnCerrar">Cerrar</button>
         </div>
 
         <div class="container_col" style="border: none;">
             <div id="cabecera" style="display: flex; align-items: center; justify-content: space-between; ">
                 <div>
                     <h1 style="font-size: 5rem; display: inline;">Battleship</h1>
-                    <i style="font-size: 2rem;"class="ti ti-medal-2"></i>
+                    <i style="font-size: 2rem;" class="ti ti-medal-2"></i>
-                    <i style="font-size: 2rem;"class="ti ti-medal-2"></i>
+                    <i style="font-size: 2rem;" class="ti ti-medal-2"></i>
                 </div>
-                <button onclick="crearPartida();">Crear Partida</button>
+                <button id="btnCrearPartida">Crear Partida</button>
             </div>
 
             <fieldset id="partidas_abiertas" class="container_games">
@@ -41,17 +41,12 @@
             </fieldset>
             <fieldset id="tus_partidas" class="container_games">
                 <legend>Partidas</legend>
-                <div class="cardGame">
-                    <span>Marklogo</span>
-                    <span>VS</span>
-                    <button click="">Unirse</button>
-                </div>
             </fieldset>
 
             <div class="container_col" style="overflow-y: hidden;">
                 <div id="logchat" class="container_col" style="overflow-y: auto; border: none;">
                 </div>
-                <input type="text" id="chatinput" onkeyup="enviarMensaje(event)">
+                <input type="text" id="chatinput">
             </div>
         </div>
     </div>

public/style.css

@@ -161,3 +161,32 @@ button:active {
 .spanNickOffline {
   color: #2c5364;
 }
+
+.parpadea {
+  animation-name: parpadeo;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  -webkit-animation-name:parpadeo;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+}
+
+@-moz-keyframes parpadeo{  
+  0% { opacity: 1.0; }
+  50% { opacity: 0.0; }
+  100% { opacity: 1.0; }
+}
+
+@-webkit-keyframes parpadeo {  
+  0% { opacity: 1.0; }
+  50% { opacity: 0.0; }
+   100% { opacity: 1.0; }
+}
+
+@keyframes parpadeo {  
+  0% { opacity: 1.0; }
+   50% { opacity: 0.0; }
+  100% { opacity: 1.0; }
+}

src/sala-chat/sala-chat.gateway.ts

@@ -43,7 +43,7 @@ export class SalaChatGateway
     }
     client.leave('chat_general');
   }
-
+  
   @SubscribeMessage('chatMsg')
   handleMsg(client: Socket, msg: string) {
     const userId = client.handshake.auth.userId;
@@ -63,6 +63,6 @@ export class SalaChatGateway
   handleCreaPartida(client: Socket) {
     const userId = client.handshake.auth.userId;
     const partida = this.salaChatService.creaPartida(userId);
-    this.server.to('chat_general').emit('on_create_partida', partida);
+    this.server.to('chat_general').emit('onCrearPartida', partida);
   }
 }