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

Añadidos equipos y partidas de prueba a la bd para hacer pruebas.

buscadorSala.php

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Trivial - Lobby</title>
-
+    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
     <link
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
         rel="stylesheet">
@@ -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,87 +78,122 @@
             <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>

cabecera.php

@@ -16,16 +16,15 @@ $username = $isLoggedIn ? $_SESSION['nombreUsuario'] : '';
 <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="css/index.css">
 <script src="js/jquery-4.0.0.min.js"></script>
-<style>
 
 
-</style>
-
 <nav class="navbar navbar-expand-lg navbar-kahoot py-3 mb-4">
     <div class="container">
         <a class="navbar-brand" href="index.php">
-            <i class="fa-solid fa-gamepad me-2"></i>TRIVIAGMÁTICO
+            <img src="img/favicon/favicon.svg" alt="TRIVIAGMÁTICO" class="me-2" style="height: 35px;">
+            TRIVIAGMÁTICO
         </a>
+
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -152,154 +151,4 @@ $username = $isLoggedIn ? $_SESSION['nombreUsuario'] : '';
     </div>
 </div>
 
-<script>
-    // Registro
-    $('#botonAceptarRegistro').click(function(event) {
-        event.preventDefault();
-        console.log('hola');
-        let nombreUsuario = $('#regNombre').val().trim();
-        let email = $('#regEmail').val().trim();
-        let contrasena = $('#regPassword').val();
-        let contrasenaConfirmacion = $('#regPasswordConfirm').val();
-
-        // Limpiamos errores anteriores
-        $('#regNombre').removeClass('is-invalid');
-        $('#regEmail').removeClass('is-invalid');
-        $('#regPassword').removeClass('is-invalid');
-        $('#regPasswordConfirm').removeClass('is-invalid');
-        $('#errorRegistro').text('');
-
-        // Comprobamos que las contraseñas coincidan
-        if (contrasena !== contrasenaConfirmacion) {
-
-            $('#regPassword').addClass('is-invalid');
-            $('#regPasswordConfirm').addClass('is-invalid');
-
-            $('#errorRegistro').text('Las contraseñas no coinciden.');
-
-            return;
-        }
-
-        $.ajax({
-            method: "POST",
-            url: "controladores/controladorUsuario.php",
-            data: {
-                'nombreUsuario': nombreUsuario,
-                'email': email,
-                'contrasena': contrasena,
-                'orden': 'registrarUsuario'
-            }
-        }).done(function(respuesta) {
-            //console.log(respuesta);
-            respuesta = JSON.parse(respuesta);
-            if (respuesta.error) {
-
-                $('#errorRegistro').text(respuesta.error);
-
-                // Marcamos los campos si hay error
-                $('#regNombre').addClass('is-invalid');
-                $('#regEmail').addClass('is-invalid');
-
-            } else {
-
-                // Registro correcto
-                $('#errorRegistro')
-                    .removeClass('text-danger')
-                    .addClass('text-success')
-                    .text(respuesta.exito);
-
-                // Limpiamos formulario
-                $('#formRegistro')[0].reset();
-
-                // Cerramos modal después de un segundo
-                setTimeout(function() {
-                    location.reload();
-                }, 1000);
-            }
-
-        }); // Fin función ajax
-
-    });
-
-    // Login
-    $('#botonAceptarLogin').click(function(event) {
-        event.preventDefault();
-
-        let email = $('#loginEmail').val().trim();
-        let contrasena = $('#loginPassword').val();
-
-        // Limpiamos errores anteriores
-        $('#loginEmail').removeClass('is-invalid');
-        $('#loginPassword').removeClass('is-invalid');
-        $('#errorLogin').text('');
-
-        // Comprobación básica
-        if (email === '' || contrasena === '') {
-
-            $('#errorLogin').text('Todos los campos son obligatorios.');
-
-            if (email === '') {
-                $('#loginEmail').addClass('is-invalid');
-            }
-
-            if (contrasena === '') {
-                $('#loginPassword').addClass('is-invalid');
-            }
-
-            return;
-        }
-
-        $.ajax({
-            method: "POST",
-            url: "controladores/controladorUsuario.php",
-            data: {
-                'email': email,
-                'contrasena': contrasena,
-                'orden': 'comprobarUsuario'
-            }
-        }).done(function(respuesta) {
-            //console.log(respuesta);
-            respuesta = JSON.parse(respuesta);
-            if (respuesta.error) {
-
-                $('#loginEmail').addClass('is-invalid');
-                $('#loginPassword').addClass('is-invalid');
-
-                $('#errorLogin').text(respuesta.error);
-
-            } else {
-
-                location.reload();
-            }
-
-        }); // Fin función ajax
-
-    });
-
-    // Cerrar sesión
-    $('#botonCerrarSesion').click(function(event) {
-        event.preventDefault();
-
-        $.ajax({
-            method: "POST",
-            url: "controladores/controladorUsuario.php",
-            data: {
-                'orden': 'cerrarSesion'
-            }
-        }).done(function(respuesta) {
-            //console.log(respuesta);
-            respuesta = JSON.parse(respuesta);
-            if (respuesta.error) {
-                console.log(respuesta.error);
-            } else {
-
-                // Sesión cerrada correctamente
-                location.reload();
-
-            }
-
-        }); // Fin función ajax
-
-    }); // Fin función click
-
-</script>
+<script src="js/cabecera.js"></script>

clases/ClasePartida.php

@@ -336,7 +336,8 @@ 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)) {
@@ -374,7 +375,8 @@ 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)) {
@@ -411,7 +413,8 @@ 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)) {
@@ -419,34 +422,48 @@ class Partida
         }
 
         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.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->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()
             ];
         }
     }
-
 }

clases/ClaseUsuario.php

@@ -1,7 +1,8 @@
 <?php
 require_once __DIR__ . '/../includes/conexionBD.php';
 
-class Usuario {
+class Usuario
+{
     private ?int $idUsuario;
     private string $nombreUsuario;
     private string $contrasena;
@@ -34,33 +35,85 @@ class Usuario {
         $this->derrotas = $derrotas;
     }
 
-    public function getIdUsuario(): ?int { return $this->idUsuario; }
+    public function getIdUsuario(): ?int
+    {
+        return $this->idUsuario;
+    }
 
-    public function getNombreUsuario(): string { return $this->nombreUsuario; }
-    public function setNombreUsuario(string $nombreUsuario): void { $this->nombreUsuario = $nombreUsuario; }
+    public function getNombreUsuario(): string
+    {
+        return $this->nombreUsuario;
+    }
+    public function setNombreUsuario(string $nombreUsuario): void
+    {
+        $this->nombreUsuario = $nombreUsuario;
+    }
 
-    public function getContrasena(): string { return $this->contrasena; }
-    public function setContrasena(string $contrasena): void { $this->contrasena = $contrasena; }
+    public function getContrasena(): string
+    {
+        return $this->contrasena;
+    }
+    public function setContrasena(string $contrasena): void
+    {
+        $this->contrasena = $contrasena;
+    }
 
-    public function getEmail(): string { return $this->email; }
-    public function setEmail(string $email): void { $this->email = $email; }
+    public function getEmail(): string
+    {
+        return $this->email;
+    }
+    public function setEmail(string $email): void
+    {
+        $this->email = $email;
+    }
 
-    public function getAvatar(): ?string { return $this->avatar; }
-    public function setAvatar(?string $avatar): void { $this->avatar = $avatar; }
+    public function getAvatar(): ?string
+    {
+        return $this->avatar;
+    }
+    public function setAvatar(?string $avatar): void
+    {
+        $this->avatar = $avatar;
+    }
 
-    public function getCookie(): ?string { return $this->cookie; }
-    public function setCookie(?string $cookie): void { $this->cookie = $cookie; }
+    public function getCookie(): ?string
+    {
+        return $this->cookie;
+    }
+    public function setCookie(?string $cookie): void
+    {
+        $this->cookie = $cookie;
+    }
 
-    public function getAciertos(): int { return $this->aciertos; }
-    public function setAciertos(int $aciertos): void { $this->aciertos = $aciertos; }
+    public function getAciertos(): int
+    {
+        return $this->aciertos;
+    }
+    public function setAciertos(int $aciertos): void
+    {
+        $this->aciertos = $aciertos;
+    }
 
-    public function getVictorias(): int { return $this->victorias; }
-    public function setVictorias(int $victorias): void { $this->victorias = $victorias; }
+    public function getVictorias(): int
+    {
+        return $this->victorias;
+    }
+    public function setVictorias(int $victorias): void
+    {
+        $this->victorias = $victorias;
+    }
 
-    public function getDerrotas(): int { return $this->derrotas; }
-    public function setDerrotas(int $derrotas): void { $this->derrotas = $derrotas; }
+    public function getDerrotas(): int
+    {
+        return $this->derrotas;
+    }
+    public function setDerrotas(int $derrotas): void
+    {
+        $this->derrotas = $derrotas;
+    }
 
-    public function registrar() {
+    public function registrar()
+    {
         $conexion = conexionBD();
 
         if (is_array($conexion)) {
@@ -91,7 +144,6 @@ class Usuario {
                 'exito' => 'Usuario registrado correctamente',
                 'exito_tecnico' => $this->idUsuario
             ];
-
         } catch (PDOException $error) {
             return [
                 'error' => 'Ocurrió un error al registrar el usuario.',
@@ -100,7 +152,8 @@ class Usuario {
         }
     }
 
-    public static function buscarPorId($id) {
+    public static function buscarPorId($id)
+    {
         $conexion = conexionBD();
 
         if (is_array($conexion)) {
@@ -131,7 +184,6 @@ class Usuario {
             return [
                 'error' => 'No se encontró ningún usuario con ese ID.'
             ];
-
         } catch (PDOException $error) {
             return [
                 'error' => 'Ocurrió un error al buscar el usuario.',
@@ -140,7 +192,8 @@ class Usuario {
         }
     }
 
-    public static function buscarPorEmail($email) {
+    public static function buscarPorEmail($email)
+    {
         $conexion = conexionBD();
 
         if (is_array($conexion)) {
@@ -189,6 +242,7 @@ class Usuario {
             unset($_SESSION['idUsuario']);
             unset($_SESSION['email']);
             unset($_SESSION['nombreUsuario']);
+            unset($_SESSION['avatar']);
 
             return null;
         }
@@ -200,6 +254,7 @@ class Usuario {
             $_SESSION['idUsuario'] = $usuario->getIdUsuario();
             $_SESSION['email'] = $usuario->getEmail();
             $_SESSION['nombreUsuario'] = $usuario->getNombreUsuario();
+            $_SESSION['avatar'] = $usuario->getAvatar();
 
             // Devolvemos el usuario como hasta ahora
             return $usuario;
@@ -209,8 +264,123 @@ class Usuario {
         unset($_SESSION['idUsuario']);
         unset($_SESSION['email']);
         unset($_SESSION['nombreUsuario']);
+        unset($_SESSION['avatar']);
 
         return null;
     }
 
+    public function cambiarNombre($nuevoNombre)
+    {
+        $conexion = conexionBD();
+
+        if (is_array($conexion)) {
+            return $conexion;
+        }
+
+        try {
+
+            $sql = "UPDATE usuario 
+                SET nombreUsuario = :nombre 
+                WHERE idUsuario = :id";
+
+            $stmt = $conexion->prepare($sql);
+
+            $stmt->execute([
+                ':nombre' => $nuevoNombre,
+                ':id' => $this->idUsuario
+            ]);
+
+            // Actualizamos también el objeto actual
+            $this->nombreUsuario = $nuevoNombre;
+
+            return [
+                'exito' => 'Nombre actualizado correctamente.'
+            ];
+        } catch (PDOException $error) {
+
+            return [
+                'error' => 'Ocurrió un error al actualizar el nombre.',
+                'error_tecnico' => $error->getMessage()
+            ];
+        }
+    }
+
+    public function cambiarAvatar($archivo)
+    {
+        $carpeta = __DIR__ . '/../img/avatars/';
+
+        // Creamos la carpeta si no existe
+        if (!is_dir($carpeta)) {
+            mkdir($carpeta, 0755, true);
+        }
+
+        // Obtenemos la extensión según el tipo MIME
+        $tipo = mime_content_type($archivo['tmp_name']);
+
+        $extensiones = [
+            'image/jpeg' => 'jpg',
+            'image/png' => 'png',
+            'image/gif' => 'gif',
+            'image/webp' => 'webp'
+        ];
+
+        if (!isset($extensiones[$tipo])) {
+
+            return [
+                'error' => 'Formato de imagen no permitido.'
+            ];
+        }
+
+        $extension = $extensiones[$tipo];
+
+        // Nombre único para evitar conflictos
+        $nombreArchivo = 'avatar_' . $this->idUsuario . '.' . $extension;
+
+        $rutaCompleta = $carpeta . $nombreArchivo;
+
+        // Guardamos la imagen
+        if (!move_uploaded_file($archivo['tmp_name'], $rutaCompleta)) {
+
+            return [
+                'error' => 'No se pudo guardar la imagen.'
+            ];
+        }
+
+        // Ruta que utilizará el HTML
+        $rutaAvatar = 'img/avatars/' . $nombreArchivo;
+
+        $conexion = conexionBD();
+
+        if (is_array($conexion)) {
+            return $conexion;
+        }
+
+        try {
+
+            $sql = "UPDATE usuario 
+                SET avatar = :avatar 
+                WHERE idUsuario = :id";
+
+            $stmt = $conexion->prepare($sql);
+
+            $stmt->execute([
+                ':avatar' => $rutaAvatar,
+                ':id' => $this->idUsuario
+            ]);
+
+            // Actualizamos también el objeto actual
+            $this->avatar = $rutaAvatar;
+
+            return [
+                'exito' => 'Avatar actualizado correctamente.',
+                'avatar' => $rutaAvatar
+            ];
+        } catch (PDOException $error) {
+
+            return [
+                'error' => 'Ocurrió un error al actualizar el avatar.',
+                'error_tecnico' => $error->getMessage()
+            ];
+        }
+    }
 }

controladores/ControladorUsuario.php

@@ -35,7 +35,8 @@ switch ($_POST['orden']) {
         $usuario = new Usuario(
             $nombreUsuario,
             $contrasena,
-            $email
+            $email,
+            'img/avatars/defaultProfile.jpeg'
         );
 
         $resultado = $usuario->registrar();
@@ -84,5 +85,140 @@ switch ($_POST['orden']) {
             'exito' => 'Sesión cerrada'
         ]);
 
+        break;
+
+    case 'mostrarEstadisticas':
+
+        $usuario = Usuario::buscarPorId($_SESSION['idUsuario']);
+
+        if ($usuario instanceof Usuario) {
+
+            echo json_encode([
+                'victorias' => $usuario->getVictorias(),
+                'derrotas' => $usuario->getDerrotas(),
+                'aciertos' => $usuario->getAciertos()
+            ]);
+        } else {
+
+            echo json_encode($usuario);
+        }
+
+        break;
+
+    case 'cambiarNombre':
+
+        if (!isset($_SESSION['idUsuario'])) {
+
+            echo json_encode([
+                'error' => 'No hay ningún usuario conectado.'
+            ]);
+
+            break;
+        }
+
+        $nuevoNombre = trim($_POST['nombreUsuario'] ?? '');
+
+        if ($nuevoNombre === '') {
+
+            echo json_encode([
+                'error' => 'El nombre no puede estar vacío.'
+            ]);
+
+            break;
+        }
+
+        $usuario = Usuario::buscarPorId($_SESSION['idUsuario']);
+
+        if (!($usuario instanceof Usuario)) {
+
+            echo json_encode([
+                'error' => 'No se encontró el usuario.'
+            ]);
+
+            break;
+        }
+
+        $resultado = $usuario->cambiarNombre($nuevoNombre);
+
+        if (isset($resultado['error'])) {
+
+            echo json_encode($resultado);
+        } else {
+
+            // Actualizamos también la sesión
+            $_SESSION['nombreUsuario'] = $nuevoNombre;
+
+            echo json_encode([
+                'exito' => 'Nombre actualizado correctamente.',
+                'nombreUsuario' => $nuevoNombre
+            ]);
+        }
+
+        break;
+
+    case 'cambiarAvatar':
+
+        if (!isset($_SESSION['idUsuario'])) {
+
+            echo json_encode([
+                'error' => 'No hay ningún usuario conectado.'
+            ]);
+
+            break;
+        }
+
+        if (!isset($_FILES['avatar']) || $_FILES['avatar']['error'] !== UPLOAD_ERR_OK) {
+
+            echo json_encode([
+                'error' => 'No se ha recibido ninguna imagen.'
+            ]);
+
+            break;
+        }
+
+        $archivo = $_FILES['avatar'];
+
+        $tipo = mime_content_type($archivo['tmp_name']);
+
+        $tiposPermitidos = [
+            'image/jpeg',
+            'image/png',
+            'image/gif',
+            'image/webp'
+        ];
+
+        if (!in_array($tipo, $tiposPermitidos)) {
+
+            echo json_encode([
+                'error' => 'El formato de imagen no es válido.'
+            ]);
+
+            break;
+        }
+
+        $usuario = Usuario::buscarPorId($_SESSION['idUsuario']);
+
+        if (!($usuario instanceof Usuario)) {
+
+            echo json_encode([
+                'error' => 'No se encontró el usuario.'
+            ]);
+
+            break;
+        }
+
+        $resultado = $usuario->cambiarAvatar($archivo);
+
+        if (isset($resultado['error'])) {
+
+            echo json_encode($resultado);
+        } else {
+
+            // Actualizamos también la sesión
+            $_SESSION['avatar'] = $resultado['avatar'];
+
+            echo json_encode($resultado);
+        }
+
         break;
 }

index.php

@@ -5,11 +5,15 @@ include 'cabecera.php';
 
 <!DOCTYPE html>
 <html lang="es-ES">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Triviagmático</title>
+    <script src="js/jquery-4.0.0.min.js"></script>
+    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
 </head>
+
 <body>
 
     <div class="container my-5">
@@ -49,4 +53,5 @@ include 'cabecera.php';
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
+
 </html>

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.");
-
-    formularioValido = false;
-  }
-
-  if (!formularioValido) {
                     return;
                 }
 
-  console.log("Sala:", sala);
-  console.log("Equipo 1:", equipo1);
-  console.log("Equipo 2:", equipo2);
-
-
-  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;
+                partidas.forEach(function (partida) {
+                    cargarInformacionSala(partida);
                 });
 
-function mostrarError(input, mensaje) {
-  input.classList.add("is-invalid");
+            },
 
-  // Comprobamos si ya existe un mensaje
-  let mensajeError = input.parentElement.querySelector(".invalid-feedback");
+            error: function (xhr, status, error) {
 
-  if (!mensajeError) {
-    mensajeError = document.createElement("div");
+                console.error(
+                    'Error al obtener las partidas:',
+                    error
+                );
 
-    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();
+
+    });
+
+});

js/cabecera.js

@@ -0,0 +1,133 @@
+// Registro
+$("#botonAceptarRegistro").click(function (event) {
+  event.preventDefault();
+  console.log("hola");
+  let nombreUsuario = $("#regNombre").val().trim();
+  let email = $("#regEmail").val().trim();
+  let contrasena = $("#regPassword").val();
+  let contrasenaConfirmacion = $("#regPasswordConfirm").val();
+
+  // Limpiamos errores anteriores
+  $("#regNombre").removeClass("is-invalid");
+  $("#regEmail").removeClass("is-invalid");
+  $("#regPassword").removeClass("is-invalid");
+  $("#regPasswordConfirm").removeClass("is-invalid");
+  $("#errorRegistro").text("");
+
+  // Comprobamos que las contraseñas coincidan
+  if (contrasena !== contrasenaConfirmacion) {
+    $("#regPassword").addClass("is-invalid");
+    $("#regPasswordConfirm").addClass("is-invalid");
+
+    $("#errorRegistro").text("Las contraseñas no coinciden.");
+
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      nombreUsuario: nombreUsuario,
+      email: email,
+      contrasena: contrasena,
+      orden: "registrarUsuario",
+    },
+  }).done(function (respuesta) {
+    //console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      $("#errorRegistro").text(respuesta.error);
+
+      // Marcamos los campos si hay error
+      $("#regNombre").addClass("is-invalid");
+      $("#regEmail").addClass("is-invalid");
+    } else {
+      // Registro correcto
+      $("#errorRegistro")
+        .removeClass("text-danger")
+        .addClass("text-success")
+        .text(respuesta.exito);
+
+      // Limpiamos formulario
+      $("#formRegistro")[0].reset();
+
+      // Cerramos modal después de un segundo
+      setTimeout(function () {
+        location.reload();
+      }, 1000);
+    }
+  }); // Fin función ajax
+});
+
+// Login
+$("#botonAceptarLogin").click(function (event) {
+  event.preventDefault();
+
+  let email = $("#loginEmail").val().trim();
+  let contrasena = $("#loginPassword").val();
+
+  // Limpiamos errores anteriores
+  $("#loginEmail").removeClass("is-invalid");
+  $("#loginPassword").removeClass("is-invalid");
+  $("#errorLogin").text("");
+
+  // Comprobación básica
+  if (email === "" || contrasena === "") {
+    $("#errorLogin").text("Todos los campos son obligatorios.");
+
+    if (email === "") {
+      $("#loginEmail").addClass("is-invalid");
+    }
+
+    if (contrasena === "") {
+      $("#loginPassword").addClass("is-invalid");
+    }
+
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      email: email,
+      contrasena: contrasena,
+      orden: "comprobarUsuario",
+    },
+  }).done(function (respuesta) {
+    //console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      $("#loginEmail").addClass("is-invalid");
+      $("#loginPassword").addClass("is-invalid");
+
+      $("#errorLogin").text(respuesta.error);
+    } else {
+      location.reload();
+    }
+  }); // Fin función ajax
+});
+
+// Cerrar sesión
+$("#botonCerrarSesion").click(function (event) {
+  event.preventDefault();
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      orden: "cerrarSesion",
+    },
+  }).done(function (respuesta) {
+    //console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      console.log(respuesta.error);
+    } else {
+      // Sesión cerrada correctamente
+      window.location.href = 'index.php';
+
+    }
+  }); // Fin función ajax
+}); // Fin función click

js/perfil.js

@@ -1,42 +1,59 @@
+// =========================
+// MOSTRAR ESTADISTICAS
+// =========================
+
+$.ajax({
+  method: "POST",
+  url: "controladores/controladorUsuario.php",
+  data: {
+    orden: "mostrarEstadisticas",
+  },
+}).done(function (respuesta) {
+  console.log(respuesta);
+  respuesta = JSON.parse(respuesta);
+  if (respuesta.error) {
+    console.log(respuesta.error);
+  } else {
+    $("#victorias").text(respuesta.victorias);
+    $("#derrotas").text(respuesta.derrotas);
+    $("#aciertos").text(respuesta.aciertos);
+  }
+});
+
 // =========================
 // CAMBIAR NOMBRE
 // =========================
-
 function cambiarNombre() {
+  let nuevoNombre = $("#nuevoNombre").val().trim();
 
-    const input = document.getElementById("nuevoNombre");
-    const nombre = document.getElementById("nombre");
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      nombreUsuario: nuevoNombre,
+      orden: "cambiarNombre",
+    },
+  }).done(function (respuesta) {
+    console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      console.log(respuesta.error);
+    } else {
+      // Actualizamos el nombre mostrado en la página
+      $("#nombre").text(respuesta.nombreUsuario);
 
-    const nuevoNombre = input.value.trim();
-
-    if (nuevoNombre !== "") {
-
-        nombre.textContent = nuevoNombre;
-
-        input.value = "";
+      // Limpiamos el input
+      $("#nuevoNombre").val("");
     }
+  });
 }
 
-
 // =========================
 // BORRAR NOMBRE
 // =========================
 
 function borrarNombre() {
-
   document.getElementById("nuevoNombre").value = "";
-
-}
-
-
-// =========================
-// ABRIR SELECTOR DE IMAGEN
-// =========================
-
-function seleccionarFoto() {
-
-    document.getElementById("inputFoto").click();
-
 }
 
 
@@ -44,31 +61,48 @@ function seleccionarFoto() {
 // CAMBIAR FOTO
 // =========================
 
-document.getElementById("inputFoto").addEventListener(
-    "change",
-    function(event) {
+function seleccionarFoto() {
+  $("#inputFoto").click();
+}
 
-        const archivo = event.target.files[0];
+$("#inputFoto").change(function () {
+  let archivo = this.files[0];
 
-        if (archivo) {
+  if (!archivo) {
+    return;
+  }
 
   // Comprobamos que sea una imagen
   if (!archivo.type.startsWith("image/")) {
+    alert("El archivo seleccionado no es una imagen.");
 
-                alert("Por favor, selecciona una imagen.");
+    $("#inputFoto").val("");
 
     return;
   }
 
+  let datos = new FormData();
 
-            // Creamos una URL temporal
-            const imagenURL = URL.createObjectURL(archivo);
+  datos.append("avatar", archivo);
+  datos.append("orden", "cambiarAvatar");
 
-
-            // Cambiamos la foto
-            document.getElementById("fotoPerfil").src = imagenURL;
-
-        }
-
-    }
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: datos,
+    processData: false,
+    contentType: false,
+  }).done(function (respuesta) {
+    console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      alert(respuesta.error);
+    } else {
+      // Actualizamos la imagen sin recargar la página
+      $("#fotoPerfil").attr(
+        "src",
+        respuesta.avatar + "?t=" + new Date().getTime(),
       );
+    }
+  });
+});

juego.php

@@ -6,6 +6,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <title>Proyecto Trivial</title>
     <link rel="stylesheet" href="css/juego.css">
+    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
 </head>
 <body>
 

perfil.php

@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
 
     <title>Perfil</title>
 
@@ -28,6 +29,7 @@
     <!-- Tu CSS -->
     <link rel="stylesheet" href="css/index.css">
     <link rel="stylesheet" href="css/perfil.css">
+    <script src="js/jquery-4.0.0.min.js"></script>
 
 </head>
 
@@ -67,7 +69,7 @@
                         <!-- Nombre -->
 
                         <h1 id="nombre" class="nombre">
-                            tuNombre
+                            <?php echo $_SESSION['nombreUsuario'] ?>
                         </h1>
 
 
@@ -79,7 +81,7 @@
 
                             <img
                                 id="fotoPerfil"
-                                src="https://i.pravatar.cc/300?img=47"
+                                src="<?= htmlspecialchars($_SESSION['avatar'] ?? '') ?>"
                                 alt="Foto de perfil"
                                 class="avatar rounded-circle">
 
@@ -180,8 +182,8 @@
                                 <i class="bi bi-trophy-fill"></i>
                                 &nbsp; Victorias:
 
-                                <strong>
-                                    0
+                                <strong id="victorias">
+
                                 </strong>
 
                             </div>
@@ -192,8 +194,8 @@
                                 <i class="bi bi-x-circle-fill"></i>
                                 &nbsp; Derrotas:
 
-                                <strong>
-                                    0
+                                <strong id="derrotas">
+
                                 </strong>
 
                             </div>
@@ -204,8 +206,8 @@
                                 <i class="bi bi-bullseye"></i>
                                 &nbsp; Aciertos:
 
-                                <strong>
-                                    0
+                                <strong id="aciertos">
+
                                 </strong>
 
                             </div>
@@ -417,7 +419,6 @@
 
     </div>
 
-
     <!-- Bootstrap JS -->
 
     <script

resultados.php

@@ -7,6 +7,8 @@
 
     <title>Trivial - Resultado final</title>
 
+    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
+
     <link
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
         rel="stylesheet">