Add funcionamiento del juego

buscadorSala.php

@@ -82,8 +82,8 @@
         <div class="modal-content modal-kahoot text-center p-3">
             <div class="modal-body">
                 <div class="mb-3 fs-1">⚠️</div>
-                <h4 class="modal-title mb-2 fw-bold" id="modalAbandonarSalaLabel">¿Abandonar la sala?</h4>
-                <p class="text-dark-50">Si sales de la sala, perderás tu lugar en el equipo.</p>
+                <h4 class="modal-title mb-2 fw-bold text-white" id="modalAbandonarSalaLabel">¿Abandonar la sala?</h4>
+                <p class="text-white-50">Si sales de la sala, perderás tu lugar en el equipo.</p>
             </div>
             <div class="modal-footer justify-content-center border-0 gap-2">
                 <button type="button" class="btn btn-secondary px-4 py-2" data-bs-dismiss="modal">

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;
+}

css/buscadorSala.css

@@ -68,8 +68,8 @@
 
 .btn-unirse {
     border: none;
-    border-bottom: 3px solid #1f6f09;
-    background-color: #26890c;
+    border-bottom: 3px solid #0c4891;
+    background-color: var(--kahoot-blue);
     color: white;
     font-weight: 600;
     border-radius: 8px;
@@ -105,11 +105,3 @@
     border-color: var(--kahoot-purple);
     box-shadow: 0 0 0 3px rgba(70, 23, 143, 0.15);
 }
-
-.jugador-host {
-    background-color: #fff3cd;
-    border: 1px solid #ffc107;
-    border-radius: 8px;
-    padding: 6px 10px;
-    font-weight: 600;
-}

css/juego.css

@@ -116,4 +116,66 @@
             .btn-answer {
                 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/buscadorSala.js

@@ -123,24 +123,12 @@ function mostrarSala(partida, equipos, jugadores) {
     let jugadoresHTML = "";
     if (jugadoresEquipo.length > 0) {
       jugadoresEquipo.forEach(function (jugador) {
-        const esHost = jugador.idUsuario == partida.idUsuario;
-
         jugadoresHTML += `
-    <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
-      esHost ? "jugador-host" : ""
-    }">
-      <div>
-        <span class="avatar">${esHost ? "👑" : "👤"}</span>
-        ${escapeHTML(jugador.nombreUsuario)}
-      </div>
-
-      ${
-        esHost
-          ? `<span class="badge bg-warning text-dark ms-2">HOST</span>`
-          : ""
-      }
-    </div>
-  `;
+          <div class="jugador">
+            <span class="avatar">👤</span>
+            ${escapeHTML(jugador.nombreUsuario)}
+          </div>
+        `;
       });
     } else {
       jugadoresHTML = `<div class="text-muted small">Sin jugadores</div>`;
@@ -150,7 +138,7 @@ function mostrarSala(partida, equipos, jugadores) {
     let botonUnirseHTML = "";
     if (!usuarioYaEstaEnEquipo) {
       botonUnirseHTML = `
-        <button type="button" class="btn-unirse w-100 btn-unirse-equipo mt-2"
+        <button type="button" class="btn btn-unirse w-100 btn-unirse-equipo mt-2"
                 data-id-partida="${partida.idPartida}"
                 data-id-equipo="${equipo.idEquipo}">
           Unirse
@@ -169,42 +157,25 @@ function mostrarSala(partida, equipos, jugadores) {
     `;
   });
 
-  // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala
   // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala
   let accionesSalaHTML = "";
-
   if (usuarioYaEstaEnEquipo) {
-    let botonIniciarHTML = "";
-
-    // Solo el host puede iniciar la partida
-    if (partida.idUsuario == idUsuarioSesion) {
-      botonIniciarHTML = `
-      <a href="juego.php?idPartida=${partida.idPartida}" 
-         class="btn btn-success btn-lg px-4">
-        🎮 ¡Iniciar Partida!
-      </a>
-    `;
-    }
-
     accionesSalaHTML = `
-    <div class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
-
-      <button type="button" 
-              class="btn btn-outline-danger btn-abandonar-sala" 
-              data-id-partida="${partida.idPartida}">
-        Abandonar sala
-      </button>
-
-      ${botonIniciarHTML}
-
-    </div>
-  `;
+      <div class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
+        <button type="button" class="btn btn-outline-danger btn-abandonar-sala" data-id-partida="${partida.idPartida}">
+          Abandonar sala
+        </button>
+        <a href="juego.php?idPartida=${partida.idPartida}" class="btn btn-success btn-lg px-4">
+          🎮 ¡Iniciar Partida!
+        </a>
+      </div>
+    `;
   }
 
   const salaHTML = `
     <div class="col-12 col-md-10 col-lg-8">
       <div class="sala card p-3 shadow-sm mb-4">
-        <div class="sala-header h4 text-center mb-3 text-white">
+        <div class="sala-header h4 text-center mb-3">
           ${escapeHTML(partida.nombrePartida)}
         </div>
         <div class="sala-body">
@@ -263,15 +234,13 @@ let botonAbandonarReferencia = null;
 // A. Al hacer clic en el botón "Abandonar sala" de la tarjeta, abrimos el modal
 $(document).on("click", ".btn-abandonar-sala", function () {
   botonAbandonarReferencia = $(this);
-  const modal = new bootstrap.Modal(
-    document.getElementById("modalAbandonarSala"),
-  );
+  const modal = new bootstrap.Modal(document.getElementById('modalAbandonarSala'));
   modal.show();
 });
 
 // B. Al hacer clic en "Sí, salir" dentro del modal Kahoot
 $(document).on("click", "#btnConfirmarAbandonar", function () {
-  const modalEl = document.getElementById("modalAbandonarSala");
+  const modalEl = document.getElementById('modalAbandonarSala');
   const modalInstance = bootstrap.Modal.getInstance(modalEl);
 
   const btnConfirmar = $(this);
@@ -284,7 +253,7 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
     data: { orden: "salirDeSala" },
     success: function (respuesta) {
       btnConfirmar.prop("disabled", false).text("Sí, salir");
-
+      
       if (modalInstance) {
         modalInstance.hide();
       }
@@ -306,7 +275,7 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
       if (modalInstance) {
         modalInstance.hide();
       }
-    },
+    }
   });
 });
 // 8. Evento: Crear Sala

js/cabecera.js

@@ -1,5 +1,3 @@
-let idUsuarioSesion = null;
-
 $(document).ready(function () {
     // Comprobar la sesión activa al cargar la página
     comprobarEstadoSesion();
@@ -38,7 +36,6 @@ function comprobarEstadoSesion() {
         data: { orden: 'comprobarSesion' },
         success: function (respuesta) {
             if (respuesta.activa) {
-                idUsuarioSesion = respuesta.usuario.idUsuario;
                 renderizarCabeceraConSesion(respuesta.usuario);
                 $('#colBotonJugar').removeClass('d-none');
             } else {

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

@@ -231,8 +231,6 @@ $("#formCrearPregunta").on("submit", function (e) {
         // Volvemos a activar el botón
         boton.prop("disabled", false);
         boton.text("Crear pregunta");
-        // Toast exito 
-        mostrarToast()
       }
     },
 
@@ -245,12 +243,4 @@ $("#formCrearPregunta").on("submit", function (e) {
       boton.text("Crear pregunta");
     },
   });
-});
-function mostrarToast() {
-  const toastMensaje = document.getElementById("ToastCrearPregunta");
-
-  if (toastMensaje) {
-    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastMensaje);
-    toastBootstrap.show();
-  }
-}
+});

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) -->
-    <div class="answers-grid">
-        <button class="btn-answer red" onclick="checkAnswer('Marte')">
-            <span class="shape triangle"></span>
-            Marte
-        </button>
-        
-        <button class="btn-answer blue" onclick="checkAnswer('Júpiter')">
-            <span class="shape diamond"></span>
-            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>
+    <!-- Contenedor de Respuestas (Estilo Kahoot, lo rellena js/juego.js) -->
+    <div class="answers-grid" id="respuestas"></div>
 
-    <script>
-       
-    </script>
+    <script src="js/jquery-4.0.0.min.js"></script>
+    <script src="js/juego.js"></script>
 
 </body>
-</html>
+</html>

perfil.php

@@ -174,17 +174,8 @@ $avatarUsuario = htmlspecialchars($_SESSION['avatar'] ?? 'img/avatars/defaultPro
         </div>
 
     </div>
-    <!-- TOAST PREGUNTA CREADA -->
-    <div class="toast-container position-fixed bottom-0 end-0 p-3">
-        <div id="ToastCrearPregunta"  class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-            <div class=" toast-header" style="background-color: #46178f;">
-                <h5 class="text-white me-auto bi bi-joystick me-2"> Pregunta Creada</h5>
-            </div>
-            <div class="fs-6 toast-body">
-                La pregunta ha sido creada correctamente
-            </div>
-        </div>
-    </div>
+
+
     <!-- MODAL CREAR PREGUNTA -->
     <div class="modal fade"
          id="modalCrearPregunta"