Add funcionamiento del juego

clases/ClaseJuego.php

@@ -0,0 +1,348 @@
+<?php
+require_once __DIR__ . '/../includes/conexionBD.php';
+require_once __DIR__ . '/ClaseRespuestaAlmacenada.php';
+
+/**
+ * Lógica de la dinámica de juego (la usa juego.php a través de ControladorJuego.php):
+ *  - deja preparadas las 10 preguntas de la partida
+ *  - se las devuelve al jugador con sus respuestas SIN decir cuál es la correcta
+ *  - guarda la respuesta de cada jugador y le dice si ha acertado
+ *
+ * Todos los métodos devuelven un array con la clave 'error' si algo falla,
+ * igual que el resto de clases del proyecto.
+ */
+class Juego
+{
+    const NUM_PREGUNTAS = 10;
+
+    /**
+     * Comprueba que el usuario pertenece a alguno de los equipos de la partida.
+     * Devuelve true/false (o el array de error si falla la BD).
+     */
+    public static function usuarioEnPartida($idPartida, $idUsuario)
+    {
+        $conexion = conexionBD();
+        if (is_array($conexion)) {
+            return $conexion;
+        }
+
+        try {
+            $consulta = $conexion->prepare("
+                SELECT COUNT(*) AS total
+                FROM equipoxpartida exp
+                INNER JOIN equipoxusuario exu
+                    ON exu.idEquipo = exp.idEquipo
+                WHERE exp.idPartida = :idPartida
+                AND exu.idUsuario = :idUsuario
+            ");
+            $consulta->execute([
+                ':idPartida' => $idPartida,
+                ':idUsuario' => $idUsuario
+            ]);
+            return (int)$consulta->fetchColumn() > 0;
+        } catch (PDOException $error) {
+            return [
+                'error' => 'Ocurrió un error al comprobar si perteneces a la partida.',
+                'error_tecnico' => $error->getMessage()
+            ];
+        }
+    }
+
+    /**
+     * Si la partida todavía no tiene preguntas, le asigna 10 al azar.
+     * Se hace dentro de una transacción con la fila de la partida bloqueada
+     * para que, si varios jugadores entran a la vez, las preguntas se
+     * asignen una sola vez.
+     * Devuelve null si todo va bien, o un array de error.
+     */
+    private static function asegurarPreguntas($conexion, $idPartida)
+    {
+        try {
+            $conexion->beginTransaction();
+
+            $bloqueo = $conexion->prepare("
+                SELECT idPartida FROM partida
+                WHERE idPartida = :idPartida
+                FOR UPDATE
+            ");
+            $bloqueo->execute([':idPartida' => $idPartida]);
+
+            if (!$bloqueo->fetch()) {
+                $conexion->rollBack();
+                return ['error' => 'La partida no existe.'];
+            }
+
+            $cuenta = $conexion->prepare("
+                SELECT COUNT(*) FROM partidaxpregunta
+                WHERE idPartida = :idPartida
+            ");
+            $cuenta->execute([':idPartida' => $idPartida]);
+
+            if ((int)$cuenta->fetchColumn() === 0) {
+
+                // Solo preguntas que tengan alguna respuesta marcada como correcta
+                $elegidas = $conexion->query("
+                    SELECT p.idPregunta
+                    FROM pregunta p
+                    WHERE EXISTS (
+                        SELECT 1 FROM respuesta r
+                        WHERE r.idPregunta = p.idPregunta
+                        AND r.correcta = 1
+                    )
+                    ORDER BY RAND()
+                    LIMIT " . self::NUM_PREGUNTAS
+                )->fetchAll(PDO::FETCH_COLUMN);
+
+                $insertar = $conexion->prepare("
+                    INSERT INTO partidaxpregunta (idPartida, idPregunta)
+                    VALUES (:idPartida, :idPregunta)
+                ");
+                foreach ($elegidas as $idPregunta) {
+                    $insertar->execute([
+                        ':idPartida' => $idPartida,
+                        ':idPregunta' => $idPregunta
+                    ]);
+                }
+            }
+
+            $conexion->commit();
+            return null;
+        } catch (PDOException $error) {
+            if ($conexion->inTransaction()) {
+                $conexion->rollBack();
+            }
+            return [
+                'error' => 'Ocurrió un error al preparar las preguntas de la partida.',
+                'error_tecnico' => $error->getMessage()
+            ];
+        }
+    }
+
+    /**
+     * Devuelve las preguntas de la partida (máximo 10) con sus respuestas
+     * mezcladas. NO incluye el campo 'correcta' para que no se pueda hacer
+     * trampa mirando la respuesta del servidor.
+     * Cada pregunta indica si este usuario ya la ha respondido, para poder
+     * retomar la partida si recarga la página.
+     */
+    public static function cargarPreguntas($idPartida, $idUsuario)
+    {
+        $conexion = conexionBD();
+        if (is_array($conexion)) {
+            return $conexion;
+        }
+
+        $error = self::asegurarPreguntas($conexion, $idPartida);
+        if ($error !== null) {
+            return $error;
+        }
+
+        try {
+            // 1. Las preguntas, siempre en el mismo orden para todos los jugadores
+            $consulta = $conexion->prepare("
+                SELECT
+                    pxp.idPartidaxPregunta,
+                    p.idPregunta,
+                    p.nombrePregunta
+                FROM partidaxpregunta pxp
+                INNER JOIN pregunta p
+                    ON p.idPregunta = pxp.idPregunta
+                WHERE pxp.idPartida = :idPartida
+                ORDER BY pxp.idPartidaxPregunta
+                LIMIT " . self::NUM_PREGUNTAS
+            );
+            $consulta->execute([':idPartida' => $idPartida]);
+            $preguntas = $consulta->fetchAll(PDO::FETCH_ASSOC);
+
+            // 2. Las respuestas de todas esas preguntas, agrupadas por pregunta
+            $consulta = $conexion->prepare("
+                SELECT DISTINCT
+                    r.idRespuesta,
+                    r.idPregunta,
+                    r.nombreRespuesta
+                FROM respuesta r
+                INNER JOIN partidaxpregunta pxp
+                    ON pxp.idPregunta = r.idPregunta
+                WHERE pxp.idPartida = :idPartida
+            ");
+            $consulta->execute([':idPartida' => $idPartida]);
+
+            $respuestasPorPregunta = [];
+            foreach ($consulta->fetchAll(PDO::FETCH_ASSOC) as $fila) {
+                $respuestasPorPregunta[(int)$fila['idPregunta']][] = [
+                    'idRespuesta' => (int)$fila['idRespuesta'],
+                    'nombreRespuesta' => $fila['nombreRespuesta']
+                ];
+            }
+
+            // 3. Qué preguntas ha respondido ya este usuario
+            $consulta = $conexion->prepare("
+                SELECT ra.idPartidaxPregunta
+                FROM respuestaalmacenada ra
+                INNER JOIN partidaxpregunta pxp
+                    ON pxp.idPartidaxPregunta = ra.idPartidaxPregunta
+                WHERE pxp.idPartida = :idPartida
+                AND ra.idUsuario = :idUsuario
+            ");
+            $consulta->execute([
+                ':idPartida' => $idPartida,
+                ':idUsuario' => $idUsuario
+            ]);
+            $respondidas = array_flip($consulta->fetchAll(PDO::FETCH_COLUMN));
+
+            // 4. Montamos la respuesta final
+            $resultado = [];
+            foreach ($preguntas as $pregunta) {
+                $idPregunta = (int)$pregunta['idPregunta'];
+                $idPxp = (int)$pregunta['idPartidaxPregunta'];
+
+                $respuestas = $respuestasPorPregunta[$idPregunta] ?? [];
+                shuffle($respuestas);
+
+                $resultado[] = [
+                    'idPartidaxPregunta' => $idPxp,
+                    'idPregunta' => $idPregunta,
+                    'nombrePregunta' => $pregunta['nombrePregunta'],
+                    'respondida' => isset($respondidas[$idPxp]),
+                    'respuestas' => $respuestas
+                ];
+            }
+
+            return [
+                'total' => count($resultado),
+                'respondidas' => count($respondidas),
+                'preguntas' => $resultado
+            ];
+        } catch (PDOException $error) {
+            return [
+                'error' => 'Ocurrió un error al cargar las preguntas.',
+                'error_tecnico' => $error->getMessage()
+            ];
+        }
+    }
+
+    /**
+     * Guarda la respuesta que ha elegido el usuario en una pregunta y
+     * devuelve si ha acertado y cuál era la correcta (para el feedback).
+     * Comprueba en el servidor que:
+     *  - la pregunta pertenece a la partida
+     *  - la respuesta pertenece a esa pregunta
+     *  - el usuario no ha respondido ya esa pregunta
+     */
+    public static function registrarRespuesta($idPartida, $idUsuario, $idPartidaxPregunta, $idRespuesta)
+    {
+        $conexion = conexionBD();
+        if (is_array($conexion)) {
+            return $conexion;
+        }
+
+        try {
+            // 1. La pregunta tiene que ser de esta partida
+            $consulta = $conexion->prepare("
+                SELECT idPregunta
+                FROM partidaxpregunta
+                WHERE idPartidaxPregunta = :idPxp
+                AND idPartida = :idPartida
+            ");
+            $consulta->execute([
+                ':idPxp' => $idPartidaxPregunta,
+                ':idPartida' => $idPartida
+            ]);
+            $idPregunta = $consulta->fetchColumn();
+
+            if ($idPregunta === false) {
+                return ['error' => 'Esa pregunta no pertenece a esta partida.'];
+            }
+
+            // 2. La respuesta tiene que ser una de las de esa pregunta
+            $consulta = $conexion->prepare("
+                SELECT idRespuesta, correcta
+                FROM respuesta
+                WHERE idPregunta = :idPregunta
+            ");
+            $consulta->execute([':idPregunta' => $idPregunta]);
+
+            $elegida = null;
+            $primeraCorrecta = null;
+            foreach ($consulta->fetchAll(PDO::FETCH_ASSOC) as $fila) {
+                if ((int)$fila['correcta'] === 1 && $primeraCorrecta === null) {
+                    $primeraCorrecta = (int)$fila['idRespuesta'];
+                }
+                if ((int)$fila['idRespuesta'] === $idRespuesta) {
+                    $elegida = $fila;
+                }
+            }
+
+            if ($elegida === null) {
+                return ['error' => 'Esa respuesta no pertenece a la pregunta.'];
+            }
+
+            // 3. Solo se puede responder una vez a cada pregunta
+            $consulta = $conexion->prepare("
+                SELECT COUNT(*)
+                FROM respuestaalmacenada
+                WHERE idPartidaxPregunta = :idPxp
+                AND idUsuario = :idUsuario
+            ");
+            $consulta->execute([
+                ':idPxp' => $idPartidaxPregunta,
+                ':idUsuario' => $idUsuario
+            ]);
+
+            if ((int)$consulta->fetchColumn() > 0) {
+                return ['error' => 'Ya has respondido a esta pregunta.'];
+            }
+
+            // 4. Guardamos la respuesta con la clase que ya existía
+            $almacenada = new RespuestaAlmacenada(
+                null,
+                $idPartidaxPregunta,
+                $idUsuario,
+                $idRespuesta
+            );
+            $guardado = $almacenada->guardarRespuesta();
+
+            if (isset($guardado['error'])) {
+                return $guardado;
+            }
+
+            // 5. Progreso del usuario en la partida
+            $consulta = $conexion->prepare("
+                SELECT COUNT(*)
+                FROM respuestaalmacenada ra
+                INNER JOIN partidaxpregunta pxp
+                    ON pxp.idPartidaxPregunta = ra.idPartidaxPregunta
+                WHERE pxp.idPartida = :idPartida
+                AND ra.idUsuario = :idUsuario
+            ");
+            $consulta->execute([
+                ':idPartida' => $idPartida,
+                ':idUsuario' => $idUsuario
+            ]);
+            $respondidas = (int)$consulta->fetchColumn();
+
+            $consulta = $conexion->prepare("
+                SELECT COUNT(*) FROM partidaxpregunta
+                WHERE idPartida = :idPartida
+            ");
+            $consulta->execute([':idPartida' => $idPartida]);
+            $total = min((int)$consulta->fetchColumn(), self::NUM_PREGUNTAS);
+
+            $acierto = (int)$elegida['correcta'] === 1;
+
+            return [
+                'exito' => 'Respuesta guardada.',
+                'acierto' => $acierto,
+                'idRespuestaCorrecta' => $acierto ? $idRespuesta : $primeraCorrecta,
+                'respondidas' => $respondidas,
+                'total' => $total,
+                'terminada' => $respondidas >= $total
+            ];
+        } catch (PDOException $error) {
+            return [
+                'error' => 'Ocurrió un error al guardar la respuesta.',
+                'error_tecnico' => $error->getMessage()
+            ];
+        }
+    }
+}

controladores/ControladorJuego.php

@@ -0,0 +1,96 @@
+<?php
+
+session_start();
+
+require_once '../clases/ClaseJuego.php';
+
+header('Content-Type: application/json; charset=utf-8');
+
+// Hay que estar logueado y decir de qué partida se trata
+if (!isset($_SESSION['idUsuario'])) {
+    echo json_encode(['error' => 'Debes iniciar sesión para jugar.']);
+    exit;
+}
+
+$idUsuario = (int)$_SESSION['idUsuario'];
+$idPartida = intval($_POST['idPartida'] ?? 0);
+
+if ($idPartida <= 0) {
+    echo json_encode(['error' => 'No se ha indicado la partida.']);
+    exit;
+}
+
+// Solo pueden jugar los usuarios que están en uno de los equipos de la partida
+$perteneceAPartida = Juego::usuarioEnPartida($idPartida, $idUsuario);
+
+if (is_array($perteneceAPartida)) {
+    echo json_encode($perteneceAPartida);
+    exit;
+}
+
+if (!$perteneceAPartida) {
+    echo json_encode(['error' => 'No formas parte de esta partida.']);
+    exit;
+}
+
+
+switch ($_POST['orden'] ?? '') {
+
+    // Devuelve las 10 preguntas con sus respuestas (sin marcar la correcta)
+    case 'cargarPreguntas':
+
+        echo json_encode(Juego::cargarPreguntas($idPartida, $idUsuario));
+
+        break;
+
+
+    // Guarda la respuesta del usuario y dice si ha acertado
+    case 'responder':
+
+        $idPartidaxPregunta = intval($_POST['idPartidaxPregunta'] ?? 0);
+        $idRespuesta = intval($_POST['idRespuesta'] ?? 0);
+
+        if ($idPartidaxPregunta <= 0 || $idRespuesta <= 0) {
+            echo json_encode(['error' => 'Faltan datos para registrar la respuesta.']);
+            break;
+        }
+
+        echo json_encode(
+            Juego::registrarRespuesta(
+                $idPartida,
+                $idUsuario,
+                $idPartidaxPregunta,
+                $idRespuesta
+            )
+        );
+
+        break;
+
+
+    // Recibe los aciertos del jugador al terminar sus 10 preguntas,
+    // para que resultados.php los pueda usar al montar la hoja de resultados
+    case 'finalizarPartida':
+
+        $aciertos = intval($_POST['aciertos'] ?? 0);
+
+        if (!isset($_SESSION['aciertosPorPartida'])) {
+            $_SESSION['aciertosPorPartida'] = [];
+        }
+
+        $_SESSION['aciertosPorPartida'][$idPartida] = $aciertos;
+
+        echo json_encode([
+            'exito' => 'Aciertos registrados correctamente.',
+            'idPartida' => $idPartida,
+            'aciertos' => $aciertos
+        ]);
+
+        break;
+
+
+    default:
+
+        echo json_encode(['error' => 'La orden indicada no existe.']);
+
+        break;
+}

controladores/ControladorUsuario.php

@@ -55,10 +55,11 @@ switch ($_POST['orden']) {
 
         if ($resultado instanceof Usuario) {
 
-            // === AÑADIR ESTAS LÍNEAS PARA GUARDAR EN SESIÓN ===
+            // === GUARDAR EN SESIÓN (incluido avatar)===
             $_SESSION['idUsuario'] = $resultado->getIdUsuario();
             $_SESSION['nombreUsuario'] = $resultado->getNombreUsuario();
             $_SESSION['email'] = $resultado->getEmail();
+            $_SESSION['avatar'] = $resultado->getAvatar(); 
             // =================================================
 
             echo json_encode([
@@ -83,6 +84,7 @@ switch ($_POST['orden']) {
         unset($_SESSION['idUsuario']);
         unset($_SESSION['email']);
         unset($_SESSION['nombreUsuario']);
+        unset($_SESSION['avatar']); 
 
         // Destruimos la sesión
         session_destroy();
@@ -92,7 +94,6 @@ switch ($_POST['orden']) {
         ]);
 
         break;
-
     case 'mostrarEstadisticas':
 
         $usuario = Usuario::buscarPorId($_SESSION['idUsuario']);
@@ -242,7 +243,8 @@ switch ($_POST['orden']) {
                 'activa' => true,
                 'usuario' => [
                     'idUsuario' => $_SESSION['idUsuario'],
-                'nombreUsuario' => $_SESSION['nombreUsuario'] ?? ''
+                    'nombreUsuario' => $_SESSION['nombreUsuario'] ?? '',
+                    'avatar' => $_SESSION['avatar'] ?? '' 
                 ]
             ]);
         } else {

css/juego.css

@@ -117,3 +117,65 @@
                 font-size: 18px;
             }
         }
+
+/* ===== Lógica de juego (js/juego.js) ===== */
+
+.game-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.progress-track {
+    height: 8px;
+    background-color: #ddd;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 16px;
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0;
+    background-color: #1368ce;
+    transition: width 0.3s ease;
+}
+
+.feedback {
+    min-height: 1.5em;
+    margin-top: 12px;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.feedback.ok { color: #26890c; }
+.feedback.ko { color: #e21b3c; }
+
+/* Mientras se envía la respuesta o se ve el feedback no se puede volver a pulsar */
+.answers-grid.bloqueado .btn-answer {
+    pointer-events: none;
+}
+
+.btn-answer.correcta {
+    box-shadow: 0 0 0 6px #fff, 0 0 0 10px #26890c;
+}
+
+.btn-answer.incorrecta,
+.btn-answer.atenuada {
+    opacity: 0.45;
+}
+
+.btn-answer:focus-visible {
+    outline: 4px solid #333;
+    outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .progress-fill,
+    .btn-answer {
+        transition: none;
+    }
+}

js/cabecera.js

@@ -26,7 +26,7 @@ $(document).ready(function () {
 });
 
 /**
- * Comprueba con el servidor si existe una sesión PHP activa.
+ * Comprueba con el servidor si existe una sesión PHP
  */
 function comprobarEstadoSesion() {
     $.ajax({
@@ -37,7 +37,6 @@ function comprobarEstadoSesion() {
         success: function (respuesta) {
             if (respuesta.activa) {
                 renderizarCabeceraConSesion(respuesta.usuario);
-                // Si existe el contenedor del botón Jugar en index, lo mostramos
                 $('#colBotonJugar').removeClass('d-none');
             } else {
                 renderizarCabeceraSinSesion();
@@ -79,13 +78,8 @@ function ejecutarLogin() {
                 $('#modalLogin').modal('hide');
                 $('#formLogin')[0].reset();
 
-                renderizarCabeceraConSesion({
+                // Cargar datos de la sesión actualizados 
-                    idUsuario: respuesta.idUsuario,
+                comprobarEstadoSesion();
-                    nombreUsuario: respuesta.nombreUsuario,
-                    avatar: respuesta.avatar
-                });
-
-                $('#colBotonJugar').removeClass('d-none');
             }
         },
         error: function () {
@@ -132,7 +126,7 @@ function ejecutarRegistro() {
                 $('#modalRegistro').modal('hide');
                 $('#formRegistro')[0].reset();
 
-                // Autologin
+                // Autologin tras registrarse
                 $('#loginEmail').val(email);
                 $('#loginPassword').val(pass);
                 ejecutarLogin();
@@ -165,15 +159,21 @@ function cerrarSesion() {
 }
 
 /**
- * Renderiza la cabecera cuando HAY sesión iniciada (Menú Perfil + Avatar)
+ * Renderiza la cabecera cuando HAY sesión iniciada 
  */
 function renderizarCabeceraConSesion(usuario) {
-    let avatarImg = usuario.avatar ? usuario.avatar : 'img/avatars/defaultProfile.jpeg';
+    //Mete el avatar en cabecera
+    let avatarImg = (usuario.avatar && usuario.avatar !== '') 
+        ? usuario.avatar 
+        : 'img/avatars/defaultProfile.jpeg';
+
+    // Refrescar avatar si se cambia
+    let avatarConCacheBuster = avatarImg + '?v=' + new Date().getTime();
 
     let html = `
         <div class="dropdown">
             <button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 rounded-pill px-3 py-1 fw-bold" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
-                <img src="${avatarImg}" alt="Avatar" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover;">
+                <img src="${avatarConCacheBuster}" alt="Avatar" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover;">
                 <span>${escapeHtml(usuario.nombreUsuario)}</span>
             </button>
             <ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2" aria-labelledby="userMenu">
@@ -195,13 +195,11 @@ function renderizarCabeceraConSesion(usuario) {
 }
 
 /**
- * Renderiza los botones originales:
+ * Renderiza los botones en la cabecera cuando NO hay sesión (Iniciar sesión azul)
- * - "Iniciar Sesión" (Rojo -> btn-danger)
- * - "Registrarse" (Verde -> btn-success)
  */
 function renderizarCabeceraSinSesion() {
     let html = `
-        <button class="btn btn-danger rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalLogin">
+        <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalLogin">
             <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar sesión
         </button>
         <button class="btn btn-success rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalRegistro">

js/juego.js

@@ -0,0 +1,219 @@
+// Lógica de juego.php
+// Carga las preguntas de la partida, las muestra de una en una,
+// guarda cada respuesta en el servidor y al terminar lleva a resultados.php
+
+const URL_CONTROLADOR = "controladores/ControladorJuego.php";
+const PAUSA_FEEDBACK = 1800; // ms que se ve si has acertado o fallado
+
+// Colores y formas de los botones (estilo Kahoot, definidos en juego.css)
+const ESTILOS_BOTON = [
+  { color: "red", forma: "triangle" },
+  { color: "blue", forma: "diamond" },
+  { color: "yellow", forma: "circle" },
+  { color: "green", forma: "square" },
+];
+
+let idPartida = 0;
+let preguntas = [];
+let indice = 0; // pregunta que se está mostrando
+let bloqueado = false; // true mientras se envía una respuesta o se ve el feedback
+let numeroAciertos = 0; // número de aciertos del jugador
+
+$(document).ready(function () {
+  idPartida = parseInt($("body").data("id-partida"), 10);
+
+  // Un solo listener para todos los botones de respuesta
+  $("#respuestas").on("click", ".btn-answer", function () {
+    responder($(this));
+  });
+
+  cargarPreguntas();
+});
+
+// 1. Pedir las preguntas al servidor
+function cargarPreguntas() {
+  $.ajax({
+    url: URL_CONTROLADOR,
+    type: "POST",
+    dataType: "json",
+    data: { orden: "cargarPreguntas", idPartida: idPartida },
+    success: function (datos) {
+      if (datos.error) {
+        mostrarError(datos.error);
+        return;
+      }
+
+      preguntas = datos.preguntas;
+
+      if (preguntas.length === 0) {
+        mostrarError("Esta partida no tiene preguntas.");
+        return;
+      }
+
+      // Retomamos por la primera pregunta sin responder (por si recarga la página)
+      indice = preguntas.findIndex(function (p) {
+        return !p.respondida;
+      });
+
+      if (indice === -1) {
+        irAResultados();
+        return;
+      }
+
+      mostrarPregunta();
+    },
+    error: function () {
+      mostrarError("No se pudo conectar con el servidor.");
+    },
+  });
+}
+
+// 2. Pintar la pregunta actual y sus respuestas
+function mostrarPregunta() {
+  const pregunta = preguntas[indice];
+
+  bloqueado = false;
+
+  $("#textoPregunta").text(pregunta.nombrePregunta);
+  $("#feedback").text("").removeClass("ok ko");
+  $("#contadorPregunta").text(
+    "Pregunta " + (indice + 1) + " de " + preguntas.length,
+  );
+  $("#barraProgreso").css("width", (indice / preguntas.length) * 100 + "%");
+
+  const $respuestas = $("#respuestas").empty();
+
+  pregunta.respuestas.forEach(function (respuesta, i) {
+    const estilo = ESTILOS_BOTON[i % ESTILOS_BOTON.length];
+
+    // .text() y createTextNode evitan que el texto de la BD se interprete como HTML
+    const $boton = $("<button>")
+      .attr("type", "button")
+      .addClass("btn-answer " + estilo.color)
+      .attr("data-id-respuesta", respuesta.idRespuesta)
+      .append($("<span>").addClass("shape " + estilo.forma))
+      .append(document.createTextNode(respuesta.nombreRespuesta));
+
+    $respuestas.append($boton);
+  });
+}
+
+// 3. El usuario pulsa una respuesta: se guarda y se enseña si ha acertado
+function responder($botonPulsado) {
+  if (bloqueado) {
+    return;
+  }
+  bloqueado = true;
+
+  const pregunta = preguntas[indice];
+  const idRespuesta = parseInt($botonPulsado.attr("data-id-respuesta"), 10);
+
+  $("#respuestas").addClass("bloqueado");
+
+  $.ajax({
+    url: URL_CONTROLADOR,
+    type: "POST",
+    dataType: "json",
+    data: {
+      orden: "responder",
+      idPartida: idPartida,
+      idPartidaxPregunta: pregunta.idPartidaxPregunta,
+      idRespuesta: idRespuesta,
+    },
+    success: function (datos) {
+      if (datos.error) {
+        // No se guardó: dejamos que vuelva a intentarlo
+        $("#feedback").text(datos.error).removeClass("ok").addClass("ko");
+        $("#respuestas").removeClass("bloqueado");
+        bloqueado = false;
+        return;
+      }
+
+      pregunta.respondida = true;
+      mostrarFeedback($botonPulsado, datos);
+
+      setTimeout(function () {
+        if (datos.terminada || indice >= preguntas.length - 1) {
+          terminar();
+        } else {
+          indice++;
+          $("#respuestas").removeClass("bloqueado");
+          mostrarPregunta();
+        }
+      }, PAUSA_FEEDBACK);
+    },
+    error: function () {
+      $("#feedback")
+        .text("No se pudo guardar la respuesta. Inténtalo de nuevo.")
+        .removeClass("ok")
+        .addClass("ko");
+      $("#respuestas").removeClass("bloqueado");
+      bloqueado = false;
+    },
+  });
+}
+
+// Marca la respuesta correcta en verde y atenúa el resto
+function mostrarFeedback($botonPulsado, datos) {
+  $("#respuestas .btn-answer").each(function () {
+    const $boton = $(this);
+    const esLaCorrecta =
+      parseInt($boton.attr("data-id-respuesta"), 10) ===
+      datos.idRespuestaCorrecta;
+
+    if (esLaCorrecta) {
+      $boton.addClass("correcta");
+    } else {
+      $boton.addClass("atenuada");
+    }
+  });
+
+  if (datos.acierto) {
+    $("#feedback").text("¡Correcto!").removeClass("ko").addClass("ok");
+    numeroAciertos++;
+  } else {
+    $botonPulsado.addClass("incorrecta");
+    $("#feedback")
+      .text("Respuesta incorrecta. La correcta está marcada.")
+      .removeClass("ok")
+      .addClass("ko");
+  }
+}
+
+// 4. Última pregunta respondida: se avisa al backend con los aciertos y luego se va a resultados
+function terminar() {
+  $("#barraProgreso").css("width", "100%");
+  $("#respuestas").empty();
+  $("#contadorPregunta").text("Partida terminada");
+  $("#textoPregunta").text("¡Has terminado! Cargando resultados…");
+  $("#feedback").text("").removeClass("ok ko");
+
+  setTimeout(function () {
+    $.ajax({
+      url: URL_CONTROLADOR,
+      type: "POST",
+      dataType: "json",
+      data: {
+        orden: "finalizarPartida",
+        idPartida: idPartida,
+        aciertos: numeroAciertos,
+      },
+      complete: function () {
+        // Se va a resultados tanto si el AJAX ha ido bien como si ha fallado
+        irAResultados();
+      },
+    });
+  }, 1200);
+}
+
+function irAResultados() {
+  window.location.href = "resultados.php?idPartida=" + idPartida;
+}
+
+function mostrarError(mensaje) {
+  $("#respuestas").empty();
+  $("#textoPregunta").text(mensaje);
+  $("#feedback").html(
+    '<a href="buscadorSala.php">Volver al buscador de salas</a>',
+  );
+}

js/perfil.js

@@ -26,6 +26,10 @@ $.ajax({
 function cambiarNombre() {
   let nuevoNombre = $("#nuevoNombre").val().trim();
 
+  if (nuevoNombre === "") {
+    return;
+  }
+
   $.ajax({
     method: "POST",
     url: "controladores/controladorUsuario.php",
@@ -42,8 +46,13 @@ function cambiarNombre() {
       // Actualizamos el nombre mostrado en la página
       $("#nombre").text(respuesta.nombreUsuario);
 
-      // Limpiamos el input
+      
       $("#nuevoNombre").val("");
+
+    
+      if (typeof comprobarEstadoSesion === "function") {
+        comprobarEstadoSesion();
+      }
     }
   });
 }
@@ -74,14 +83,11 @@ $("#inputFoto").change(function () {
   // Comprobamos que sea una imagen
   if (!archivo.type.startsWith("image/")) {
     alert("El archivo seleccionado no es una imagen.");
-
     $("#inputFoto").val("");
-
     return;
   }
 
   let datos = new FormData();
-
   datos.append("avatar", archivo);
   datos.append("orden", "cambiarAvatar");
 
@@ -97,18 +103,23 @@ $("#inputFoto").change(function () {
     if (respuesta.error) {
       alert(respuesta.error);
     } else {
-      // Actualizamos la imagen sin recargar la página
+      // Actualizamos la imagen en la página de perfil sin recargar
       $("#fotoPerfil").attr(
         "src",
-        respuesta.avatar + "?t=" + new Date().getTime(),
+        respuesta.avatar + "?t=" + new Date().getTime()
       );
+
+      // Actualizamos también el avatar superior en la cabecera 
+      if (typeof comprobarEstadoSesion === "function") {
+        comprobarEstadoSesion();
+      }
     }
   });
 });
 
 // =========================
 // RECOGER CATEGORIAS
-// ====
+// =========================
 
 $("#modalCrearPregunta").on("show.bs.modal", function () {
   const selectCategoria = $("#idCategoria");
@@ -141,16 +152,14 @@ $("#modalCrearPregunta").on("show.bs.modal", function () {
           $("<option>", {
             value: categoria.idCategoria,
             text: categoria.nombreCategoria,
-          }),
+          })
         );
       });
     },
 
     error: function (xhr, status, error) {
       console.error("Error al cargar las categorías:", error);
-
       console.error("Respuesta del servidor:", xhr.responseText);
-
       alert("No se han podido cargar las categorías.");
     },
   });
@@ -158,7 +167,7 @@ $("#modalCrearPregunta").on("show.bs.modal", function () {
 
 // =========================
 // CREAR PREGUNTA
-// ====
+// =========================
 
 $("#formCrearPregunta").on("submit", function (e) {
   e.preventDefault();
@@ -188,24 +197,15 @@ $("#formCrearPregunta").on("submit", function (e) {
 
   $.ajax({
     url: "controladores/controladorPregunta.php",
-
     type: "POST",
-
     dataType: "json",
-
     data: {
       orden: "crearPregunta",
-
       idCategoria: $("#idCategoria").val(),
-
       nombrePregunta: pregunta,
-
       respuestaCorrecta: respuestaCorrecta,
-
       respuestaIncorrecta1: respuestaIncorrecta1,
-
       respuestaIncorrecta2: respuestaIncorrecta2,
-
       respuestaIncorrecta3: respuestaIncorrecta3,
     },
 
@@ -214,10 +214,8 @@ $("#formCrearPregunta").on("submit", function (e) {
 
       if (respuesta.error) {
         alert(respuesta.error);
-
         boton.prop("disabled", false);
         boton.text("Crear pregunta");
-
         return;
       }
 
@@ -233,17 +231,12 @@ $("#formCrearPregunta").on("submit", function (e) {
         // Volvemos a activar el botón
         boton.prop("disabled", false);
         boton.text("Crear pregunta");
-
-        // Si tienes que actualizar la lista de preguntas:
-        // cargarPreguntas();
       }
     },
 
     error: function (xhr, status, error) {
       console.error("Error al crear la pregunta:", error);
-
       console.error("Respuesta del servidor:", xhr.responseText);
-
       alert("No se ha podido crear la pregunta.");
 
       boton.prop("disabled", false);

juego.php

@@ -1,3 +1,20 @@
+<?php
+session_start();
+
+// Hay que estar logueado para jugar
+if (!isset($_SESSION['idUsuario'])) {
+    header('Location: index.php');
+    exit;
+}
+
+// La partida llega por la URL: juego.php?idPartida=3
+$idPartida = filter_input(INPUT_GET, 'idPartida', FILTER_VALIDATE_INT);
+
+if (!$idPartida || $idPartida < 1) {
+    header('Location: buscadorSala.php');
+    exit;
+}
+?>
 <!DOCTYPE html>
 <html lang="es">
 <head>
@@ -8,39 +25,27 @@
     <link rel="stylesheet" href="css/juego.css">
     <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
 </head>
-<body>
+<body data-id-partida="<?= (int)$idPartida ?>">
 
-    <!-- Contenedor de la Pregunta -->
+    <!-- Progreso: "Pregunta 3 de 10" + barra -->
+    <div class="game-header">
+        <span id="contadorPregunta">Cargando…</span>
+    </div>
+    <div class="progress-track">
+        <div class="progress-fill" id="barraProgreso"></div>
+    </div>
+
+    <!-- Contenedor de la Pregunta (lo rellena js/juego.js) -->
     <div class="question-container">
-        ¿Cuál es el planeta más grande de nuestro sistema solar?
+        <div id="textoPregunta">Cargando preguntas…</div>
+        <div id="feedback" class="feedback" aria-live="polite"></div>
     </div>
 
-    <!-- Contenedor de Respuestas (Estilo Kahoot) -->
+    <!-- Contenedor de Respuestas (Estilo Kahoot, lo rellena js/juego.js) -->
-    <div class="answers-grid">
+    <div class="answers-grid" id="respuestas"></div>
-        <button class="btn-answer red" onclick="checkAnswer('Marte')">
-            <span class="shape triangle"></span>
-            Marte
-        </button>
 
-        <button class="btn-answer blue" onclick="checkAnswer('Júpiter')">
+    <script src="js/jquery-4.0.0.min.js"></script>
-            <span class="shape diamond"></span>
+    <script src="js/juego.js"></script>
-            Júpiter
-        </button>
-        
-        <button class="btn-answer yellow" onclick="checkAnswer('Saturno')">
-            <span class="shape circle"></span>
-            Saturno
-        </button>
-        
-        <button class="btn-answer green" onclick="checkAnswer('Tierra')">
-            <span class="shape square"></span>
-            Tierra
-        </button>
-    </div>
-
-    <script>
-       
-    </script>
 
 </body>
 </html>