|
|
@@ -0,0 +1,226 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="es">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <title>Shard Master - Control Panel</title>
|
|
|
+
|
|
|
+ <!-- Bootstrap CSS -->
|
|
|
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
|
+
|
|
|
+ <style>
|
|
|
+ body { background-color: #f5f6f8; }
|
|
|
+ .section-title { margin-top: 2rem; }
|
|
|
+ .heartbeat-badge { font-size: 0.8rem; }
|
|
|
+ .card-kpi { min-height: 90px; padding: 0.5rem; }
|
|
|
+ .card-kpi h6 { font-size: 0.85rem; margin-bottom: 0.25rem; }
|
|
|
+ .card-kpi h2 { font-size: 1.4rem; margin: 0; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="container my-4">
|
|
|
+
|
|
|
+ <h1 class="mb-4">Shard Master – Control Panel</h1>
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <!-- KPI ROW (COMPACT) -->
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <div class="row mb-3">
|
|
|
+ <div class="col-md-2">
|
|
|
+ <div class="card card-kpi text-bg-primary">
|
|
|
+ <div class="card-body text-center">
|
|
|
+ <h6>Shards</h6>
|
|
|
+ <h2 id="kpiTotalShards">–</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2">
|
|
|
+ <div class="card card-kpi text-bg-success">
|
|
|
+ <div class="card-body text-center">
|
|
|
+ <h6>Players</h6>
|
|
|
+ <h2 id="kpiTotalPlayers">–</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2">
|
|
|
+ <div class="card card-kpi text-bg-dark">
|
|
|
+ <div class="card-body text-center">
|
|
|
+ <h6>Events</h6>
|
|
|
+ <h2 id="kpiTotalEvents">–</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-2">
|
|
|
+ <div class="card card-kpi text-bg-warning">
|
|
|
+ <div class="card-body text-center">
|
|
|
+ <h6>Active</h6>
|
|
|
+ <h2 id="kpiActiveShards">–</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <!-- MAIN NAV TABS -->
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <ul class="nav nav-tabs" role="tablist">
|
|
|
+ <li class="nav-item">
|
|
|
+ <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabShards">Shards</button>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPlayers">Players</button>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabRankings">Rankings</button>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEvents">Events</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="tab-content border border-top-0 p-3 bg-white">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <!-- TAB: SHARDS -->
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <div class="tab-pane fade show active" id="tabShards">
|
|
|
+
|
|
|
+
|
|
|
+ <h2 class="section-title">Shards Overview</h2>
|
|
|
+
|
|
|
+
|
|
|
+ <table class="table table-striped table-hover">
|
|
|
+ <thead class="table-dark">
|
|
|
+ <tr>
|
|
|
+ <th>Shard</th>
|
|
|
+ <th>Name</th>
|
|
|
+ <th>Location</th>
|
|
|
+ <th>Status</th>
|
|
|
+ <th>Heartbeat</th>
|
|
|
+ <th>Events</th>
|
|
|
+ <th>Players</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="tableShards"></tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+
|
|
|
+ <h3 class="section-title">Shard Detail</h3>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-6">
|
|
|
+ <h6>Top Players (Shard)</h6>
|
|
|
+ <table class="table table-sm">
|
|
|
+ <thead><tr><th>Player</th><th>Score</th><th>Actions</th></tr></thead>
|
|
|
+ <tbody id="shardPlayers"></tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6">
|
|
|
+ <h6>Activity Snapshot</h6>
|
|
|
+ <div class="alert alert-light">
|
|
|
+ Gráfico temporal basado en <code>shard_world_snapshot</code>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <!-- TAB: PLAYERS -->
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <div class="tab-pane fade" id="tabPlayers">
|
|
|
+
|
|
|
+
|
|
|
+ <h2 class="section-title">Players (Global)</h2>
|
|
|
+
|
|
|
+
|
|
|
+ <table class="table table-striped">
|
|
|
+ <thead class="table-dark">
|
|
|
+ <tr>
|
|
|
+ <th>Player</th>
|
|
|
+ <th>Global Score</th>
|
|
|
+ <th>Shards</th>
|
|
|
+ <th>Actions</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="tablePlayers"></tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <!-- TAB: RANKINGS -->
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <div class="tab-pane fade" id="tabRankings">
|
|
|
+
|
|
|
+
|
|
|
+ <ul class="nav nav-pills mb-3">
|
|
|
+ <li class="nav-item">
|
|
|
+ <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#rankGlobal">Global</button>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <button class="nav-link" data-bs-toggle="pill" data-bs-target="#rankShard">By Shard</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-pane fade show active" id="rankGlobal">
|
|
|
+ Ranking global de jugadores (agregación multi‑shard)
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane fade" id="rankShard">
|
|
|
+ Ranking por shard usando <code>shard_player_stats</code>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <!-- TAB: EVENTS -->
|
|
|
+ <!-- ===================================================== -->
|
|
|
+ <div class="tab-pane fade" id="tabEvents">
|
|
|
+
|
|
|
+
|
|
|
+ <h2 class="section-title">Event Explorer</h2>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="alert alert-info mb-2">
|
|
|
+ Vista paginada y filtrable de <code>master_events</code>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <table class="table table-sm table-hover">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Time</th>
|
|
|
+ <th>Shard</th>
|
|
|
+ <th>Player</th>
|
|
|
+ <th>Action</th>
|
|
|
+ <th>Δ</th>
|
|
|
+ <th>Winner</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="tableEvents"></tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js
|
|
|
+</body>
|
dagarcos