refactorizacion

public/js/cardgames.js

@@ -0,0 +1,17 @@
+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/listapartidas.js

@@ -0,0 +1,14 @@
+export class ListaPartidas {
+    _partidas = [];
+    constructor(partidas) {
+      this._partidas = partidas;
+    }
+    agregarPartida(partida) {
+      this._partidas.push(partida);
+    }
+  
+    get partidasAbiertas() {
+      return this._partidas.filter((partida) => partida.abierta);
+    }
+  }
+  

public/js/listausuarios.js

@@ -0,0 +1,33 @@
+export class ListaUsuarios {
+    _usuario = {};
+    _usuarios = [];
+  
+    constructor(uuidUsuario, usuarios) {
+      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) {
+        user.conectado = usuario.conectado;
+      } else {
+        this._usuarios.push(usuario);
+      }
+    }
+    obtenerUsuarioPorUuid(uuid) {
+      return this._usuarios.find((usuario) => usuario.uuid === uuid);
+    }
+  }

public/js/salaespera.js

@@ -1,48 +1,5 @@
-class ListaUsuarios {
-  _usuario = {};
-  _usuarios = [];
-
-  constructor(uuidUsuario, usuarios) {
-    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) {
-      user.conectado = usuario.conectado;
-    } else {
-      this._usuarios.push(usuario);
-    }
-  }
-  obtenerUsuarioPorUuid(uuid) {
-    return this._usuarios.find((usuario) => usuario.uuid === uuid);
-  }
-}
-
-class ListaPartidas {
-  _partidas = [];
-
-  agregarPartida(partida) {
-    this._partidas.push(partida);
-  }
-
-  get partidasAbiertas() {
-    return this._partidas.filter((partida) => partida.abierta);
-  }
-}
+import { ListaUsuarios } from "./listausuarios.js";
+import { ListaPartidas } from "./listapartidas.js";
 
 const usersConnectUlEl = document.querySelector('#users_connect');
 const usersDisconnectUlEl = document.querySelector('#users_disconnect');
@@ -54,7 +11,7 @@ const userId = localStorage.getItem('userId');
 const socket = io('/salachat', { closeOnBeforeunload: true, auth: { userId } });
 
 let listaUsuarios;
-let listaPartidas = new ListaPartidas();
+let listaPartidas;
 
 function unirse(data) {
   console.log(data);
@@ -117,27 +74,32 @@ function agregaMsgBroadcast(msg) {
   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>VS</span>
-      <span>Esperando rival</button>
+      <span>Esperando rival...</span>
+      <button onclick="eliminarPartida('${game_id}')">Cancelar</button>
       `
       : `<span>${nickname}</span>
       <span>VS</span>
-      <button onclick="unirse('${game_id}')">Unirse</button>
+      <button onclick="unirsePartida('${game_id}')">Unirse</button>
       `;
   partidasAbiertasEl.appendChild(cardGameDiv);
 };
 
+
+
 // Logica de negocio de la aplicacion
 //Entra a la sala
-const entraSala = (usuarios) => {
+const entraSala = ({ usuarios, partidas }) => {
   listaUsuarios = new ListaUsuarios(userId, usuarios);
   listarUsuarios();
+  listaPartidas = new ListaPartidas(partidas);
+  listarPartidasAbiertas();
 };
 // Actualiza info Usuarios
 const actualizaUsuarios = (usuario) => {

public/salageneral.html

@@ -56,7 +56,7 @@
         </div>
     </div>
     <script src="socket.io/socket.io.js"></script>
-    <script src="./js/salaespera.js"></script>
+    <script type="module" src="./js/salaespera.js"></script>
 </body>
 
 </html>

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

@@ -19,11 +19,16 @@ export class SalaChatGateway
   handleConnection(client: Socket) {
     const userId = client.handshake.auth.userId;
     const userConectado = this.salaChatService.conectaUsuarioUUID(userId);
-    if (userConectado){
+    if (userConectado) {
       client.join('chat_general');
-      client.emit('onConnectRoom',this.salaChatService.listaUsuariosSinPartidas);
-      client.broadcast.to('chat_general').emit('onUserConnectRoom',userConectado);
-    }else{
+      client.emit('onConnectRoom', {
+        usuarios: this.salaChatService.listaUsuariosSinPartidas,
+        partidas: this.salaChatService.partidasAbiertas,
+      });
+      client.broadcast
+        .to('chat_general')
+        .emit('onUserConnectRoom', userConectado);
+    } else {
       client.disconnect();
     }
   }
@@ -31,8 +36,10 @@ export class SalaChatGateway
   handleDisconnect(client: Socket) {
     const userId = client.handshake.auth.userId;
     const userDesconectado = this.salaChatService.desconectaUsuarioUUID(userId);
-    if (userDesconectado){
-      client.broadcast.to('chat_general').emit('onUserDisconnectRoom',userDesconectado);
+    if (userDesconectado) {
+      client.broadcast
+        .to('chat_general')
+        .emit('onUserDisconnectRoom', userDesconectado);
     }
     client.leave('chat_general');
   }
@@ -42,20 +49,20 @@ export class SalaChatGateway
     const userId = client.handshake.auth.userId;
     const user = this.salaChatService.getUsuarioUUID(userId);
     if (user) {
-      this.server.to('chat_general').emit('chatMsg', { uuid:userId, msg });
+      this.server.to('chat_general').emit('chatMsg', { uuid: userId, msg });
     } else {
       client.disconnect();
     }
   }
 
-  sendBroadcastMsg(msg:string){
-    this.server.to('chat_general').emit('broadcastMsg',msg);
+  sendBroadcastMsg(msg: string) {
+    this.server.to('chat_general').emit('broadcastMsg', msg);
   }
 
   @SubscribeMessage('creaPartida')
   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);
+    const partida = this.salaChatService.creaPartida(userId);
+    this.server.to('chat_general').emit('on_create_partida', partida);
   }
 }

src/sala-chat/sala-chat.service.ts

@@ -19,6 +19,11 @@ export class SalaChatService {
     );
   }
 
+  get partidasAbiertas(){
+    return this.partidasService.partidasAbiertas;
+  }
+
+
   getUsuarioUUID(uuid: string) {
     return this.usuariosService.getUsuarioByUUID(uuid);
   }