diff --git a/buscadorSala.php b/buscadorSala.php index f4d33d8..9128365 100644 --- a/buscadorSala.php +++ b/buscadorSala.php @@ -22,7 +22,7 @@
- + Volver al Inicio @@ -100,7 +100,10 @@ + + + \ No newline at end of file diff --git a/js/buscadorSala.js b/js/buscadorSala.js index e6a97d9..0799c12 100644 --- a/js/buscadorSala.js +++ b/js/buscadorSala.js @@ -1,435 +1,509 @@ -let usuarioYaEstaEnEquipo = false; +let intervaloBuscadorSalas = null; +let cargandoSalas = false; -$(document).ready(function () { - comprobarSalaUsuario(); -}); +function iniciarActualizacionSalas() { + if (intervaloBuscadorSalas) { + clearInterval(intervaloBuscadorSalas); + } -// 1. Comprobar si el usuario actual ya pertenece a una sala -function comprobarSalaUsuario() { - $("#cargandoSalas").remove(); + cargarSalas(); - $.ajax({ - url: "controladores/controladorEquipoxUsuario.php", - type: "POST", - dataType: "json", - data: { orden: "obtenerSalaUsuario" }, - success: function (respuesta) { - if (respuesta.error || !respuesta.asociado) { - usuarioYaEstaEnEquipo = false; - $("#contenedorCrearSala").show(); - cargarSalas(); - } else { - usuarioYaEstaEnEquipo = true; - $("#contenedorCrearSala").hide(); // Ocultar "Crear Sala" si ya pertenece a una - cargarSalaUsuario(respuesta.idPartida); - } - }, - error: function (xhr, status, error) { - console.error("Error al comprobar la sala del usuario:", error); - usuarioYaEstaEnEquipo = false; + intervaloBuscadorSalas = setInterval(function () { + if (!usuarioYaEstaEnEquipo) { cargarSalas(); - }, - }); + } + }, 5000); } -// 2. Cargar únicamente la sala en la que está metido el usuario -function cargarSalaUsuario(idPartida) { - $.ajax({ - url: "controladores/controladorPartida.php", - type: "POST", - dataType: "json", - data: { orden: "buscar", idPartida: idPartida }, - success: function (partida) { - if (partida.error) { - console.error(partida.error); - return; - } - $("#contenedorSalas").empty(); - cargarInformacionSala(partida); - }, - error: function (xhr, status, error) { - console.error("Error al obtener la sala del usuario:", error); - }, - }); -} - -// 3. Cargar la lista completa de todas las salas function cargarSalas() { + if (cargandoSalas) { + return; + } + + cargandoSalas = true; + $.ajax({ url: "controladores/controladorPartida.php", type: "POST", dataType: "json", - data: { orden: "listar" }, + data: { + orden: "listar", + }, + success: function (partidas) { const contenedor = $("#contenedorSalas"); - contenedor.empty(); if (!Array.isArray(partidas) || partidas.length === 0) { - contenedor.html(` -
-

No hay salas disponibles actualmente.

-
- `); + $(".sala-item").remove(); + + if ($("#mensajeSinSalas").length === 0) { + contenedor.append(` +
+ +

+ No hay salas disponibles actualmente. +

+ +
+ `); + } + return; } + $("#mensajeSinSalas").remove(); + + const idsPartidas = partidas.map(function (partida) { + return String(partida.idPartida); + }); + + $(".sala-item").each(function () { + const idPartida = String($(this).data("id-partida")); + + if (!idsPartidas.includes(idPartida)) { + $(this).remove(); + } + }); + partidas.forEach(function (partida) { - cargarInformacionSala(partida); + cargarSalaBuscador(partida); }); }, + error: function (xhr, status, error) { - console.error("Error al obtener las partidas:", error); + console.error( + "Error al obtener las partidas:", + error + ); + }, + + complete: function () { + cargandoSalas = false; }, }); } -// 4. Obtener equipos y jugadores asociados a una sala concreta -function cargarInformacionSala(partida) { +function cargarSalaBuscador(partida) { $.ajax({ url: "controladores/controladorPartida.php", type: "POST", dataType: "json", - data: { orden: "getEquipos", idPartida: partida.idPartida }, + data: { + orden: "getEquipos", + idPartida: partida.idPartida, + }, + success: function (equipos) { $.ajax({ url: "controladores/controladorPartida.php", type: "POST", dataType: "json", - data: { orden: "getJugadores", idPartida: partida.idPartida }, - success: function (jugadores) { - mostrarSala(partida, equipos, jugadores); + data: { + orden: "getJugadores", + idPartida: partida.idPartida, }, + + success: function (jugadores) { + if ( + !Array.isArray(jugadores) || + jugadores.length === 0 + ) { + $( + `.sala-item[data-id-partida="${partida.idPartida}"]` + ).remove(); + + comprobarSiNoHaySalas(); + + return; + } + + actualizarSalaBuscador( + partida, + equipos, + jugadores + ); + }, + error: function (xhr, status, error) { - console.error("Error al obtener jugadores:", error); + console.error( + "Error al obtener jugadores:", + error + ); }, }); }, + error: function (xhr, status, error) { - console.error("Error al obtener equipos:", error); + console.error( + "Error al obtener equipos:", + error + ); }, }); } -// 5. Renderizar el HTML de la sala y botones según estado -function mostrarSala(partida, equipos, jugadores) { - const contenedor = $("#contenedorSalas"); +function comprobarSiNoHaySalas() { + if ($(".sala-item").length === 0) { + if ($("#mensajeSinSalas").length === 0) { + $("#contenedorSalas").append(` +
+ +

+ No hay salas disponibles actualmente. +

+ +
+ `); + } + } +} + +function actualizarSalaBuscador( + partida, + equipos, + jugadores +) { + $("#mensajeSinSalas").remove(); + + const selectorSala = + `.sala-item[data-id-partida="${partida.idPartida}"]`; + + const salaExistente = $(selectorSala); + + if (salaExistente.length === 0) { + crearSalaBuscador( + partida, + equipos, + jugadores + ); + + return; + } + + const equiposHTML = + generarEquiposHTML( + partida, + equipos, + jugadores + ); + + salaExistente + .find(".equipos") + .html(equiposHTML); +} + +function crearSalaBuscador( + partida, + equipos, + jugadores +) { + $("#mensajeSinSalas").remove(); + + const equiposHTML = + generarEquiposHTML( + partida, + equipos, + jugadores + ); + + const salaHTML = ` +
+ +
+ +
+ + ${escapeHTML(partida.nombrePartida)} + +
+ +
+ +
+ + ${equiposHTML} + +
+ +
+ +
+ +
+ `; + + $("#contenedorSalas").append(salaHTML); +} + +function generarEquiposHTML( + partida, + equipos, + jugadores +) { let equiposHTML = ""; equipos.forEach(function (equipo) { - const jugadoresEquipo = jugadores.filter(function (jugador) { - return jugador.idEquipo == equipo.idEquipo; - }); + const jugadoresEquipo = + jugadores.filter(function (jugador) { + return ( + jugador.idEquipo == + equipo.idEquipo + ); + }); let jugadoresHTML = ""; + if (jugadoresEquipo.length > 0) { jugadoresEquipo.forEach(function (jugador) { - const esHost = jugador.idUsuario == partida.idUsuario; + const esHost = + jugador.idUsuario == + partida.idUsuario; jugadoresHTML += ` -
-
- ${esHost ? '' : ''} - ${escapeHTML(jugador.nombreUsuario)} -
+
- ${ - esHost - ? `HOST` - : "" - } -
- `; +
+ + + + ${ + esHost + ? '' + : '' + } + + + + ${escapeHTML( + jugador.nombreUsuario + )} + +
+ + ${ + esHost + ? ` + + + HOST + + + ` + : "" + } + +
+ `; }); } else { - jugadoresHTML = `
Sin jugadores
`; + jugadoresHTML = ` +
+ Sin jugadores +
+ `; } - // Botón "Unirse" solo visible si NO pertenece a ningún equipo let botonUnirseHTML = ""; + if (!usuarioYaEstaEnEquipo) { botonUnirseHTML = ` - `; } equiposHTML += ` -
-
${escapeHTML(equipo.nombreEquipo)}
+
+ +
+ ${escapeHTML( + equipo.nombreEquipo + )} +
+
+ ${jugadoresHTML} +
+ ${botonUnirseHTML} +
`; }); - // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala - // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala - let accionesSalaHTML = ""; - - if (usuarioYaEstaEnEquipo) { - const esHost = partida.idUsuario == idUsuarioSesion; - let botonIniciarHTML = ""; - - // Solo el host puede iniciar la partida - if (esHost) { - botonIniciarHTML = ` - - ¡Iniciar Partida! - - `; - } - - accionesSalaHTML = ` -
- - - - ${botonIniciarHTML} - -
- `; - } - - const salaHTML = ` -
-
-
- ${escapeHTML(partida.nombrePartida)} -
-
-
- ${equiposHTML} -
- ${accionesSalaHTML} -
-
-
- `; - - contenedor.append(salaHTML); + return equiposHTML; } -// 6. Evento: Unirse a un Equipo -$(document).on("click", ".btn-unirse-equipo", function () { - const boton = $(this); - const idEquipo = boton.data("id-equipo"); - const idPartida = boton.data("id-partida"); - - boton.prop("disabled", true).text("Uniéndose..."); - - $.ajax({ - url: "controladores/controladorEquipoxUsuario.php", - type: "POST", - dataType: "json", - data: { - orden: "registrarUsuarioEnEquipo", - idEquipo: idEquipo, - }, - success: function (respuesta) { - if (respuesta.error) { - alert(respuesta.error); - boton.prop("disabled", false).text("Unirse"); - return; - } - - usuarioYaEstaEnEquipo = true; - $("#contenedorCrearSala").hide(); - $("#contenedorSalas").empty(); - cargarSalaUsuario(idPartida); - }, - error: function (xhr, status, error) { - console.error("Error al unirse al equipo:", error); - alert("No se ha podido unir al equipo."); - boton.prop("disabled", false).text("Unirse"); - }, - }); -}); - -// 7. Evento: Abandonar Sala -// Guardamos temporalmente el botón presionado -let botonAbandonarReferencia = null; - -// A. Al hacer clic en el botón "Abandonar sala" de la tarjeta, abrimos el modal -$(document).on("click", ".btn-abandonar-sala", function () { - botonAbandonarReferencia = $(this); - - const esHost = $(this).data("es-host") === true || $(this).data("es-host") === "true"; - const titulo = $("#modalAbandonarSalaLabel"); - const mensaje = $("#modalAbandonarSalaMensaje"); - const botonConfirmar = $("#btnConfirmarAbandonar"); - - if (esHost) { - titulo.text("¿Abandonar la sala?"); - mensaje.text( - "Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores.", - ); - botonConfirmar.text("Sí, terminar partida"); - } else { - titulo.text("¿Abandonar la sala?"); - mensaje.text( - "Si sales de la sala, perderás tu lugar en el equipo.", - ); - botonConfirmar.text("Sí, salir"); - } - - const modal = new bootstrap.Modal( - document.getElementById("modalAbandonarSala"), - ); - - modal.show(); -}); - - -// B. Al hacer clic en "Sí, salir" dentro del modal Kahoot -$(document).on("click", "#btnConfirmarAbandonar", function () { - const modalEl = document.getElementById("modalAbandonarSala"); - const modalInstance = bootstrap.Modal.getInstance(modalEl); - - const btnConfirmar = $(this); - btnConfirmar.prop("disabled", true).text("Saliendo..."); - - $.ajax({ - url: "controladores/controladorEquipoxUsuario.php", - type: "POST", - dataType: "json", - data: { orden: "salirDeSala" }, - success: function (respuesta) { - btnConfirmar.prop("disabled", false).text("Sí, salir"); - - if (modalInstance) { - modalInstance.hide(); - } - - if (respuesta.error) { - alert(respuesta.error); - return; - } - - // Restablecemos la interfaz a la lista completa de salas - usuarioYaEstaEnEquipo = false; - $("#contenedorCrearSala").show(); - cargarSalas(); - }, - error: function (xhr, status, error) { - console.error("Error al salir de la sala:", error); - alert("No se pudo salir de la sala."); - btnConfirmar.prop("disabled", false).text("Sí, salir"); - if (modalInstance) { - modalInstance.hide(); - } - }, - }); -}); -// 8. Evento: Crear Sala $("#btnCrearSala").on("click", function () { - const nombreSala = $("#nombreSala").val().trim(); - const nombreEquipo1 = $("#nombreEquipo1").val().trim(); - const nombreEquipo2 = $("#nombreEquipo2").val().trim(); + const nombreSala = + $("#nombreSala").val().trim(); + + const nombreEquipo1 = + $("#nombreEquipo1").val().trim(); + + const nombreEquipo2 = + $("#nombreEquipo2").val().trim(); let valido = true; - $(".mensaje-error-sala").remove(); - $(".input-kahoot").removeClass("is-invalid"); - if (nombreSala === "" || nombreSala.length < 3) { + $(".mensaje-error-sala").remove(); + + $(".input-kahoot") + .removeClass("is-invalid"); + + if ( + nombreSala === "" || + nombreSala.length < 3 + ) { mostrarError( "#nombreSala", - "El nombre de la sala debe tener al menos 3 caracteres.", + "El nombre de la sala debe tener al menos 3 caracteres." ); + valido = false; } - if (nombreEquipo1 === "" || nombreEquipo1.length < 2) { + if ( + nombreEquipo1 === "" || + nombreEquipo1.length < 2 + ) { mostrarError( "#nombreEquipo1", - "El nombre del equipo debe tener al menos 2 caracteres.", + "El nombre del equipo debe tener al menos 2 caracteres." ); + valido = false; } - if (nombreEquipo2 === "" || nombreEquipo2.length < 2) { + if ( + nombreEquipo2 === "" || + nombreEquipo2.length < 2 + ) { mostrarError( "#nombreEquipo2", - "El nombre del equipo debe tener al menos 2 caracteres.", + "El nombre del equipo debe tener al menos 2 caracteres." ); + valido = false; } if ( nombreEquipo1 !== "" && nombreEquipo2 !== "" && - nombreEquipo1.toLowerCase() === nombreEquipo2.toLowerCase() + nombreEquipo1.toLowerCase() === + nombreEquipo2.toLowerCase() ) { mostrarError( "#nombreEquipo2", - "Los dos equipos deben tener nombres diferentes.", + "Los dos equipos deben tener nombres diferentes." ); + valido = false; } - if (!valido) return; + if (!valido) { + return; + } const boton = $("#btnCrearSala"); - boton.prop("disabled", true).text("Creando sala..."); + + boton + .prop("disabled", true) + .text("Creando sala..."); $.ajax({ url: "controladores/controladorPartida.php", type: "POST", dataType: "json", + data: { orden: "crear", nombrePartida: nombreSala, nombreEquipo1: nombreEquipo1, nombreEquipo2: nombreEquipo2, }, + success: function (respuesta) { if (respuesta.error) { alert(respuesta.error); - boton.prop("disabled", false).text("Crear sala"); + + boton + .prop("disabled", false) + .text("Crear sala"); + return; } if (respuesta.exito) { $("#modalCrearSala").modal("hide"); + location.reload(); } }, + error: function (xhr, status, error) { - console.error("Error al crear la sala:", error); - alert("No se ha podido crear la sala."); - boton.prop("disabled", false).text("Crear sala"); + console.error( + "Error al crear la sala:", + error + ); + + alert( + "No se ha podido crear la sala." + ); + + boton + .prop("disabled", false) + .text("Crear sala"); }, }); }); -// Auxiliares -function escapeHTML(texto) { - return $("
") - .text(texto ?? "") - .html(); -} - -function mostrarError(selector, mensaje) { +function mostrarError( + selector, + mensaje +) { const input = $(selector); + input.addClass("is-invalid"); - input.after( - `
${mensaje}
`, - ); + + input.after(` +
+ + ${mensaje} + +
+ `); } -$(document).on("input", ".input-kahoot", function () { - $(this).removeClass("is-invalid"); - $(this).next(".mensaje-error-sala").remove(); -}); +$(document).on( + "input", + ".input-kahoot", + function () { + $(this) + .removeClass("is-invalid"); + + $(this) + .next(".mensaje-error-sala") + .remove(); + } +); \ No newline at end of file diff --git a/js/sala.js b/js/sala.js new file mode 100644 index 0000000..42c0d8f --- /dev/null +++ b/js/sala.js @@ -0,0 +1,550 @@ +let usuarioYaEstaEnEquipo = false; +let intervaloSala = null; +let botonAbandonarReferencia = null; + +$(document).ready(function () { + comprobarSalaUsuario(); +}); + +function comprobarSalaUsuario() { + $("#cargandoSalas").remove(); + + $.ajax({ + url: "controladores/controladorEquipoxUsuario.php", + type: "POST", + dataType: "json", + data: { + orden: "obtenerSalaUsuario", + }, + + success: function (respuesta) { + if (respuesta.error || !respuesta.asociado) { + usuarioYaEstaEnEquipo = false; + + $("#contenedorCrearSala").show(); + + iniciarActualizacionSalas(); + } else { + usuarioYaEstaEnEquipo = true; + + $("#contenedorCrearSala").hide(); + + cargarSalaUsuario(respuesta.idPartida); + } + }, + + error: function (xhr, status, error) { + usuarioYaEstaEnEquipo = false; + + if (intervaloSala) { + clearInterval(intervaloSala); + intervaloSala = null; + } + + $("#contenedorSalas").empty(); + + $("#contenedorCrearSala").show(); + + iniciarActualizacionSalas(); + }, + }); +} + +function cargarSalaUsuario(idPartida) { + cargarSalaCompleta(idPartida); + + if (intervaloSala) { + clearInterval(intervaloSala); + } + + intervaloSala = setInterval(function () { + actualizarSalaUsuario(idPartida); + }, 5000); +} + +function cargarSalaCompleta(idPartida) { + $.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "buscar", + idPartida: idPartida, + }, + + success: function (partida) { + if (partida.error) { + console.error(partida.error); + return; + } + + cargarInformacionSalaCompleta(partida); + }, + + error: function (xhr, status, error) { + console.error("Error al obtener la sala:", error); + }, + }); +} + +function cargarInformacionSalaCompleta(partida) { + $.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "getEquipos", + idPartida: partida.idPartida, + }, + + success: function (equipos) { + $.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "getJugadores", + idPartida: partida.idPartida, + }, + + success: function (jugadores) { + mostrarSala(partida, equipos, jugadores); + }, + + error: function (xhr, status, error) { + console.error("Error al obtener jugadores:", error); + }, + }); + }, + + error: function (xhr, status, error) { + console.error("Error al obtener equipos:", error); + }, + }); +} + +function actualizarSalaUsuario(idPartida) { + $.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "buscar", + idPartida: idPartida, + }, + + success: function (partida) { + if (partida.error) { + console.error(partida.error); + return; + } + + cargarInformacionSala(partida); + }, + + error: function (xhr, status, error) { + console.error("Error al actualizar la sala:", error); + }, + }); +} + +function cargarInformacionSala(partida) { + $.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "getEquipos", + idPartida: partida.idPartida, + }, + + success: function (equipos) { + $.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "getJugadores", + idPartida: partida.idPartida, + }, + + success: function (jugadores) { + mostrarEquipos(partida, equipos, jugadores); + }, + + error: function (xhr, status, error) { + console.error("Error al obtener jugadores:", error); + }, + }); + }, + + error: function (xhr, status, error) { + console.error("Error al obtener equipos:", error); + }, + }); +} + +function mostrarSala(partida, equipos, jugadores) { + const contenedor = $("#contenedorSalas"); + + let equiposHTML = ""; + + equipos.forEach(function (equipo) { + const jugadoresEquipo = jugadores.filter(function (jugador) { + return jugador.idEquipo == equipo.idEquipo; + }); + + let jugadoresHTML = ""; + + if (jugadoresEquipo.length > 0) { + jugadoresEquipo.forEach(function (jugador) { + const esHost = jugador.idUsuario == partida.idUsuario; + + jugadoresHTML += ` +
+ +
+ + ${ + esHost + ? '' + : '' + } + + + ${escapeHTML(jugador.nombreUsuario)} +
+ + ${ + esHost + ? ` + HOST + ` + : "" + } + +
+ `; + }); + } else { + jugadoresHTML = ` +
+ Sin jugadores +
+ `; + } + + equiposHTML += ` +
+ +
+ ${escapeHTML(equipo.nombreEquipo)} +
+ +
+ ${jugadoresHTML} +
+ +
+ `; + }); + + const esHost = partida.idUsuario == idUsuarioSesion; + + let botonIniciarHTML = ""; + + if (esHost) { + botonIniciarHTML = ` + + + + ¡Iniciar Partida! + + + `; + } + + const salaHTML = ` +
+ +
+ +
+ ${escapeHTML(partida.nombrePartida)} +
+ +
+ +
+ ${equiposHTML} +
+ +
+ + + + ${esHost ? botonIniciarHTML : ""} + +
+ +
+ +
+ +
+ `; + + contenedor.html(salaHTML); +} + +$(document).on("click", ".btn-unirse-equipo", function () { + const boton = $(this); + + const idEquipo = boton.data("id-equipo"); + const idPartida = boton.data("id-partida"); + + boton.prop("disabled", true).text("Uniéndose..."); + + $.ajax({ + url: "controladores/controladorEquipoxUsuario.php", + type: "POST", + dataType: "json", + + data: { + orden: "registrarUsuarioEnEquipo", + idEquipo: idEquipo, + }, + + success: function (respuesta) { + if (respuesta.error) { + alert(respuesta.error); + + boton.prop("disabled", false).text("Unirse"); + + return; + } + + usuarioYaEstaEnEquipo = true; + + $("#contenedorCrearSala").hide(); + $("#contenedorSalas").empty(); + + cargarSalaUsuario(idPartida); + }, + + error: function (xhr, status, error) { + console.error("Error al unirse al equipo:", error); + + alert("No se ha podido unir al equipo."); + + boton.prop("disabled", false).text("Unirse"); + }, + }); +}); + +$(document).on("click", ".btn-abandonar-sala", function () { + botonAbandonarReferencia = $(this); + + const esHost = + $(this).data("es-host") === true || + $(this).data("es-host") === "true"; + + const titulo = $("#modalAbandonarSalaLabel"); + + const mensaje = $("#modalAbandonarSalaMensaje"); + + const botonConfirmar = $("#btnConfirmarAbandonar"); + + if (esHost) { + titulo.text("¿Abandonar la sala?"); + + mensaje.text( + "Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores.", + ); + + botonConfirmar.text("Sí, terminar partida"); + } else { + titulo.text("¿Abandonar la sala?"); + + mensaje.text( + "Si sales de la sala, perderás tu lugar en el equipo.", + ); + + botonConfirmar.text("Sí, salir"); + } + + const modal = new bootstrap.Modal( + document.getElementById("modalAbandonarSala"), + ); + + modal.show(); +}); + +$(document).on("click", "#btnConfirmarAbandonar", function () { + const modalEl = + document.getElementById("modalAbandonarSala"); + + const modalInstance = + bootstrap.Modal.getInstance(modalEl); + + const btnConfirmar = $(this); + + btnConfirmar + .prop("disabled", true) + .text("Saliendo..."); + + $.ajax({ + url: "controladores/controladorEquipoxUsuario.php", + type: "POST", + dataType: "json", + + data: { + orden: "salirDeSala", + }, + + success: function (respuesta) { + btnConfirmar + .prop("disabled", false) + .text("Sí, salir"); + + if (modalInstance) { + modalInstance.hide(); + } + + if (respuesta.error) { + alert(respuesta.error); + return; + } + + usuarioYaEstaEnEquipo = false; + + if (intervaloSala) { + clearInterval(intervaloSala); + intervaloSala = null; + } + + $("#contenedorSalas").empty(); + + $("#contenedorCrearSala").show(); + + iniciarActualizacionSalas(); + }, + + error: function (xhr, status, error) { + console.error( + "Error al salir de la sala:", + error + ); + + alert("No se pudo salir de la sala."); + + btnConfirmar + .prop("disabled", false) + .text("Sí, salir"); + + if (modalInstance) { + modalInstance.hide(); + } + }, + }); +}); + +function escapeHTML(texto) { + return $("
") + .text(texto ?? "") + .html(); +} + +function mostrarEquipos( + partida, + equipos, + jugadores +) { + let equiposHTML = ""; + + equipos.forEach(function (equipo) { + const jugadoresEquipo = + jugadores.filter(function (jugador) { + return jugador.idEquipo == equipo.idEquipo; + }); + + let jugadoresHTML = ""; + + if (jugadoresEquipo.length > 0) { + jugadoresEquipo.forEach(function (jugador) { + const esHost = + jugador.idUsuario == partida.idUsuario; + + jugadoresHTML += ` +
+ +
+ + ${ + esHost + ? '' + : '' + } + + + ${escapeHTML( + jugador.nombreUsuario + )} +
+ + ${ + esHost + ? ` + HOST + ` + : "" + } + +
+ `; + }); + } else { + jugadoresHTML = ` +
+ Sin jugadores +
+ `; + } + + equiposHTML += ` +
+ +
+ ${escapeHTML(equipo.nombreEquipo)} +
+ +
+ ${jugadoresHTML} +
+ +
+ `; + }); + + $("#contenedorSalas .equipos").html(equiposHTML); +} \ No newline at end of file