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

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">

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>
+<script src="js/cabecera.js"></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>

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 getNombreUsuario(): string
-    public function setNombreUsuario(string $nombreUsuario): void { $this->nombreUsuario = $nombreUsuario; }
+    {
+        return $this->nombreUsuario;
+    }
+    public function setNombreUsuario(string $nombreUsuario): void
+    {
+        $this->nombreUsuario = $nombreUsuario;
+    }
 
-    public function getContrasena(): string { return $this->contrasena; }
+    public function getContrasena(): string
-    public function setContrasena(string $contrasena): void { $this->contrasena = $contrasena; }
+    {
+        return $this->contrasena;
+    }
+    public function setContrasena(string $contrasena): void
+    {
+        $this->contrasena = $contrasena;
+    }
 
-    public function getEmail(): string { return $this->email; }
+    public function getEmail(): string
-    public function setEmail(string $email): void { $this->email = $email; }
+    {
+        return $this->email;
+    }
+    public function setEmail(string $email): void
+    {
+        $this->email = $email;
+    }
 
-    public function getAvatar(): ?string { return $this->avatar; }
+    public function getAvatar(): ?string
-    public function setAvatar(?string $avatar): void { $this->avatar = $avatar; }
+    {
+        return $this->avatar;
+    }
+    public function setAvatar(?string $avatar): void
+    {
+        $this->avatar = $avatar;
+    }
 
-    public function getCookie(): ?string { return $this->cookie; }
+    public function getCookie(): ?string
-    public function setCookie(?string $cookie): void { $this->cookie = $cookie; }
+    {
+        return $this->cookie;
+    }
+    public function setCookie(?string $cookie): void
+    {
+        $this->cookie = $cookie;
+    }
 
-    public function getAciertos(): int { return $this->aciertos; }
+    public function getAciertos(): int
-    public function setAciertos(int $aciertos): void { $this->aciertos = $aciertos; }
+    {
+        return $this->aciertos;
+    }
+    public function setAciertos(int $aciertos): void
+    {
+        $this->aciertos = $aciertos;
+    }
 
-    public function getVictorias(): int { return $this->victorias; }
+    public function getVictorias(): int
-    public function setVictorias(int $victorias): void { $this->victorias = $victorias; }
+    {
+        return $this->victorias;
+    }
+    public function setVictorias(int $victorias): void
+    {
+        $this->victorias = $victorias;
+    }
 
-    public function getDerrotas(): int { return $this->derrotas; }
+    public function getDerrotas(): int
-    public function setDerrotas(int $derrotas): void { $this->derrotas = $derrotas; }
+    {
+        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();
@@ -97,7 +98,6 @@ switch ($_POST['orden']) {
                 'derrotas' => $usuario->getDerrotas(),
                 'aciertos' => $usuario->getAciertos()
             ]);
-
         } else {
 
             echo json_encode($usuario);
@@ -105,6 +105,120 @@ switch ($_POST['orden']) {
 
         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,15 +5,18 @@ 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">
+    <div class="container my-5">
         <div class="row justify-content-center align-items-center g-4">
 
             <!-- Botón Jugar (solo se muestra si está logueado) -->
@@ -24,7 +27,7 @@ include 'cabecera.php';
                         <span>¡JUGAR!</span>
                     </a>
                 </div>
-<?php endif; ?>
+            <?php endif; ?>
 
             <!-- Ranking -->
             <div class="col-12 <?= $isLoggedIn ? 'col-lg-7 col-xl-8' : 'col-lg-8' ?>">
@@ -44,10 +47,11 @@ include 'cabecera.php';
             </div>
 
         </div>
-</div>
+    </div>
 
-<!-- JS de Bootstrap -->
+    <!-- JS de Bootstrap -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
+
 </html>

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");
+  $.ajax({
-    const nombre = document.getElementById("nombre");
+    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();
+      // Limpiamos el input
-
+      $("#nuevoNombre").val("");
-    if (nuevoNombre !== "") {
-
-        nombre.textContent = nuevoNombre;
-
-        input.value = "";
     }
+  });
 }
 
-
 // =========================
 // 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(
+function seleccionarFoto() {
-    "change",
+  $("#inputFoto").click();
-    function(event) {
+}
 
-        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
+  datos.append("avatar", archivo);
-            const imagenURL = URL.createObjectURL(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>
 
@@ -80,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">
 
@@ -418,33 +419,6 @@
 
     </div>
 
-    <script>
-        $(document).ready(function() {
-
-            $.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);
-
-                }
-
-            });
-
-        });
-    </script>
-
     <!-- 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">