implementadas las batallas

public/js/htmlTmpl.js

@@ -25,3 +25,18 @@ export const cardGameGeneral = (nickname, game_id,unirsePartidaCallback) => {
   });
   return cardGameDiv;
 };
+
+export const cardGameEnCurso = (partida,entrarEnPartidaCallBack) => {
+  var cardGameDiv = document.createElement('div');
+  cardGameDiv.classList.add('cardGame');
+  cardGameDiv.innerHTML = `<span>${partida.nickJugadorA}</span>
+      <span class=""> vs </span>
+      <span class=""> ${partida.nickJugadorB} </span>
+      <button class="enter-game-btn button button-blue">Ingresar</button>
+  `;
+  const enterGameBtn = cardGameDiv.querySelector('.enter-game-btn');
+  enterGameBtn.addEventListener('click', () => {
+    entrarEnPartidaCallBack(partida.uuid);
+  });
+  return cardGameDiv;
+};

public/js/salaespera.js

@@ -1,6 +1,10 @@
 import { ListaUsuarios } from './listausuarios.js';
 import { ListaPartidas } from './listapartidas.js';
-import { cardGamePropia, cardGameGeneral } from './htmlTmpl.js';
+import {
+  cardGamePropia,
+  cardGameGeneral,
+  cardGameEnCurso,
+} from './htmlTmpl.js';
 
 const usersConnectUlEl = document.querySelector('#users_connect');
 const usersDisconnectUlEl = document.querySelector('#users_disconnect');
@@ -61,10 +65,15 @@ function generarElementoListaPartida(partida) {
   return cardGame;
 }
 // Función para actualizar la lista de partidas abiertas
-function actualizarListaPartidasAbiertas() {
+function actualizarListaPartidas() {
   partidasAbiertasEl.innerHTML = '<legend>Partidas abiertas</legend>';
   partidasProcesoEl.innerHTML = '<legend>Tus partidas</legend>';
 
+  listaPartidasEnCurso.partidas.forEach((partida) => {
+    const cardGame = cardGameEnCurso(partida,onClickEntrarEnPartida);
+    partidasProcesoEl.appendChild(cardGame);
+  });
+
   listaPartidasAbiertas.partidas.forEach((partida) => {
     const cardGame = generarElementoListaPartida(partida);
     userId === partida.uuidJugadorA || userId === partida.uuidJugadorB
@@ -105,11 +114,12 @@ function agregarMensajeDeTransmisionAlChat(msg) {
 }
 
 const handlers = {
-  onConnectRoom: ({ usuarios, partidas }) => {
+  onConnectRoom: ({ usuarios, partidas, partidasEnCurso }) => {
     listaUsuarios = new ListaUsuarios(userId, usuarios);
     listaPartidasAbiertas = new ListaPartidas(partidas);
+    listaPartidasEnCurso = new ListaPartidas(partidasEnCurso);
     actualizarListaUsuarios();
-    actualizarListaPartidasAbiertas();
+    actualizarListaPartidas();
   },
   onUserChangeStatus: (usuario) => {
     listaUsuarios.actualizaUsuario(usuario);
@@ -124,15 +134,18 @@ const handlers = {
   },
   onCreatePartida: (partida) => {
     listaPartidasAbiertas.agregarPartida(partida);
-    actualizarListaPartidasAbiertas();
+    actualizarListaPartidas();
   },
-  onJoinPartida: (uuid) => {
-    listaPartidasAbiertas.eliminarPartida(uuid);
-    actualizarListaPartidasAbiertas();
+  onJoinPartida: (partida) => {
+    listaPartidasAbiertas.eliminarPartida(partida.uuid);
+    if (partida.uuidJugadorA === userId || partida.uuidJugadorB === userId) {
+      listaPartidasEnCurso.agregarPartida(partida);
+    }
+    actualizarListaPartidas();
   },
   onCancelPartida: (uuid) => {
     listaPartidasAbiertas.eliminarPartida(uuid);
-    actualizarListaPartidasAbiertas();
+    actualizarListaPartidas();
   },
   disconnect: (reason) => {
     if (reason === 'io server disconnect' || reason === 'buttonClick') {
@@ -146,8 +159,6 @@ Object.entries(handlers).forEach(([event, handler]) => {
   socket.on(event, handler);
 });
 
-
-
 document.querySelector('#btnCerrar').addEventListener('click', () => {
   handlers.disconnect('buttonClick');
 });
@@ -166,12 +177,13 @@ document.querySelector('#chatinput').addEventListener('keyup', (event) => {
   }
 });
 
-// // 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);
 }
+function onClickEntrarEnPartida(game_id) {
+  const url = '/batalla.html?game_id=' + encodeURIComponent(game_id);
+  window.open(url, '_blank');
+}