Changes to cabecera & sala
This commit is contained in:
+110
-97
@@ -209,115 +209,89 @@ $.ajax({
|
||||
|
||||
function mostrarSala(partida, equipos, jugadores) {
|
||||
|
||||
const contenedor = $("#contenedorSalas");
|
||||
const contenedor = $("#contenedorSalas");
|
||||
let equiposHTML = "";
|
||||
|
||||
let equiposHTML = "";
|
||||
equipos.forEach(function (equipo) {
|
||||
|
||||
equipos.forEach(function (equipo) {
|
||||
|
||||
const jugadoresEquipo = jugadores.filter(function (jugador) {
|
||||
|
||||
return jugador.idEquipo == equipo.idEquipo;
|
||||
|
||||
});
|
||||
|
||||
let jugadoresHTML = "";
|
||||
|
||||
if (jugadoresEquipo.length > 0) {
|
||||
|
||||
jugadoresEquipo.forEach(function (jugador) {
|
||||
|
||||
jugadoresHTML += `
|
||||
<div class="jugador">
|
||||
|
||||
<span class="avatar">
|
||||
👤
|
||||
</span>
|
||||
|
||||
${escapeHTML(jugador.nombreUsuario)}
|
||||
|
||||
</div>
|
||||
`;
|
||||
const jugadoresEquipo = jugadores.filter(function (jugador) {
|
||||
return jugador.idEquipo == equipo.idEquipo;
|
||||
});
|
||||
|
||||
} else {
|
||||
let jugadoresHTML = "";
|
||||
|
||||
jugadoresHTML = `
|
||||
<div class="text-muted small">
|
||||
Sin jugadores
|
||||
if (jugadoresEquipo.length > 0) {
|
||||
jugadoresEquipo.forEach(function (jugador) {
|
||||
jugadoresHTML += `
|
||||
<div class="jugador">
|
||||
<span class="avatar">👤</span>
|
||||
${escapeHTML(jugador.nombreUsuario)}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else {
|
||||
jugadoresHTML = `
|
||||
<div class="text-muted small">Sin jugadores</div>
|
||||
`;
|
||||
}
|
||||
|
||||
let botonUnirseHTML = "";
|
||||
|
||||
if (!usuarioYaEstaEnEquipo) {
|
||||
botonUnirseHTML = `
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-unirse w-100 btn-unirse-equipo mt-2"
|
||||
data-id-partida="${partida.idPartida}"
|
||||
data-id-equipo="${equipo.idEquipo}">
|
||||
Unirse
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
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>
|
||||
`;
|
||||
});
|
||||
|
||||
// Zona de acciones adicionales si el usuario YA está dentro de esta sala
|
||||
let accionesSalaHTML = "";
|
||||
if (usuarioYaEstaEnEquipo) {
|
||||
accionesSalaHTML = `
|
||||
<div class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
|
||||
<button type="button" class="btn btn-outline-danger btn-abandonar-sala" data-id-partida="${partida.idPartida}">
|
||||
Abandonar sala
|
||||
</button>
|
||||
<a href="juego.php?idPartida=${partida.idPartida}" class="btn btn-success btn-lg px-4">
|
||||
🎮 ¡Iniciar Partida!
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
let botonUnirseHTML = "";
|
||||
|
||||
if (!usuarioYaEstaEnEquipo) {
|
||||
|
||||
botonUnirseHTML = `
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-unirse w-100 btn-unirse-equipo"
|
||||
data-id-partida="${partida.idPartida}"
|
||||
data-id-equipo="${equipo.idEquipo}">
|
||||
|
||||
Unirse
|
||||
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
equiposHTML += `
|
||||
<div class="equipo">
|
||||
|
||||
<h6>
|
||||
${escapeHTML(equipo.nombreEquipo)}
|
||||
</h6>
|
||||
|
||||
<div class="jugadores">
|
||||
|
||||
${jugadoresHTML}
|
||||
|
||||
const salaHTML = `
|
||||
<div class="col-12 col-md-10 col-lg-8">
|
||||
<div class="sala card p-3 shadow-sm">
|
||||
<div class="sala-header h4 text-center mb-3">
|
||||
${escapeHTML(partida.nombrePartida)}
|
||||
</div>
|
||||
<div class="sala-body">
|
||||
<div class="equipos d-flex justify-content-around">
|
||||
${equiposHTML}
|
||||
</div>
|
||||
${accionesSalaHTML}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${botonUnirseHTML}
|
||||
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
|
||||
const salaHTML = `
|
||||
<div class="col-12 col-md-10 col-lg-8">
|
||||
|
||||
<div class="sala">
|
||||
|
||||
<div class="sala-header">
|
||||
|
||||
${escapeHTML(partida.nombrePartida)}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sala-body">
|
||||
|
||||
<div class="equipos">
|
||||
|
||||
${equiposHTML}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
contenedor.append(salaHTML);
|
||||
|
||||
|
||||
contenedor.append(salaHTML);
|
||||
}
|
||||
|
||||
// ======================================================
|
||||
@@ -631,4 +605,43 @@ function () {
|
||||
}
|
||||
|
||||
|
||||
);
|
||||
);
|
||||
|
||||
|
||||
// ======================================================
|
||||
// ABANDONAR SALA
|
||||
// ======================================================
|
||||
$(document).on("click", ".btn-abandonar-sala", function () {
|
||||
if (!confirm("¿Estás seguro de que deseas salir de esta sala?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
const boton = $(this);
|
||||
boton.prop("disabled", true).text("Saliendo...");
|
||||
|
||||
$.ajax({
|
||||
url: "controladores/ControladorEquipoxUsuario.php",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
data: {
|
||||
orden: "salirDeSala" // Asegúrate de procesar esta 'orden' en tu PHP
|
||||
},
|
||||
success: function (respuesta) {
|
||||
if (respuesta.error) {
|
||||
alert(respuesta.error);
|
||||
boton.prop("disabled", false).text("Abandonar sala");
|
||||
return;
|
||||
}
|
||||
|
||||
// Restablecemos el estado y recargamos la lista completa de salas
|
||||
usuarioYaEstaEnEquipo = false;
|
||||
$("#contenedorCrearSala").show();
|
||||
cargarSalas();
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("Error al salir de la sala:", error);
|
||||
alert("No se pudo salir de la sala.");
|
||||
boton.prop("disabled", false).text("Abandonar sala");
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user