95 lines
3.8 KiB
JavaScript
95 lines
3.8 KiB
JavaScript
$(document).ready(function () {
|
|
cargarRanking();
|
|
});
|
|
|
|
function cargarRanking() {
|
|
$.ajax({
|
|
url: 'controladores/controladorUsuario.php',
|
|
type: 'POST',
|
|
data: { orden: 'obtenerRanking' },
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
if (response.exito && response.ranking.length > 0) {
|
|
renderizarTablaRanking(response.ranking);
|
|
} else {
|
|
$('#ranking-container').html(`
|
|
<div class="alert alert-info my-3">
|
|
<i class="fa-solid fa-info-circle me-2"></i>Aún no hay partidas registradas para mostrar el ranking.
|
|
</div>
|
|
`);
|
|
}
|
|
},
|
|
error: function () {
|
|
$('#ranking-container').html(`
|
|
<div class="alert alert-danger my-3">
|
|
<i class="fa-solid fa-exclamation-triangle me-2"></i>Error al cargar la clasificación.
|
|
</div>
|
|
`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderizarTablaRanking(jugadores) {
|
|
let html = `
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover align-middle mb-0 text-center">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col" style="width: 10%;">#</th>
|
|
<th scope="col" class="text-start" style="width: 35%;">Jugador</th>
|
|
<th scope="col" style="width: 15%;"><i class="fa-solid fa-trophy text-warning me-1"></i> Vic</th>
|
|
<th scope="col" style="width: 15%;"><i class="fa-solid fa-xmark text-danger me-1"></i> Der</th>
|
|
<th scope="col" style="width: 15%;"><i class="fa-solid fa-bullseye text-success me-1"></i> Aciertos</th>
|
|
<th scope="col" style="width: 10%;"><i class="fa-solid fa-percent text-info me-1"></i> % Vic</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
jugadores.forEach((jugador, index) => {
|
|
let posicion = index + 1;
|
|
let medalla = '';
|
|
|
|
// Medallas para el Top 3
|
|
if (posicion === 1) {
|
|
medalla = '<i class="fa-solid fa-medal text-warning fa-lg" title="1º Puesto"></i>';
|
|
} else if (posicion === 2) {
|
|
medalla = '<i class="fa-solid fa-medal text-secondary fa-lg" title="2º Puesto"></i>';
|
|
} else if (posicion === 3) {
|
|
medalla = '<i class="fa-solid fa-medal text-brown fa-lg" style="color: #cd7f32;" title="3º Puesto"></i>';
|
|
} else {
|
|
medalla = `<span class="fw-bold text-muted">${posicion}</span>`;
|
|
}
|
|
|
|
let avatarImg = jugador.avatar ? jugador.avatar : 'img/avatars/defaultProfile.jpeg';
|
|
|
|
html += `
|
|
<tr>
|
|
<td class="fw-bold fs-5">${medalla}</td>
|
|
<td class="text-start fw-bold">
|
|
<img src="${avatarImg}" alt="Avatar" class="rounded-circle me-2 border" style="width: 32px; height: 32px; object-fit: cover;">
|
|
${escapeHtml(jugador.nombreUsuario)}
|
|
</td>
|
|
<td><span class="badge bg-success rounded-pill px-3 py-2 fs-6">${jugador.victorias}</span></td>
|
|
<td><span class="badge bg-danger rounded-pill px-3 py-2 fs-6">${jugador.derrotas}</span></td>
|
|
<td class="fw-bold text-primary fs-6">${jugador.aciertos}</td>
|
|
<td>
|
|
<span class="badge bg-info text-dark rounded-pill px-2 py-1">${jugador.porcentajeVictoria}%</span>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += `
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
|
|
$('#ranking-container').removeClass('text-center p-4 ranking-placeholder').html(html);
|
|
}
|
|
|
|
|
|
function escapeHtml(texto) {
|
|
return $('<div>').text(texto).html();
|
|
} |