Add funcionamiento del juego

2026-09-29 10:50:58 +02:00
parent 3cc0dfb122
commit 449cb1d976
5 changed files with 760 additions and 30 deletions
@@ -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>',
+  );
+}