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) => {