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

Add se actualizan las salas automaticamente

Browse Source
This commit is contained in:
alexis
2026-10-01 13:52:36 +02:00
parent 8453735727
commit 5113b960d2
2 changed files with 431 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/buscadorSala.js
+284 -75
View File
@@ -1,8 +1,47 @@
// =====================================================
// VARIABLES
// =====================================================
let intervaloBuscadorSalas = null;
let cargandoSalas = false;
// =====================================================
// INICIAR ACTUALIZACIÓN AUTOMÁTICA
// =====================================================
function iniciarActualizacionSalas() {
// Evitar crear varios intervalos
if (intervaloBuscadorSalas) {
clearInterval(intervaloBuscadorSalas);
}
// Primera carga
cargarSalas();
// Actualizar cada 5 segundos
intervaloBuscadorSalas = setInterval(function () {
// Si el usuario está dentro de una sala,
// no necesitamos actualizar el buscador.
if (!usuarioYaEstaEnEquipo) {
cargarSalas();
}
}, 5000);
}
// =====================================================
// CARGAR LISTA DE SALAS
// =====================================================
function cargarSalas() {
// Evitar peticiones simultáneas
if (cargandoSalas) {
return;
}
cargandoSalas = true;
$.ajax({
url: "controladores/controladorPartida.php",
type: "POST",
@@ -15,24 +54,71 @@ function cargarSalas() {
success: function (partidas) {
const contenedor = $("#contenedorSalas");
contenedor.empty();
// =================================================
// NO HAY SALAS
// =================================================
if (
!Array.isArray(partidas) ||
partidas.length === 0
) {
contenedor.html(`
<div class="col-12 text-center">
<p class="text-muted">
No hay salas disponibles actualmente.
</p>
</div>
`);
// Ocultamos/eliminamos únicamente las salas
$(".sala-item").remove();
if ($("#mensajeSinSalas").length === 0) {
contenedor.append(`
<div
id="mensajeSinSalas"
class="col-12 text-center">
<p class="text-muted">
No hay salas disponibles actualmente.
</p>
</div>
`);
}
return;
}
// Cargar cada sala individualmente
// =================================================
// HAY SALAS
// =================================================
// Eliminar mensaje de "no hay salas"
$("#mensajeSinSalas").remove();
// =================================================
// OBTENER IDS DE LAS SALAS ACTUALES
// =================================================
const idsPartidas = partidas.map(function (partida) {
return String(partida.idPartida);
});
// =================================================
// ELIMINAR SALAS QUE YA NO EXISTEN
// =================================================
$(".sala-item").each(function () {
const idPartida = String(
$(this).data("id-partida")
);
if (!idsPartidas.includes(idPartida)) {
$(this).remove();
}
});
// =================================================
// ACTUALIZAR / CREAR CADA SALA
// =================================================
partidas.forEach(function (partida) {
cargarSalaBuscador(partida);
});
@@ -44,12 +130,16 @@ function cargarSalas() {
error
);
},
complete: function () {
cargandoSalas = false;
},
});
}
// =====================================================
// CARGAR INFORMACIÓN DE UNA SALA DEL BUSCADOR
// CARGAR INFORMACIÓN DE UNA SALA
// =====================================================
function cargarSalaBuscador(partida) {
@@ -75,7 +165,7 @@ function cargarSalaBuscador(partida) {
},
success: function (jugadores) {
mostrarSalaBuscador(
actualizarSalaBuscador(
partida,
equipos,
jugadores
@@ -102,30 +192,158 @@ function cargarSalaBuscador(partida) {
// =====================================================
// MOSTRAR UNA SALA EN EL BUSCADOR
// ACTUALIZAR UNA SALA
// =====================================================
function mostrarSalaBuscador(
function actualizarSalaBuscador(
partida,
equipos,
jugadores
) {
const selectorSala =
`.sala-item[data-id-partida="${partida.idPartida}"]`;
const salaExistente = $(selectorSala);
// ===================================================
// SI LA SALA NO EXISTE → CREARLA
// ===================================================
if (salaExistente.length === 0) {
crearSalaBuscador(
partida,
equipos,
jugadores
);
return;
}
// ===================================================
// LA SALA YA EXISTE
// ===================================================
//
// NO TOCAMOS LA TARJETA COMPLETA.
//
// Solo actualizamos .equipos
//
const equiposHTML =
generarEquiposHTML(
partida,
equipos,
jugadores
);
salaExistente
.find(".equipos")
.html(equiposHTML);
}
// =====================================================
// CREAR UNA SALA NUEVA
// =====================================================
function crearSalaBuscador(
partida,
equipos,
jugadores
) {
const equiposHTML =
generarEquiposHTML(
partida,
equipos,
jugadores
);
const salaHTML = `
<div
class="col-12 col-md-10 col-lg-8 sala-item"
data-id-partida="${partida.idPartida}">
<div class="sala card p-3 shadow-sm mb-4">
<!-- =========================================
CABECERA
========================================== -->
<div
class="sala-header h4 text-center mb-3 text-white">
${escapeHTML(
partida.nombrePartida
)}
</div>
<!-- =========================================
CUERPO
========================================== -->
<div class="sala-body">
<!-- ESTA ES LA PARTE QUE SE ACTUALIZA -->
<div class="equipos d-flex justify-content-around">
${equiposHTML}
</div>
</div>
</div>
</div>
`;
$("#contenedorSalas").append(
salaHTML
);
}
// =====================================================
// GENERAR HTML DE EQUIPOS Y JUGADORES
// =====================================================
function generarEquiposHTML(
partida,
equipos,
jugadores
) {
let equiposHTML = "";
equipos.forEach(function (equipo) {
const jugadoresEquipo = jugadores.filter(
function (jugador) {
return (
jugador.idEquipo ==
equipo.idEquipo
);
}
);
// -----------------------------------------------
// JUGADORES DE ESTE EQUIPO
// -----------------------------------------------
const jugadoresEquipo =
jugadores.filter(
function (jugador) {
return (
jugador.idEquipo ==
equipo.idEquipo
);
}
);
let jugadoresHTML = "";
// -----------------------------------------------
// JUGADORES DEL EQUIPO
// MOSTRAR JUGADORES
// -----------------------------------------------
if (jugadoresEquipo.length > 0) {
@@ -135,28 +353,38 @@ function mostrarSalaBuscador(
jugador.idUsuario ==
partida.idUsuario;
jugadoresHTML += `
<div class="jugador border border-2 d-flex align-items-center justify-content-between">
<div
class="jugador border border-2 d-flex align-items-center justify-content-between">
<div>
<span class="avatar">
${
esHost
? '<i class="bi bi-award-fill"></i>'
: '<i class="bi bi-person-fill"></i>'
}
</span>
${escapeHTML(
jugador.nombreUsuario
)}
</div>
${
esHost
? `
<span class="badge bg-warning text-dark ms-2">
<span
class="badge bg-warning text-dark ms-2">
HOST
</span>
`
: ""
@@ -174,18 +402,22 @@ function mostrarSalaBuscador(
`;
}
// -----------------------------------------------
// BOTÓN UNIRSE
// -----------------------------------------------
let botonUnirseHTML = "";
if (!usuarioYaEstaEnEquipo) {
botonUnirseHTML = `
<button
type="button"
class="btn-unirse w-100 btn-unirse-equipo mt-2"
data-id-partida="${partida.idPartida}"
data-id-equipo="${equipo.idEquipo}">
Unirse
@@ -194,12 +426,14 @@ function mostrarSalaBuscador(
`;
}
// -----------------------------------------------
// EQUIPO
// -----------------------------------------------
equiposHTML += `
<div class="equipo me-2 ms-2 p-3 border rounded">
<div
class="equipo me-2 ms-2 p-3 border rounded">
<h6>
${escapeHTML(
@@ -208,7 +442,9 @@ function mostrarSalaBuscador(
</h6>
<div class="jugadores mb-2">
${jugadoresHTML}
</div>
${botonUnirseHTML}
@@ -218,48 +454,7 @@ function mostrarSalaBuscador(
});
// =================================================
// TARJETA DE LA SALA
// =================================================
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">
${escapeHTML(
partida.nombrePartida
)}
</div>
<div class="sala-body">
<div class="equipos d-flex justify-content-around">
${equiposHTML}
</div>
</div>
</div>
</div>
`;
// =================================================
// IMPORTANTE
// =================================================
//
// NO usamos .html() aquí porque eso eliminaría
// las salas que ya se hayan mostrado.
//
// Usamos .append() para añadir cada nueva sala.
//
$("#contenedorSalas").append(
salaHTML
);
return equiposHTML;
}
@@ -279,9 +474,14 @@ $("#btnCrearSala").on(
const nombreEquipo2 =
$("#nombreEquipo2").val().trim();
let valido = true;
// Limpiar errores anteriores
// -----------------------------------------------
// LIMPIAR ERRORES
// -----------------------------------------------
$(".mensaje-error-sala").remove();
$(".input-kahoot")
@@ -340,7 +540,7 @@ $("#btnCrearSala").on(
// -----------------------------------------------
// LOS EQUIPOS NO PUEDEN TENER EL MISMO NOMBRE
// COMPROBAR NOMBRES IGUALES
// -----------------------------------------------
if (
@@ -358,14 +558,17 @@ $("#btnCrearSala").on(
}
// Si hay errores, no continuar
// -----------------------------------------------
// SI HAY ERRORES
// -----------------------------------------------
if (!valido) {
return;
}
// -----------------------------------------------
// DESACTIVAR BOTÓN
// BOTÓN
// -----------------------------------------------
const boton = $("#btnCrearSala");
@@ -376,7 +579,7 @@ $("#btnCrearSala").on(
// -----------------------------------------------
// CREAR SALA
// PETICIÓN
// -----------------------------------------------
$.ajax({
@@ -386,8 +589,11 @@ $("#btnCrearSala").on(
data: {
orden: "crear",
nombrePartida: nombreSala,
nombreEquipo1: nombreEquipo1,
nombreEquipo2: nombreEquipo2,
},
@@ -432,7 +638,7 @@ $("#btnCrearSala").on(
// =====================================================
// MOSTRAR ERROR DE VALIDACIÓN
// MOSTRAR ERROR
// =====================================================
function mostrarError(
@@ -444,8 +650,11 @@ function mostrarError(
input.addClass("is-invalid");
input.after(`
<div class="mensaje-error-sala text-danger mt-1 small">
<div
class="mensaje-error-sala text-danger mt-1 small">
${mensaje}
</div>
`);
}
@@ -466,4 +675,4 @@ $(document).on(
.next(".mensaje-error-sala")
.remove();
}
);
);
js/sala.js
+147 -242
View File
@@ -27,7 +27,7 @@ function comprobarSalaUsuario() {
$("#contenedorCrearSala").show();
cargarSalas();
iniciarActualizacionSalas();
} else {
usuarioYaEstaEnEquipo = true;
@@ -38,10 +38,7 @@ function comprobarSalaUsuario() {
},
error: function (xhr, status, error) {
console.error(
"Error al comprobar la sala del usuario:",
error
);
console.error("Error al comprobar la sala del usuario:", error);
usuarioYaEstaEnEquipo = false;
@@ -95,10 +92,7 @@ function cargarSalaCompleta(idPartida) {
},
error: function (xhr, status, error) {
console.error(
"Error al obtener la sala:",
error
);
console.error("Error al obtener la sala:", error);
},
});
}
@@ -134,19 +128,13 @@ function cargarInformacionSalaCompleta(partida) {
},
error: function (xhr, status, error) {
console.error(
"Error al obtener jugadores:",
error
);
console.error("Error al obtener jugadores:", error);
},
});
},
error: function (xhr, status, error) {
console.error(
"Error al obtener equipos:",
error
);
console.error("Error al obtener equipos:", error);
},
});
}
@@ -176,10 +164,7 @@ function actualizarSalaUsuario(idPartida) {
},
error: function (xhr, status, error) {
console.error(
"Error al actualizar la sala:",
error
);
console.error("Error al actualizar la sala:", error);
},
});
}
@@ -211,27 +196,17 @@ function cargarInformacionSala(partida) {
},
success: function (jugadores) {
mostrarEquipos(
partida,
equipos,
jugadores
);
mostrarEquipos(partida, equipos, jugadores);
},
error: function (xhr, status, error) {
console.error(
"Error al obtener jugadores:",
error
);
console.error("Error al obtener jugadores:", error);
},
});
},
error: function (xhr, status, error) {
console.error(
"Error al obtener equipos:",
error
);
console.error("Error al obtener equipos:", error);
},
});
}
@@ -241,33 +216,32 @@ function cargarInformacionSala(partida) {
// =====================================================
function mostrarSala(partida, equipos, jugadores) {
const contenedor = $("#contenedorSalas");
const contenedor = $("#contenedorSalas");
let equiposHTML = "";
let equiposHTML = "";
equipos.forEach(function (equipo) {
const jugadoresEquipo = jugadores.filter(function (jugador) {
return jugador.idEquipo == equipo.idEquipo;
});
equipos.forEach(function (equipo) {
const jugadoresEquipo = jugadores.filter(function (jugador) {
return jugador.idEquipo == equipo.idEquipo;
});
let jugadoresHTML = "";
let jugadoresHTML = "";
if (jugadoresEquipo.length > 0) {
jugadoresEquipo.forEach(function (jugador) {
const esHost =
jugador.idUsuario == partida.idUsuario;
if (jugadoresEquipo.length > 0) {
jugadoresEquipo.forEach(function (jugador) {
const esHost = jugador.idUsuario == partida.idUsuario;
jugadoresHTML += `
jugadoresHTML += `
<div class="jugador border border-2 d-flex align-items-center justify-content-between ${
esHost ? "jugador-host" : ""
esHost ? "jugador-host" : ""
}">
<div>
<span class="avatar">
${
esHost
? '<i class="bi bi-award-fill"></i>'
: '<i class="bi bi-person-fill"></i>'
esHost
? '<i class="bi bi-award-fill"></i>'
: '<i class="bi bi-person-fill"></i>'
}
</span>
@@ -275,25 +249,25 @@ function mostrarSala(partida, equipos, jugadores) {
</div>
${
esHost
? `<span class="badge bg-warning text-dark ms-2">
esHost
? `<span class="badge bg-warning text-dark ms-2">
HOST
</span>`
: ""
: ""
}
</div>
`;
});
} else {
jugadoresHTML = `
});
} else {
jugadoresHTML = `
<div class="text-muted small">
Sin jugadores
</div>
`;
}
}
equiposHTML += `
equiposHTML += `
<div class="equipo me-2 ms-2 p-3 border rounded">
<h6>
@@ -306,15 +280,14 @@ function mostrarSala(partida, equipos, jugadores) {
</div>
`;
});
});
const esHost =
partida.idUsuario == idUsuarioSesion;
const esHost = partida.idUsuario == idUsuarioSesion;
let botonIniciarHTML = "";
let botonIniciarHTML = "";
if (esHost) {
botonIniciarHTML = `
if (esHost) {
botonIniciarHTML = `
<a
href="juego.php?idPartida=${partida.idPartida}"
class="btn btn-success btn-lg px-4">
@@ -324,9 +297,9 @@ function mostrarSala(partida, equipos, jugadores) {
</a>
`;
}
}
const salaHTML = `
const salaHTML = `
<div class="col-12 col-md-10 col-lg-8">
<div class="sala card p-3 shadow-sm mb-4">
@@ -353,11 +326,7 @@ function mostrarSala(partida, equipos, jugadores) {
</button>
${
esHost
? botonIniciarHTML
: ""
}
${esHost ? botonIniciarHTML : ""}
</div>
@@ -368,208 +337,159 @@ function mostrarSala(partida, equipos, jugadores) {
</div>
`;
// IMPORTANTE:
// El usuario está dentro de una única sala.
// Por eso aquí SÍ queremos reemplazar.
contenedor.html(salaHTML);
// IMPORTANTE:
// El usuario está dentro de una única sala.
// Por eso aquí SÍ queremos reemplazar.
contenedor.html(salaHTML);
}
// =====================================================
// UNIRSE A UN EQUIPO
// =====================================================
$(document).on(
"click",
".btn-unirse-equipo",
function () {
const boton = $(this);
$(document).on("click", ".btn-unirse-equipo", function () {
const boton = $(this);
const idEquipo = boton.data("id-equipo");
const idPartida = boton.data("id-partida");
const idEquipo = boton.data("id-equipo");
const idPartida = boton.data("id-partida");
boton
.prop("disabled", true)
.text("Uniéndose...");
boton.prop("disabled", true).text("Uniéndose...");
$.ajax({
url: "controladores/controladorEquipoxUsuario.php",
type: "POST",
dataType: "json",
$.ajax({
url: "controladores/controladorEquipoxUsuario.php",
type: "POST",
dataType: "json",
data: {
orden: "registrarUsuarioEnEquipo",
idEquipo: idEquipo,
},
data: {
orden: "registrarUsuarioEnEquipo",
idEquipo: idEquipo,
},
success: function (respuesta) {
if (respuesta.error) {
alert(respuesta.error);
success: function (respuesta) {
if (respuesta.error) {
alert(respuesta.error);
boton
.prop("disabled", false)
.text("Unirse");
boton.prop("disabled", false).text("Unirse");
return;
}
return;
}
usuarioYaEstaEnEquipo = true;
usuarioYaEstaEnEquipo = true;
$("#contenedorCrearSala").hide();
$("#contenedorSalas").empty();
$("#contenedorCrearSala").hide();
$("#contenedorSalas").empty();
cargarSalaUsuario(idPartida);
},
cargarSalaUsuario(idPartida);
},
error: function (xhr, status, error) {
console.error(
"Error al unirse al equipo:",
error
);
error: function (xhr, status, error) {
console.error("Error al unirse al equipo:", error);
alert(
"No se ha podido unir al equipo."
);
alert("No se ha podido unir al equipo.");
boton
.prop("disabled", false)
.text("Unirse");
},
});
}
);
boton.prop("disabled", false).text("Unirse");
},
});
});
// =====================================================
// ABANDONAR SALA - ABRIR MODAL
// =====================================================
$(document).on(
"click",
".btn-abandonar-sala",
function () {
botonAbandonarReferencia = $(this);
$(document).on("click", ".btn-abandonar-sala", function () {
botonAbandonarReferencia = $(this);
const esHost =
$(this).data("es-host") === true ||
$(this).data("es-host") === "true";
const esHost =
$(this).data("es-host") === true || $(this).data("es-host") === "true";
const titulo =
$("#modalAbandonarSalaLabel");
const titulo = $("#modalAbandonarSalaLabel");
const mensaje =
$("#modalAbandonarSalaMensaje");
const mensaje = $("#modalAbandonarSalaMensaje");
const botonConfirmar =
$("#btnConfirmarAbandonar");
const botonConfirmar = $("#btnConfirmarAbandonar");
if (esHost) {
titulo.text("¿Abandonar la sala?");
if (esHost) {
titulo.text("¿Abandonar la sala?");
mensaje.text(
"Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores."
);
botonConfirmar.text(
"Sí, terminar partida"
);
} else {
titulo.text("¿Abandonar la sala?");
mensaje.text(
"Si sales de la sala, perderás tu lugar en el equipo."
);
botonConfirmar.text("Sí, salir");
}
const modal = new bootstrap.Modal(
document.getElementById(
"modalAbandonarSala"
)
mensaje.text(
"Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores.",
);
modal.show();
botonConfirmar.text("Sí, terminar partida");
} else {
titulo.text("¿Abandonar la sala?");
mensaje.text("Si sales de la sala, perderás tu lugar en el equipo.");
botonConfirmar.text("Sí, salir");
}
);
const modal = new bootstrap.Modal(
document.getElementById("modalAbandonarSala"),
);
modal.show();
});
// =====================================================
// CONFIRMAR ABANDONAR SALA
// =====================================================
$(document).on(
"click",
"#btnConfirmarAbandonar",
function () {
const modalEl =
document.getElementById(
"modalAbandonarSala"
);
$(document).on("click", "#btnConfirmarAbandonar", function () {
const modalEl = document.getElementById("modalAbandonarSala");
const modalInstance =
bootstrap.Modal.getInstance(modalEl);
const modalInstance = bootstrap.Modal.getInstance(modalEl);
const btnConfirmar = $(this);
const btnConfirmar = $(this);
btnConfirmar
.prop("disabled", true)
.text("Saliendo...");
btnConfirmar.prop("disabled", true).text("Saliendo...");
$.ajax({
url: "controladores/controladorEquipoxUsuario.php",
type: "POST",
dataType: "json",
$.ajax({
url: "controladores/controladorEquipoxUsuario.php",
type: "POST",
dataType: "json",
data: {
orden: "salirDeSala",
},
data: {
orden: "salirDeSala",
},
success: function (respuesta) {
btnConfirmar
.prop("disabled", false)
.text("Sí, salir");
success: function (respuesta) {
btnConfirmar.prop("disabled", false).text("Sí, salir");
if (modalInstance) {
modalInstance.hide();
}
if (modalInstance) {
modalInstance.hide();
}
if (respuesta.error) {
alert(respuesta.error);
return;
}
if (respuesta.error) {
alert(respuesta.error);
return;
}
usuarioYaEstaEnEquipo = false;
usuarioYaEstaEnEquipo = false;
if (intervaloSala) {
clearInterval(intervaloSala);
intervaloSala = null;
}
if (intervaloSala) {
clearInterval(intervaloSala);
intervaloSala = null;
}
$("#contenedorCrearSala").show();
$("#contenedorCrearSala").show();
cargarSalas();
},
cargarSalas();
},
error: function (xhr, status, error) {
console.error(
"Error al salir de la sala:",
error
);
error: function (xhr, status, error) {
console.error("Error al salir de la sala:", error);
alert(
"No se pudo salir de la sala."
);
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();
}
},
});
}
);
if (modalInstance) {
modalInstance.hide();
}
},
});
});
// =====================================================
// AUXILIARES
@@ -581,29 +501,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 ${
@@ -619,9 +529,7 @@ function mostrarEquipos(
}
</span>
${escapeHTML(
jugador.nombreUsuario
)}
${escapeHTML(jugador.nombreUsuario)}
</div>
${
@@ -647,9 +555,7 @@ function mostrarEquipos(
<div class="equipo me-2 ms-2 p-3 border rounded">
<h6>
${escapeHTML(
equipo.nombreEquipo
)}
${escapeHTML(equipo.nombreEquipo)}
</h6>
<div class="jugadores mb-2">
@@ -660,6 +566,5 @@ function mostrarEquipos(
`;
});
$("#contenedorSalas .equipos")
.html(equiposHTML);
$("#contenedorSalas .equipos").html(equiposHTML);
}