Ranking

2026-09-25 13:53:22 +02:00
parent 413d9552f2
commit 4e345fa01d
6 changed files with 138 additions and 2307 deletions
@@ -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;
+
+     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>
    <script src="js/jquery-4.0.0.min.js"></script>
    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
+
 </head>

 <body>
@@ -51,7 +52,7 @@ include 'cabecera.php';

    <!-- JS de Bootstrap -->
    <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>

 </html>
@@ -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();
+}