Merge branch 'frontend' of https://git.desarrolloalcala.com/jorge/triviagmatico into frontend

buscadorSala.php

@@ -24,21 +24,46 @@
     <main class="container py-5">
 
         <div class="text-center mb-5">
+
             <button
                 type="button"
                 class="btn btn-play-kahoot btn-crear-sala"
                 data-bs-toggle="modal"
                 data-bs-target="#modalCrearSala">
+
                 <span>+</span>
                 Crear sala
+
             </button>
+
         </div>
 
         <div
             id="contenedorSalas"
             class="row justify-content-center g-4">
 
+            <div
+                id="cargandoSalas"
+                class="col-12 text-center">
+
+                <div
+                    class="spinner-border text-primary"
+                    role="status">
+
+                    <span class="visually-hidden">
+                        Cargando...
+                    </span>
+
+                </div>
+
+                <p class="mt-3 text-muted">
+                    Cargando salas...
+                </p>
+
+            </div>
+
         </div>
+
     </main>
 
     <div
@@ -53,89 +78,124 @@
             <div class="modal-content modal-kahoot">
 
                 <div class="modal-header modal-kahoot-header">
+
                     <h5
                         class="modal-title"
                         id="modalCrearSalaLabel">
+
                         Crear sala
+
                     </h5>
+
                     <button
                         type="button"
                         class="btn-close btn-close-white"
                         data-bs-dismiss="modal"
                         aria-label="Cerrar">
                     </button>
+
                 </div>
 
                 <div class="modal-body p-4">
 
                     <div class="mb-3">
+
                         <label
                             for="nombreSala"
                             class="form-label">
+
                             Nombre de la sala
+
                         </label>
+
                         <input
                             type="text"
                             id="nombreSala"
                             class="form-control input-kahoot"
                             name="nombreSala"
-                            placeholder="Ej. Noche de Trivial">
+                            placeholder="Ej. Noche de Trivial"
+                            maxlength="100">
+
                     </div>
 
                     <div class="mb-3">
+
                         <label
                             for="nombreEquipo1"
                             class="form-label">
 
                             Nombre del equipo 1
+
                         </label>
+
                         <input
                             type="text"
                             id="nombreEquipo1"
                             name="nombreEquipo1"
                             class="form-control input-kahoot"
-                            placeholder="Ej. Los cerebritos">
+                            placeholder="Ej. Los cerebritos"
+                            maxlength="50">
+
                     </div>
 
                     <div class="mb-3">
+
                         <label
                             for="nombreEquipo2"
                             class="form-label">
+
                             Nombre del equipo 2
+
                         </label>
+
                         <input
                             type="text"
                             id="nombreEquipo2"
                             name="nombreEquipo2"
                             class="form-control input-kahoot"
-                            placeholder="Ej. Los campeones">
+                            placeholder="Ej. Los campeones"
+                            maxlength="50">
+
                     </div>
+
                 </div>
 
                 <div class="modal-footer">
+
                     <button
                         type="button"
                         class="btn btn-secondary"
                         data-bs-dismiss="modal">
+
                         Cancelar
+
                     </button>
+
                     <button
                         type="button"
                         class="btn btn-kahoot-login"
                         id="btnCrearSala">
+
                         Crear sala
+
                     </button>
+
                 </div>
+
             </div>
+
         </div>
+
     </div>
 
     <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
     </script>
-    <script src="js/lobbyDummy.js"></script>
+
+    <script src="js/jquery/jquery.min.js"></script>
+
     <script src="js/buscadorSala.js"></script>
 
 </body>
 
-</html>
+</html>

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()
             ];
         }
     }
-
 }

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(`
+                        <div class="col-12 text-center">
+                            <p class="text-muted">
+                                No hay salas disponibles.
+                            </p>
+                        </div>
+                    `);
 
-  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 += `
+                            <div class="jugador">
+                                <span class="avatar">
+                                    👤
+                                </span>
+                                ${escapeHTML(
+                                    jugador.nombreUsuario
+                                )}
+                            </div>
+                        `;
+
+                    }
+                );
+
+            } else {
+
+                jugadoresHTML = `
+                    <div class="text-muted small">
+                        Sin jugadores
+                    </div>
+                `;
+
+            }
+
+            equiposHTML += `
+
+                <div class="equipo">
+
+                    <h6>
+                        ${escapeHTML(
+                            equipo.nombreEquipo
+                        )}
+                    </h6>
+
+                    <div class="jugadores">
+
+                        ${jugadoresHTML}
+
+                    </div>
+
+                    <button
+                        type="button"
+                        class="btn btn-unirse w-100 btn-unirse-equipo"
+                        data-id-partida="${partida.idPartida}"
+                        data-id-equipo="${equipo.idEquipo}">
+
+                        Unirse
+
+                    </button>
+
+                </div>
+
+            `;
+
+        });
+
+        const salaHTML = `
+
+            <div class="col-12 col-md-10 col-lg-8">
+
+                <div class="sala">
+
+                    <div class="sala-header">
+
+                        ${escapeHTML(
+                            partida.nombrePartida
+                        )}
+
+                    </div>
+
+                    <div class="sala-body">
+
+                        <div class="equipos">
+
+                            ${equiposHTML}
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        `;
+
+        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 $('<div>')
+            .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(`
+            <div class="mensaje-error-sala text-danger mt-1 small">
+                ${mensaje}
+            </div>
+        `);
+    }
+
+    $('.input-kahoot').on('input', function () {
+
+        $(this).removeClass('is-invalid');
+
+        $(this)
+            .next('.mensaje-error-sala')
+            .remove();
+
+    });
+
+});