Ranking
This commit is contained in:
@@ -383,4 +383,37 @@ class Usuario
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static function obtenerRanking($limite = 10) {
|
||||||
|
try {
|
||||||
|
$conexion = conexionBD();
|
||||||
|
|
||||||
|
if (is_array($conexion)) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$sql = "SELECT
|
||||||
|
idUsuario,
|
||||||
|
nombreUsuario,
|
||||||
|
avatar,
|
||||||
|
aciertos,
|
||||||
|
victorias,
|
||||||
|
derrotas,
|
||||||
|
CASE
|
||||||
|
WHEN (victorias + derrotas) > 0
|
||||||
|
THEN ROUND((victorias / (victorias + derrotas)) * 100, 0)
|
||||||
|
ELSE 0
|
||||||
|
END AS porcentajeVictoria
|
||||||
|
FROM usuario
|
||||||
|
ORDER BY victorias DESC, aciertos DESC
|
||||||
|
LIMIT " . (int)$limite;
|
||||||
|
|
||||||
|
$stmt = $conexion->prepare($sql);
|
||||||
|
$stmt->execute();
|
||||||
|
return $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -221,4 +221,12 @@ switch ($_POST['orden']) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case 'obtenerRanking':
|
||||||
|
$ranking = Usuario::obtenerRanking(5); //Cambiar para mostrar X jugadores en index
|
||||||
|
echo json_encode([
|
||||||
|
'exito' => true,
|
||||||
|
'ranking' => $ranking
|
||||||
|
]);
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ include 'cabecera.php';
|
|||||||
<title>Triviagmático</title>
|
<title>Triviagmático</title>
|
||||||
<script src="js/jquery-4.0.0.min.js"></script>
|
<script src="js/jquery-4.0.0.min.js"></script>
|
||||||
<link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
|
<link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -51,7 +52,7 @@ include 'cabecera.php';
|
|||||||
|
|
||||||
<!-- JS de Bootstrap -->
|
<!-- JS de Bootstrap -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="js/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
+95
@@ -0,0 +1,95 @@
|
|||||||
|
$(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();
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user