dagarcos
/
PSIM-master


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!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>