diff --git a/buscadorSala.php b/buscadorSala.php index a8705e3..0a29923 100644 --- a/buscadorSala.php +++ b/buscadorSala.php @@ -24,21 +24,46 @@
+ +
+
+ + + +

+ Cargando salas... +

+ +
+
+
+ + +
+ + + placeholder="Ej. Noche de Trivial" + maxlength="100"> +
+ + + placeholder="Ej. Los cerebritos" + maxlength="50"> +
+ + + placeholder="Ej. Los campeones" + maxlength="50"> +
+
+ + +
+
+ + - + + + - \ No newline at end of file + diff --git a/clases/ClasePartida.php b/clases/ClasePartida.php index 287e4a9..b765afe 100644 --- a/clases/ClasePartida.php +++ b/clases/ClasePartida.php @@ -169,7 +169,7 @@ class Partida } catch (PDOException $error) { return [ "error" => "Ocurrió un error al recuperar las preguntas de la partida.", - 'error_tecnico' => $error->getMessage() + 'error_tecnico' => $error->getMessage() ]; } } @@ -332,17 +332,18 @@ class Partida ]; } } - /** + /** * Vincula un equipo a esta partida en la tabla intermedia 'equipoxpartida'. * Permite registrar qué grupos están participando en este torneo. */ - public function registrarEquipoEnPartida($idEquipo) { + public function registrarEquipoEnPartida($idEquipo) + { $conexion = conexionBD(); // Obtenemos la conexión modular del proyecto - + if (is_array($conexion)) { return $conexion; // Si hay error en la conexión, lo devuelve } - + try { // Preparamos la consulta para insertar la relación en la tabla intermedia real $consulta = $conexion->prepare(" @@ -351,12 +352,12 @@ class Partida VALUES (:idPartida, :idEquipo) "); - + // Vinculamos los parámetros con el objeto de la partida actual y el equipo recibido $consulta->bindParam(":idPartida", $this->idPartida); $consulta->bindParam(":idEquipo", $idEquipo); $consulta->execute(); - + return [ "exito" => "El equipo se vinculó a la partida correctamente.", "exito_tecnico" => $conexion->lastInsertId() @@ -374,13 +375,14 @@ class Partida * Obtiene todos los equipos que están compitiendo en esta partida. * Es útil para mostrar la lista de rivales antes de empezar a responder. */ - public function getEquiposParticipantes() { + public function getEquiposParticipantes() + { $conexion = conexionBD(); - + if (is_array($conexion)) { return $conexion; } - + try { // Hacemos un INNER JOIN para traer los nombres de los equipos desde la tabla intermedia $consulta = $conexion->prepare(" @@ -394,10 +396,10 @@ class Partida WHERE exp.idPartida = :idPartida ORDER BY e.nombreEquipo ASC "); - + $consulta->bindParam(":idPartida", $this->idPartida); $consulta->execute(); - + return $consulta->fetchAll(PDO::FETCH_ASSOC); // Devuelve el array con los equipos rivales } catch (PDOException $error) { return [ @@ -411,42 +413,57 @@ class Partida * Obtiene todos los jugadores reales (Usuarios) que están jugando en esta partida. * Utiliza la tabla 'equipoxusuario' en SQL para cruzar los datos. */ - public function getJugadoresDeLaPartida() { + public function getJugadoresDeLaPartida() + { $conexion = conexionBD(); - + if (is_array($conexion)) { return $conexion; } - + try { - // Cruza la partida con los equipos, y luego los equipos con los usuarios - // para saber los nombres de todas las personas que están jugando el torneo. + $consulta = $conexion->prepare(" - SELECT DISTINCT - u.idUsuario, - u.nombreUsuario, - u.email, - e.nombreEquipo - FROM equipoxpartida exp - INNER JOIN equipoxusuario exu - ON exp.idEquipo = exu.idEquipo - INNER JOIN usuario u - ON exu.idUsuario = u.idUsuario - INNER JOIN equipo e - ON exu.idEquipo = e.idEquipo - WHERE exp.idPartida = :idPartida - "); - - $consulta->bindParam(":idPartida", $this->idPartida); + SELECT DISTINCT + u.idUsuario, + u.nombreUsuario, + u.email, + e.idEquipo, + e.nombreEquipo + FROM equipoxpartida exp + + INNER JOIN equipoxusuario exu + ON exp.idEquipo = exu.idEquipo + + INNER JOIN usuario u + ON exu.idUsuario = u.idUsuario + + INNER JOIN equipo e + ON exu.idEquipo = e.idEquipo + + WHERE exp.idPartida = :idPartida + + ORDER BY e.nombreEquipo ASC, + u.nombreUsuario ASC + "); + + $consulta->bindParam( + ":idPartida", + $this->idPartida + ); + $consulta->execute(); - + return $consulta->fetchAll(PDO::FETCH_ASSOC); } catch (PDOException $error) { + return [ - "error" => "Ocurrió un error al obtener la lista de jugadores.", - "error_tecnico" => $error->getMessage() + "error" => + "Ocurrió un error al obtener la lista de jugadores.", + + "error_tecnico" => + $error->getMessage() ]; } } - } diff --git a/js/buscadorSala.js b/js/buscadorSala.js index eae602d..1e884bb 100644 --- a/js/buscadorSala.js +++ b/js/buscadorSala.js @@ -1,79 +1,448 @@ -const btnCrearSala = document.getElementById("btnCrearSala"); +$(document).ready(function () { -const nombreSala = document.getElementById("nombreSala"); -const nombreEquipo1 = document.getElementById("nombreEquipo1"); -const nombreEquipo2 = document.getElementById("nombreEquipo2"); + cargarSalas(); -btnCrearSala.addEventListener("click", function () { - limpiarErrores(); + function cargarSalas() { - const sala = nombreSala.value.trim(); - const equipo1 = nombreEquipo1.value.trim(); - const equipo2 = nombreEquipo2.value.trim(); + $.ajax({ + url: 'controladores/controladorPartida.php', + type: 'POST', + dataType: 'json', + data: { + orden: 'listar' + }, - let formularioValido = true; + success: function (partidas) { - if (sala === "") { - mostrarError(nombreSala, "El nombre de la sala es obligatorio."); + const contenedor = + $('#contenedorSalas'); - formularioValido = false; - } + contenedor.empty(); - if (equipo1 === "") { - mostrarError(nombreEquipo1, "El nombre del equipo 1 es obligatorio."); + if (!Array.isArray(partidas) || + partidas.length === 0) { - formularioValido = false; - } + contenedor.html(` +
+

+ No hay salas disponibles. +

+
+ `); - if (equipo2 === "") { - mostrarError(nombreEquipo2, "El nombre del equipo 2 es obligatorio."); + return; + } - formularioValido = false; - } + partidas.forEach(function (partida) { + cargarInformacionSala(partida); + }); - if (!formularioValido) { - return; - } + }, - console.log("Sala:", sala); - console.log("Equipo 1:", equipo1); - console.log("Equipo 2:", equipo2); + error: function (xhr, status, error) { + console.error( + 'Error al obtener las partidas:', + error + ); - const idSala = 1; - - //TODO aqui va la peticion ayax en el futuro para crear la sala en la bbdd - - window.location.href = "sala.html?id=" + idSala; -}); - -function mostrarError(input, mensaje) { - input.classList.add("is-invalid"); - - // Comprobamos si ya existe un mensaje - let mensajeError = input.parentElement.querySelector(".invalid-feedback"); - - if (!mensajeError) { - mensajeError = document.createElement("div"); - - mensajeError.classList.add("invalid-feedback"); - - input.parentElement.appendChild(mensajeError); - } - - mensajeError.textContent = mensaje; -} - -function limpiarErrores() { - const inputs = [nombreSala, nombreEquipo1, nombreEquipo2]; - - inputs.forEach((input) => { - input.classList.remove("is-invalid"); - - const mensajeError = input.parentElement.querySelector(".invalid-feedback"); - - if (mensajeError) { - mensajeError.remove(); + } + }); } - }); -} + + 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) { + + crearSala( + 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 crearSala( + 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) { + + jugadoresHTML += ` +
+ + 👤 + + ${escapeHTML( + jugador.nombreUsuario + )} +
+ `; + + } + ); + + } else { + + jugadoresHTML = ` +
+ Sin jugadores +
+ `; + + } + + equiposHTML += ` + +
+ +
+ ${escapeHTML( + equipo.nombreEquipo + )} +
+ +
+ + ${jugadoresHTML} + +
+ + + +
+ + `; + + }); + + const salaHTML = ` + +
+ +
+ +
+ + ${escapeHTML( + partida.nombrePartida + )} + +
+ +
+ +
+ + ${equiposHTML} + +
+ +
+ +
+ +
+ + `; + + contenedor.append(salaHTML); + + } + + $(document).on( + 'click', + '.btn-unirse-equipo', + function () { + + const boton = $(this); + + const idPartida = + boton.data('id-partida'); + + const idEquipo = + boton.data('id-equipo'); + + boton.prop('disabled', true); + + boton.text('Uniéndose...'); + + $.ajax({ + + url: + 'controladores/controladorPartida.php', + + type: 'POST', + + dataType: 'json', + + data: { + + orden: 'registrarEquipo', + + idPartida: idPartida, + + idEquipo: idEquipo + + }, + + success: function (respuesta) { + + if (respuesta.error) { + + alert(respuesta.error); + + boton.prop( + 'disabled', + false + ); + + boton.text('Unirse'); + + return; + } + + cargarSalas(); + + }, + + 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 + ); + + boton.text('Unirse'); + + } + + }); + + } + ); + + function escapeHTML(texto) { + + return $('
') + .text(texto ?? '') + .html(); + + } + + $('#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 === '') { + + mostrarError( + '#nombreSala', + 'El nombre de la sala es obligatorio.' + ); + + valido = false; + + } else if (nombreSala.length < 3) { + + mostrarError( + '#nombreSala', + 'El nombre de la sala debe tener al menos 3 caracteres.' + ); + + valido = false; + } + + if (nombreEquipo1 === '') { + + mostrarError( + '#nombreEquipo1', + 'El nombre del equipo 1 es obligatorio.' + ); + + valido = false; + + } else if (nombreEquipo1.length < 2) { + + mostrarError( + '#nombreEquipo1', + 'El nombre del equipo debe tener al menos 2 caracteres.' + ); + + valido = false; + } + + if (nombreEquipo2 === '') { + + mostrarError( + '#nombreEquipo2', + 'El nombre del equipo 2 es obligatorio.' + ); + + valido = false; + + } else if (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; + } + + console.log('Datos válidos:'); + + console.log({ + nombreSala: nombreSala, + nombreEquipo1: nombreEquipo1, + nombreEquipo2: nombreEquipo2 + }); + + }); + + function mostrarError(selector, mensaje) { + + const input = $(selector); + + input.addClass('is-invalid'); + + input.after(` +
+ ${mensaje} +
+ `); + } + + $('.input-kahoot').on('input', function () { + + $(this).removeClass('is-invalid'); + + $(this) + .next('.mensaje-error-sala') + .remove(); + + }); + +});