triviagmatico/js/juego.js

// 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>',
  );
}