jorge/triviagmatico
4
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add sincronizacion de jugadores en partida

Browse Source
This commit is contained in:
alexis
2026-10-02 10:40:01 +02:00
parent 9488d7cee7
commit 3856db81ef
5 changed files with 278 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/juego.js
+89 -12
View File
@@ -118,7 +118,12 @@ function mostrarPregunta() {
// 3. El usuario pulsa una respuesta: se guarda y se enseña si ha acertado
function responder($botonPulsado) {
clearInterval(intervaloTiempo);
console.log("Tiempo de respuesta: " + tiempoRespuesta / 10 + " segundos");
console.log(
"Tiempo de respuesta: " +
tiempoRespuesta / 10 +
" segundos"
);
if (bloqueado) {
return;
@@ -127,7 +132,29 @@ function responder($botonPulsado) {
bloqueado = true;
const pregunta = preguntas[indice];
const idRespuesta = parseInt($botonPulsado.attr("data-id-respuesta"), 10);
const idRespuesta = parseInt(
$botonPulsado.attr("data-id-respuesta"),
10
);
console.log("PREGUNTA ACTUAL:", pregunta);
console.log(
"idPartidaxPregunta:",
pregunta.idPartidaxPregunta
);
console.log(
"idRespuesta:",
idRespuesta
);
console.log(
"tiempoRespuesta:",
tiempoRespuesta
);
console.log(
"idPartida:",
idPartida
);
$("#respuestas").addClass("bloqueado");
@@ -135,46 +162,96 @@ function responder($botonPulsado) {
url: URL_CONTROLADOR,
type: "POST",
dataType: "json",
data: {
orden: "responder",
idPartida: idPartida,
idPartidaxPregunta: pregunta.idPartidaxPregunta,
idRespuesta: idRespuesta,
tiempoRespuesta: tiempoRespuesta,
idRespuesta: idRespuesta,
tiempoRespuesta: tiempoRespuesta
},
success: function (datos) {
console.log("RESPUESTA DEL SERVIDOR:", datos);
if (datos.error) {
// No se guardó: dejamos que vuelva a intentarlo
$("#feedback").text(datos.error).removeClass("ok").addClass("ko");
$("#feedback")
.text(datos.error)
.removeClass("ok")
.addClass("ko");
$("#respuestas").removeClass("bloqueado");
bloqueado = false;
return;
}
pregunta.respondida = true;
mostrarFeedback($botonPulsado, datos);
mostrarFeedback(
$botonPulsado,
datos
);
setTimeout(function () {
if (datos.terminada || indice >= preguntas.length - 1) {
if (
datos.terminada ||
indice >= preguntas.length - 1
) {
terminar();
} else {
indice++;
$("#respuestas").removeClass("bloqueado");
$("#respuestas")
.removeClass("bloqueado");
mostrarPregunta();
}
}, PAUSA_FEEDBACK);
},
error: function () {
error: function (xhr, status, error) {
console.error(
"ERROR AJAX RESPONDER"
);
console.error(
"HTTP:",
xhr.status
);
console.error(
"ERROR:",
error
);
console.error(
"RESPUESTA:",
xhr.responseText
);
$("#feedback")
.text("No se pudo guardar la respuesta. Inténtalo de nuevo.")
.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 () {
js/sala.js
+113 -44
View File
@@ -263,15 +263,16 @@ function mostrarSala(partida, equipos, jugadores) {
if (esHost) {
botonIniciarHTML = `
<a
href="juego.php?idPartida=${partida.idPartida}"
class="btn btn-success btn-lg px-4">
<button
type="button"
class="btn btn-success btn-lg px-4 btn-iniciar-partida"
data-id-partida="${partida.idPartida}">
<i class="bi bi-controller"></i>
¡Iniciar Partida!
<i class="bi bi-controller"></i>
¡Iniciar Partida!
</a>
`;
</button>
`;
}
const salaHTML = `
@@ -313,8 +314,98 @@ function mostrarSala(partida, equipos, jugadores) {
`;
contenedor.html(salaHTML);
if (!partida.fechaInicio) {
iniciarComprobacionPartida(partida.idPartida);
}
}
let intervaloComprobarPartida = null;
function iniciarComprobacionPartida(idPartida) {
if (intervaloComprobarPartida) {
clearInterval(intervaloComprobarPartida);
}
intervaloComprobarPartida = setInterval(function () {
$.ajax({
url: "controladores/controladorPartida.php",
type: "POST",
dataType: "json",
data: {
orden: "comprobarInicio",
idPartida: idPartida,
},
success: function (respuesta) {
if (respuesta.iniciada) {
clearInterval(intervaloComprobarPartida);
window.location.href = "juego.php?idPartida=" + idPartida;
}
},
});
}, 1000);
}
$(document).on("click", ".btn-iniciar-partida", function () {
const boton = $(this);
const idPartida = boton.data("id-partida");
boton.prop("disabled", true);
boton.html(`
<span class="spinner-border spinner-border-sm"></span>
Iniciando...
`);
$.ajax({
url: "controladores/controladorPartida.php",
type: "POST",
dataType: "json",
data: {
orden: "iniciar",
idPartida: idPartida,
},
success: function (respuesta) {
if (respuesta.error) {
alert(respuesta.error);
boton.prop("disabled", false);
boton.html(`
<i class="bi bi-controller"></i>
¡Iniciar Partida!
`);
return;
}
// El host entra directamente
window.location.href = "juego.php?idPartida=" + idPartida;
},
error: function () {
alert("Ocurrió un error al iniciar la partida.");
boton.prop("disabled", false);
boton.html(`
<i class="bi bi-controller"></i>
¡Iniciar Partida!
`);
},
});
});
$(document).on("click", ".btn-unirse-equipo", function () {
const boton = $(this);
@@ -364,8 +455,7 @@ $(document).on("click", ".btn-abandonar-sala", function () {
botonAbandonarReferencia = $(this);
const esHost =
$(this).data("es-host") === true ||
$(this).data("es-host") === "true";
$(this).data("es-host") === true || $(this).data("es-host") === "true";
const titulo = $("#modalAbandonarSalaLabel");
@@ -384,9 +474,7 @@ $(document).on("click", ".btn-abandonar-sala", function () {
} else {
titulo.text("¿Abandonar la sala?");
mensaje.text(
"Si sales de la sala, perderás tu lugar en el equipo.",
);
mensaje.text("Si sales de la sala, perderás tu lugar en el equipo.");
botonConfirmar.text("Sí, salir");
}
@@ -399,17 +487,13 @@ $(document).on("click", ".btn-abandonar-sala", function () {
});
$(document).on("click", "#btnConfirmarAbandonar", function () {
const modalEl =
document.getElementById("modalAbandonarSala");
const modalEl = document.getElementById("modalAbandonarSala");
const modalInstance =
bootstrap.Modal.getInstance(modalEl);
const modalInstance = bootstrap.Modal.getInstance(modalEl);
const btnConfirmar = $(this);
btnConfirmar
.prop("disabled", true)
.text("Saliendo...");
btnConfirmar.prop("disabled", true).text("Saliendo...");
$.ajax({
url: "controladores/controladorEquipoxUsuario.php",
@@ -421,9 +505,7 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
},
success: function (respuesta) {
btnConfirmar
.prop("disabled", false)
.text("Sí, salir");
btnConfirmar.prop("disabled", false).text("Sí, salir");
if (modalInstance) {
modalInstance.hide();
@@ -449,16 +531,11 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
},
error: function (xhr, status, error) {
console.error(
"Error al salir de la sala:",
error
);
console.error("Error al salir de la sala:", error);
alert("No se pudo salir de la sala.");
btnConfirmar
.prop("disabled", false)
.text("Sí, salir");
btnConfirmar.prop("disabled", false).text("Sí, salir");
if (modalInstance) {
modalInstance.hide();
@@ -473,25 +550,19 @@ function escapeHTML(texto) {
.html();
}
function mostrarEquipos(
partida,
equipos,
jugadores
) {
function mostrarEquipos(partida, equipos, jugadores) {
let equiposHTML = "";
equipos.forEach(function (equipo) {
const jugadoresEquipo =
jugadores.filter(function (jugador) {
return jugador.idEquipo == equipo.idEquipo;
});
const jugadoresEquipo = jugadores.filter(function (jugador) {
return jugador.idEquipo == equipo.idEquipo;
});
let jugadoresHTML = "";
if (jugadoresEquipo.length > 0) {
jugadoresEquipo.forEach(function (jugador) {
const esHost =
jugador.idUsuario == partida.idUsuario;
const esHost = jugador.idUsuario == partida.idUsuario;
jugadoresHTML += `
<div class="jugador border border-2 d-flex align-items-center justify-content-between ${
@@ -507,9 +578,7 @@ function mostrarEquipos(
}
</span>
${escapeHTML(
jugador.nombreUsuario
)}
${escapeHTML(jugador.nombreUsuario)}
</div>
${
@@ -547,4 +616,4 @@ function mostrarEquipos(
});
$("#contenedorSalas .equipos").html(equiposHTML);
}
}