Add funcionamiento del juego
This commit is contained in:
@@ -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()
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
+63
-1
@@ -116,4 +116,66 @@
|
|||||||
.btn-answer {
|
.btn-answer {
|
||||||
font-size: 18px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+219
@@ -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>',
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
<!DOCTYPE html>
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
@@ -8,39 +25,27 @@
|
|||||||
<link rel="stylesheet" href="css/juego.css">
|
<link rel="stylesheet" href="css/juego.css">
|
||||||
<link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
|
<link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
|
||||||
</head>
|
</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">
|
<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>
|
</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')">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<script>
|
<script src="js/jquery-4.0.0.min.js"></script>
|
||||||
|
<script src="js/juego.js"></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user