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 4ec3803..f0b966f 100644 --- a/js/buscadorSala.js +++ b/js/buscadorSala.js @@ -1,592 +1,171 @@ -let usuarioYaEstaEnEquipo = false; +// ===================================================== +// CARGAR LISTA DE SALAS +// ===================================================== -$(document).ready(function () { - comprobarSalaUsuario(); -}); - -// 1. Comprobar si el usuario actual ya pertenece a una sala -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(); - 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; - cargarSalas(); - }, - }); -} - -// 2. Cargar únicamente la sala en la que está metido el usuario -let intervaloSala = null; - -function cargarSalaUsuario(idPartida) { - // Primera carga completa - cargarSalaCompleta(idPartida); - - // Evitamos crear varios intervalos - if (intervaloSala) { - clearInterval(intervaloSala); - } - - intervaloSala = setInterval(() => { - 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) { - // AQUÍ hacemos la primera construcción completa - 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 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, true); - }, - error: function (xhr, status, error) { - console.error("Error al obtener la sala:", error); - }, - }); -} - -// 3. Cargar la lista completa de todas las salas function cargarSalas() { $.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) { + if ( + !Array.isArray(partidas) || + partidas.length === 0 + ) { contenedor.html(`
-

No hay salas disponibles actualmente.

+

+ No hay salas disponibles actualmente. +

`); + return; } + // Cargar cada sala individualmente partidas.forEach(function (partida) { - cargarInformacionSalaCompleta(partida); + cargarSalaBuscador(partida); }); }, + error: function (xhr, status, error) { - console.error("Error al obtener las partidas:", error); + console.error( + "Error al obtener las partidas:", + error + ); }, }); } -// 4. Obtener equipos y jugadores asociados a una sala concreta -function cargarInformacionSala(partida) { + +// ===================================================== +// CARGAR INFORMACIÓN DE UNA SALA DEL BUSCADOR +// ===================================================== + +function cargarSalaBuscador(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); + mostrarSalaBuscador( + 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"); + +// ===================================================== +// MOSTRAR UNA SALA EN EL BUSCADOR +// ===================================================== + +function mostrarSalaBuscador( + 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` - : "" + const jugadoresEquipo = jugadores.filter( + function (jugador) { + return ( + jugador.idEquipo == + equipo.idEquipo + ); } -
- `; - }); - } else { - jugadoresHTML = `
Sin jugadores
`; - } - - // Botón "Unirse" solo visible si NO pertenece a ningún equipo - let botonUnirseHTML = ""; - if (!usuarioYaEstaEnEquipo) { - botonUnirseHTML = ` - - `; - } - - equiposHTML += ` -
-
${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); -} - -// 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(); - - let valido = true; - $(".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.", - ); - valido = false; - } - - if (nombreEquipo1 === "" || nombreEquipo1.length < 2) { - mostrarError( - "#nombreEquipo1", - "El nombre del equipo debe tener al menos 2 caracteres.", - ); - valido = false; - } - - if (nombreEquipo2 === "" || nombreEquipo2.length < 2) { - mostrarError( - "#nombreEquipo2", - "El nombre del equipo debe tener al menos 2 caracteres.", - ); - valido = false; - } - - if ( - nombreEquipo1 !== "" && - nombreEquipo2 !== "" && - nombreEquipo1.toLowerCase() === nombreEquipo2.toLowerCase() - ) { - mostrarError( - "#nombreEquipo2", - "Los dos equipos deben tener nombres diferentes.", - ); - valido = false; - } - - if (!valido) return; - - const boton = $("#btnCrearSala"); - 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"); - 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"); - }, - }); -}); - -// Auxiliares -function escapeHTML(texto) { - return $("
") - .text(texto ?? "") - .html(); -} - -function mostrarError(selector, mensaje) { - const input = $(selector); - input.addClass("is-invalid"); - input.after( - `
${mensaje}
`, - ); -} - -$(document).on("input", ".input-kahoot", function () { - $(this).removeClass("is-invalid"); - $(this).next(".mensaje-error-sala").remove(); -}); - -function mostrarEquipos(partida, equipos, jugadores) { - let equiposHTML = ""; - - equipos.forEach(function (equipo) { - const jugadoresEquipo = jugadores.filter(function (jugador) { - return jugador.idEquipo == equipo.idEquipo; - }); let jugadoresHTML = ""; + // ----------------------------------------------- + // JUGADORES DEL EQUIPO + // ----------------------------------------------- + if (jugadoresEquipo.length > 0) { - jugadoresEquipo.forEach(function (jugador) { - const esHost = jugador.idUsuario == partida.idUsuario; + jugadoresEquipo.forEach( + function (jugador) { + const esHost = + jugador.idUsuario == + partida.idUsuario; - jugadoresHTML += ` -
+ jugadoresHTML += ` +
-
- - ${ - esHost - ? '' - : '' - } - +
+ + ${ + esHost + ? '' + : '' + } + + + ${escapeHTML( + jugador.nombreUsuario + )} +
+ + ${ + esHost + ? ` + + HOST + + ` + : "" + } - ${escapeHTML(jugador.nombreUsuario)}
- - ${ - esHost - ? `HOST` - : "" - } - -
- `; - }); + `; + } + ); } else { jugadoresHTML = `
@@ -595,22 +174,296 @@ function mostrarEquipos(partida, equipos, jugadores) { `; } + // ----------------------------------------------- + // BOTÓN UNIRSE + // ----------------------------------------------- + + let botonUnirseHTML = ""; + + if (!usuarioYaEstaEnEquipo) { + botonUnirseHTML = ` + + `; + } + + // ----------------------------------------------- + // EQUIPO + // ----------------------------------------------- + equiposHTML += `
- ${escapeHTML(equipo.nombreEquipo)} + ${escapeHTML( + equipo.nombreEquipo + )}
${jugadoresHTML}
+ ${botonUnirseHTML} +
`; }); - // IMPORTANTE: - // Solo modificamos .equipos - $("#contenedorSalas .equipos").html(equiposHTML); + + // ================================================= + // TARJETA DE LA SALA + // ================================================= + + const salaHTML = ` +
+ +
+ +
+ ${escapeHTML( + partida.nombrePartida + )} +
+ +
+ +
+ ${equiposHTML} +
+ +
+ +
+ +
+ `; + + + // ================================================= + // IMPORTANTE + // ================================================= + // + // NO usamos .html() aquí porque eso eliminaría + // las salas que ya se hayan mostrado. + // + // Usamos .append() para añadir cada nueva sala. + // + + $("#contenedorSalas").append( + salaHTML + ); } + + +// ===================================================== +// CREAR SALA +// ===================================================== + +$("#btnCrearSala").on( + "click", + function () { + const nombreSala = + $("#nombreSala").val().trim(); + + const nombreEquipo1 = + $("#nombreEquipo1").val().trim(); + + const nombreEquipo2 = + $("#nombreEquipo2").val().trim(); + + let valido = true; + + // Limpiar errores anteriores + $(".mensaje-error-sala").remove(); + + $(".input-kahoot") + .removeClass("is-invalid"); + + + // ----------------------------------------------- + // VALIDAR NOMBRE DE SALA + // ----------------------------------------------- + + if ( + nombreSala === "" || + nombreSala.length < 3 + ) { + mostrarError( + "#nombreSala", + "El nombre de la sala debe tener al menos 3 caracteres." + ); + + valido = false; + } + + + // ----------------------------------------------- + // VALIDAR EQUIPO 1 + // ----------------------------------------------- + + if ( + nombreEquipo1 === "" || + nombreEquipo1.length < 2 + ) { + mostrarError( + "#nombreEquipo1", + "El nombre del equipo debe tener al menos 2 caracteres." + ); + + valido = false; + } + + + // ----------------------------------------------- + // VALIDAR EQUIPO 2 + // ----------------------------------------------- + + if ( + nombreEquipo2 === "" || + nombreEquipo2.length < 2 + ) { + mostrarError( + "#nombreEquipo2", + "El nombre del equipo debe tener al menos 2 caracteres." + ); + + valido = false; + } + + + // ----------------------------------------------- + // LOS EQUIPOS NO PUEDEN TENER EL MISMO NOMBRE + // ----------------------------------------------- + + if ( + nombreEquipo1 !== "" && + nombreEquipo2 !== "" && + nombreEquipo1.toLowerCase() === + nombreEquipo2.toLowerCase() + ) { + mostrarError( + "#nombreEquipo2", + "Los dos equipos deben tener nombres diferentes." + ); + + valido = false; + } + + + // Si hay errores, no continuar + if (!valido) { + return; + } + + + // ----------------------------------------------- + // DESACTIVAR BOTÓN + // ----------------------------------------------- + + const boton = $("#btnCrearSala"); + + boton + .prop("disabled", true) + .text("Creando sala..."); + + + // ----------------------------------------------- + // CREAR 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"); + + 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"); + }, + }); + } +); + + +// ===================================================== +// MOSTRAR ERROR DE VALIDACIÓN +// ===================================================== + +function mostrarError( + selector, + mensaje +) { + const input = $(selector); + + input.addClass("is-invalid"); + + input.after(` +
+ ${mensaje} +
+ `); +} + + +// ===================================================== +// LIMPIAR ERRORES AL ESCRIBIR +// ===================================================== + +$(document).on( + "input", + ".input-kahoot", + function () { + $(this) + .removeClass("is-invalid"); + + $(this) + .next(".mensaje-error-sala") + .remove(); + } +); diff --git a/js/sala.js b/js/sala.js new file mode 100644 index 0000000..b12547e --- /dev/null +++ b/js/sala.js @@ -0,0 +1,665 @@ +let usuarioYaEstaEnEquipo = false; +let intervaloSala = null; +let botonAbandonarReferencia = null; + +$(document).ready(function () { + comprobarSalaUsuario(); +}); + +// ===================================================== +// COMPROBAR SI EL USUARIO YA ESTÁ EN UNA SALA +// ===================================================== + +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(); + + cargarSalas(); + } else { + usuarioYaEstaEnEquipo = true; + + $("#contenedorCrearSala").hide(); + + cargarSalaUsuario(respuesta.idPartida); + } + }, + + error: function (xhr, status, error) { + console.error( + "Error al comprobar la sala del usuario:", + error + ); + + usuarioYaEstaEnEquipo = false; + + $("#contenedorCrearSala").show(); + + cargarSalas(); + }, + }); +} + +// ===================================================== +// CARGAR SALA DEL USUARIO +// ===================================================== + +function cargarSalaUsuario(idPartida) { + // Primera carga completa + cargarSalaCompleta(idPartida); + + // Evitar intervalos duplicados + if (intervaloSala) { + clearInterval(intervaloSala); + } + + intervaloSala = setInterval(function () { + actualizarSalaUsuario(idPartida); + }, 5000); +} + +// ===================================================== +// CARGA COMPLETA DE LA SALA +// ===================================================== + +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 + ); + }, + }); +} + +// ===================================================== +// OBTENER EQUIPOS Y JUGADORES +// ===================================================== + +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 + ); + }, + }); +} + +// ===================================================== +// ACTUALIZAR SALA CADA 5 SEGUNDOS +// ===================================================== + +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 + ); + }, + }); +} + +// ===================================================== +// OBTENER INFORMACIÓN PARA ACTUALIZACIÓN +// ===================================================== + +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 + ); + }, + }); +} + +// ===================================================== +// MOSTRAR SALA COMPLETA +// ===================================================== + +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 + : "" + } + +
+ +
+ +
+ +
+ `; + + // IMPORTANTE: + // El usuario está dentro de una única sala. + // Por eso aquí SÍ queremos reemplazar. + contenedor.html(salaHTML); +} + + +// ===================================================== +// 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"); + }, + }); + } +); + +// ===================================================== +// ABANDONAR SALA - ABRIR 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(); + } +); + +// ===================================================== +// CONFIRMAR ABANDONAR SALA +// ===================================================== + +$(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; + } + + $("#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(); + } + }, + }); + } +); + +// ===================================================== +// AUXILIARES +// ===================================================== + +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); +}