678 lines
14 KiB
JavaScript
678 lines
14 KiB
JavaScript
// =====================================================
|
|
// 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",
|
|
dataType: "json",
|
|
|
|
data: {
|
|
orden: "listar",
|
|
},
|
|
|
|
success: function (partidas) {
|
|
const contenedor = $("#contenedorSalas");
|
|
|
|
// =================================================
|
|
// NO HAY SALAS
|
|
// =================================================
|
|
|
|
if (
|
|
!Array.isArray(partidas) ||
|
|
partidas.length === 0
|
|
) {
|
|
// 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;
|
|
}
|
|
|
|
|
|
// =================================================
|
|
// 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);
|
|
});
|
|
},
|
|
|
|
error: function (xhr, status, error) {
|
|
console.error(
|
|
"Error al obtener las partidas:",
|
|
error
|
|
);
|
|
},
|
|
|
|
complete: function () {
|
|
cargandoSalas = false;
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// CARGAR INFORMACIÓN DE UNA SALA
|
|
// =====================================================
|
|
|
|
function cargarSalaBuscador(partida) {
|
|
$.ajax({
|
|
url: "controladores/controladorPartida.php",
|
|
type: "POST",
|
|
dataType: "json",
|
|
|
|
data: {
|
|
orden: "getEquipos",
|
|
idPartida: partida.idPartida,
|
|
},
|
|
|
|
success: function (equipos) {
|
|
$.ajax({
|
|
url: "controladores/controladorPartida.php",
|
|
type: "POST",
|
|
dataType: "json",
|
|
|
|
data: {
|
|
orden: "getJugadores",
|
|
idPartida: partida.idPartida,
|
|
},
|
|
|
|
success: function (jugadores) {
|
|
actualizarSalaBuscador(
|
|
partida,
|
|
equipos,
|
|
jugadores
|
|
);
|
|
},
|
|
|
|
error: function (xhr, status, error) {
|
|
console.error(
|
|
"Error al obtener jugadores:",
|
|
error
|
|
);
|
|
},
|
|
});
|
|
},
|
|
|
|
error: function (xhr, status, error) {
|
|
console.error(
|
|
"Error al obtener equipos:",
|
|
error
|
|
);
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// ACTUALIZAR UNA SALA
|
|
// =====================================================
|
|
|
|
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) {
|
|
// -----------------------------------------------
|
|
// JUGADORES DE ESTE EQUIPO
|
|
// -----------------------------------------------
|
|
|
|
const jugadoresEquipo =
|
|
jugadores.filter(
|
|
function (jugador) {
|
|
return (
|
|
jugador.idEquipo ==
|
|
equipo.idEquipo
|
|
);
|
|
}
|
|
);
|
|
|
|
|
|
let jugadoresHTML = "";
|
|
|
|
|
|
// -----------------------------------------------
|
|
// MOSTRAR JUGADORES
|
|
// -----------------------------------------------
|
|
|
|
if (jugadoresEquipo.length > 0) {
|
|
jugadoresEquipo.forEach(
|
|
function (jugador) {
|
|
const esHost =
|
|
jugador.idUsuario ==
|
|
partida.idUsuario;
|
|
|
|
|
|
jugadoresHTML += `
|
|
<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">
|
|
|
|
HOST
|
|
|
|
</span>
|
|
`
|
|
: ""
|
|
}
|
|
|
|
</div>
|
|
`;
|
|
}
|
|
);
|
|
} else {
|
|
jugadoresHTML = `
|
|
<div class="text-muted small">
|
|
Sin jugadores
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
|
|
// -----------------------------------------------
|
|
// 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
|
|
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
|
|
// -----------------------------------------------
|
|
// EQUIPO
|
|
// -----------------------------------------------
|
|
|
|
equiposHTML += `
|
|
<div
|
|
class="equipo me-2 ms-2 p-3 border rounded">
|
|
|
|
<h6>
|
|
${escapeHTML(
|
|
equipo.nombreEquipo
|
|
)}
|
|
</h6>
|
|
|
|
<div class="jugadores mb-2">
|
|
|
|
${jugadoresHTML}
|
|
|
|
</div>
|
|
|
|
${botonUnirseHTML}
|
|
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
|
|
return equiposHTML;
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// CREAR SALA
|
|
// =====================================================
|
|
|
|
$("#btnCrearSala").on(
|
|
"click",
|
|
function () {
|
|
const nombreSala =
|
|
$("#nombreSala").val().trim();
|
|
|
|
const nombreEquipo1 =
|
|
$("#nombreEquipo1").val().trim();
|
|
|
|
const nombreEquipo2 =
|
|
$("#nombreEquipo2").val().trim();
|
|
|
|
|
|
let valido = true;
|
|
|
|
|
|
// -----------------------------------------------
|
|
// LIMPIAR ERRORES
|
|
// -----------------------------------------------
|
|
|
|
$(".mensaje-error-sala").remove();
|
|
|
|
$(".input-kahoot")
|
|
.removeClass("is-invalid");
|
|
|
|
|
|
// -----------------------------------------------
|
|
// VALIDAR NOMBRE DE SALA
|
|
// -----------------------------------------------
|
|
|
|
if (
|
|
nombreSala === "" ||
|
|
nombreSala.length < 3
|
|
) {
|
|
mostrarError(
|
|
"#nombreSala",
|
|
"El nombre de la sala debe tener al menos 3 caracteres."
|
|
);
|
|
|
|
valido = false;
|
|
}
|
|
|
|
|
|
// -----------------------------------------------
|
|
// VALIDAR EQUIPO 1
|
|
// -----------------------------------------------
|
|
|
|
if (
|
|
nombreEquipo1 === "" ||
|
|
nombreEquipo1.length < 2
|
|
) {
|
|
mostrarError(
|
|
"#nombreEquipo1",
|
|
"El nombre del equipo debe tener al menos 2 caracteres."
|
|
);
|
|
|
|
valido = false;
|
|
}
|
|
|
|
|
|
// -----------------------------------------------
|
|
// VALIDAR EQUIPO 2
|
|
// -----------------------------------------------
|
|
|
|
if (
|
|
nombreEquipo2 === "" ||
|
|
nombreEquipo2.length < 2
|
|
) {
|
|
mostrarError(
|
|
"#nombreEquipo2",
|
|
"El nombre del equipo debe tener al menos 2 caracteres."
|
|
);
|
|
|
|
valido = false;
|
|
}
|
|
|
|
|
|
// -----------------------------------------------
|
|
// COMPROBAR NOMBRES IGUALES
|
|
// -----------------------------------------------
|
|
|
|
if (
|
|
nombreEquipo1 !== "" &&
|
|
nombreEquipo2 !== "" &&
|
|
nombreEquipo1.toLowerCase() ===
|
|
nombreEquipo2.toLowerCase()
|
|
) {
|
|
mostrarError(
|
|
"#nombreEquipo2",
|
|
"Los dos equipos deben tener nombres diferentes."
|
|
);
|
|
|
|
valido = false;
|
|
}
|
|
|
|
|
|
// -----------------------------------------------
|
|
// SI HAY ERRORES
|
|
// -----------------------------------------------
|
|
|
|
if (!valido) {
|
|
return;
|
|
}
|
|
|
|
|
|
// -----------------------------------------------
|
|
// BOTÓN
|
|
// -----------------------------------------------
|
|
|
|
const boton = $("#btnCrearSala");
|
|
|
|
boton
|
|
.prop("disabled", true)
|
|
.text("Creando sala...");
|
|
|
|
|
|
// -----------------------------------------------
|
|
// PETICIÓN
|
|
// -----------------------------------------------
|
|
|
|
$.ajax({
|
|
url: "controladores/controladorPartida.php",
|
|
type: "POST",
|
|
dataType: "json",
|
|
|
|
data: {
|
|
orden: "crear",
|
|
|
|
nombrePartida: nombreSala,
|
|
|
|
nombreEquipo1: nombreEquipo1,
|
|
|
|
nombreEquipo2: nombreEquipo2,
|
|
},
|
|
|
|
success: function (respuesta) {
|
|
if (respuesta.error) {
|
|
alert(respuesta.error);
|
|
|
|
boton
|
|
.prop("disabled", false)
|
|
.text("Crear sala");
|
|
|
|
return;
|
|
}
|
|
|
|
|
|
if (respuesta.exito) {
|
|
$("#modalCrearSala").modal(
|
|
"hide"
|
|
);
|
|
|
|
location.reload();
|
|
}
|
|
},
|
|
|
|
error: function (xhr, status, error) {
|
|
console.error(
|
|
"Error al crear la sala:",
|
|
error
|
|
);
|
|
|
|
alert(
|
|
"No se ha podido crear la sala."
|
|
);
|
|
|
|
boton
|
|
.prop("disabled", false)
|
|
.text("Crear sala");
|
|
},
|
|
});
|
|
}
|
|
);
|
|
|
|
|
|
// =====================================================
|
|
// MOSTRAR ERROR
|
|
// =====================================================
|
|
|
|
function mostrarError(
|
|
selector,
|
|
mensaje
|
|
) {
|
|
const input = $(selector);
|
|
|
|
input.addClass("is-invalid");
|
|
|
|
input.after(`
|
|
<div
|
|
class="mensaje-error-sala text-danger mt-1 small">
|
|
|
|
${mensaje}
|
|
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// LIMPIAR ERRORES AL ESCRIBIR
|
|
// =====================================================
|
|
|
|
$(document).on(
|
|
"input",
|
|
".input-kahoot",
|
|
function () {
|
|
$(this)
|
|
.removeClass("is-invalid");
|
|
|
|
$(this)
|
|
.next(".mensaje-error-sala")
|
|
.remove();
|
|
}
|
|
); |