web-next: página de jugadores /<slug>-players con datos reales de la BD

Extiende la ruta dinámica [realm] para servir también /<slug>-players (slug
del reino en realmlist). PlayersBoard (server) consulta acore_characters:
- Personajes creados por clase (conteo por clase y facción) + totales.
- Top de muertes con honor (characters.totalKills/todayKills, LIMIT 10).
- Top de logros (nº de logros por personaje vía character_achievement;
  los «puntos» no existen en la BD del servidor, vienen del DBC del cliente).
- Primeros del reino - Nivel 80 (primer personaje por fecha del logro 20 =
  Nivel 80, overall/por clase/por raza; vacío si aún no hay nivel 80).
Imágenes reales del tema (nw-classes/nw-races/nw-icons). lib/players.ts con
los mapas de clase/raza/facción. RealmInfo extraído a su componente. Enlace
JUGADORES de la cabecera ahora dinámico (/<slug>-players), como REINO.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/components/Header.tsx

@@ -7,8 +7,10 @@ export async function Header() {
   const loggedIn = Boolean(session.username)
   // Django muestra bnet_email si existe, si no el username.
   const accountLabel = session.bnetEmail || session.username || ''
-  // Enlace al reino según el nombre en realmlist (p. ej. /trinity-realm).
-  const realmHref = `/${realmSlug(await getRealmName())}-realm`
+  // Enlaces al reino/jugadores según el nombre en realmlist (p. ej. /trinity-realm, /trinity-players).
+  const slug = realmSlug(await getRealmName())
+  const realmHref = `/${slug}-realm`
+  const playersHref = `/${slug}-players`
 
-  return <SiteHeader loggedIn={loggedIn} accountLabel={accountLabel} realmHref={realmHref} />
+  return <SiteHeader loggedIn={loggedIn} accountLabel={accountLabel} realmHref={realmHref} playersHref={playersHref} />
 }

web-next/components/PlayersBoard.tsx

@@ -0,0 +1,146 @@
+import {
+  getPlayersData,
+  CLASS_INFO,
+  raceBig,
+  classMedium,
+  classChest,
+  ALLIANCE_ICON,
+  HORDE_ICON,
+} from '@/lib/players'
+
+/* eslint-disable @next/next/no-img-element */
+
+export async function PlayersBoard() {
+  const data = await getPlayersData()
+
+  return (
+    <>
+      <div className="box-content">
+        <div className="body-box-content centered">
+          <p><i className="fas fa-exclamation-triangle"></i> La información de esta página se actualiza 1 vez al día automáticamente</p>
+        </div>
+      </div>
+
+      {/* Personajes creados por clase */}
+      <div className="box-content">
+        <div className="title-box-content centered"><h2>Personajes creados por clase</h2></div>
+        <div className="body-box-content centered">
+          <div className="show-players">
+            {data.classStats.map((s) => (
+              <div className="inline-div" key={s.id}>
+                <table className="players-table">
+                  <tbody>
+                    <tr><td><img className="img-med-icon chest-medium" src={classChest(s.id)} alt={CLASS_INFO[s.id].label} /></td></tr>
+                    <tr><td><span className={s.key}>Total: <span>{s.total}</span></span></td></tr>
+                    <tr><td><hr /></td></tr>
+                    <tr><td className="lefted"><img className="img-small-icon-m img-align" src={ALLIANCE_ICON} alt="Alianza" /> <span className={s.key}>Alianzas: <span>{s.alliance}</span></span></td></tr>
+                    <tr><td className="lefted"><img className="img-small-icon-m img-align" src={HORDE_ICON} alt="Horda" /> <span className={s.key}>Hordas: <span>{s.horde}</span></span></td></tr>
+                  </tbody>
+                </table>
+              </div>
+            ))}
+            <table className="max-center-table2">
+              <tbody>
+                <tr>
+                  <td>Personajes totales: <span>{data.totals.total}</span></td>
+                  <td><span className="alliance-color">Personajes alianzas:</span> <span>{data.totals.alliance}</span></td>
+                  <td><span className="horde-color">Personajes hordas:</span> <span>{data.totals.horde}</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <br /><hr /><br />
+
+      {/* Primeros del Reino - Nivel 80 */}
+      <div className="box-content">
+        <div className="title-box-content centered"><h2>Primeros del Reino - Nivel 80</h2></div>
+        <div className="body-box-content justified">
+          {data.firsts.length === 0 ? (
+            <p className="centered second-brown">Aún no hay personajes de nivel 80 registrados.</p>
+          ) : (
+            <table className="max-left-table2">
+              <tbody>
+                <tr>
+                  <th>Logro</th>
+                  <th>Personaje</th>
+                  <th className="responsive-td">Fecha</th>
+                </tr>
+                {data.firsts.map((f, i) => (
+                  <tr key={i}>
+                    <td>
+                      <img className="img-small-icon img-small-icon-h img-align" src={f.icon} alt="" />{' '}
+                      <span className="yellow-info"><span className="yellow-info responsive-td">¡Primero del reino!</span><span className="yellow-info"> {f.label}</span></span>
+                    </td>
+                    <td className={`${f.classKey} big-font`}>{f.name}</td>
+                    <td className="responsive-td"><span>{f.date}</span></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+
+      <br /><hr /><br />
+
+      {/* Top de logros */}
+      <div className="box-content">
+        <div className="title-box-content centered"><h2>Top de logros</h2></div>
+        <div className="body-box-content centered">
+          <p>Los 10 jugadores con más logros</p>
+          <table className="char-center-table">
+            <tbody>
+              <tr>
+                <th>Nombre</th>
+                <th>Raza</th>
+                <th>Clase</th>
+                <th>Logros</th>
+              </tr>
+              {data.topAch.map((r, i) => (
+                <tr key={i}>
+                  <td className={`${r.classKey} big-font`}>{r.name}</td>
+                  <td><img className="img-small-icon img-small-icon-h" src={raceBig(r.race, 0)} alt="" /></td>
+                  <td><img className="img-small-icon img-small-icon-h" src={classMedium(r.class)} alt="" /></td>
+                  <td><span>{r.value}</span></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <br /><hr /><br />
+
+      {/* Top de muertes con honor */}
+      <div className="box-content">
+        <div className="title-box-content centered"><h2>Top de muertes con honor</h2></div>
+        <div className="body-box-content centered">
+          <p>Los 10 jugadores con más muertes con honor</p>
+          <table className="char-center-table">
+            <tbody>
+              <tr>
+                <th>Nombre</th>
+                <th>Raza</th>
+                <th>Clase</th>
+                <th>Total de muertes</th>
+                <th>Total de muertes hoy</th>
+              </tr>
+              {data.topHonor.map((r, i) => (
+                <tr key={i}>
+                  <td className={`${r.classKey} big-font`}>{r.name}</td>
+                  <td><img className="img-small-icon img-small-icon-h" src={raceBig(r.race, 0)} alt="" /></td>
+                  <td><img className="img-small-icon img-small-icon-h" src={classMedium(r.class)} alt="" /></td>
+                  <td><span>{r.total}</span></td>
+                  <td><span>{r.today}</span></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  )
+}

web-next/components/RealmInfo.tsx

@@ -0,0 +1,29 @@
+/** Información del reino (Rates + Horarios) — contenido de /<slug>-realm. */
+export function RealmInfo() {
+  return (
+    <div className="box-content centered">
+      <div className="realm-information realm-information-half">
+        <h2>Rates</h2>
+        <p>Experiencia: <span>x8 modificable con .xp (Con Recluta a un Amigo x16)</span></p>
+        <p>Drop de objetos verdes y azules: <span>x4</span></p>
+        <p>Drop de oro en NPCs: <span>x2</span></p>
+        <p>Drop de oro en misiones: <span>x1</span></p>
+        <p>Habilidades: <span>x3</span></p>
+        <p>Profesiones: <span>x3</span></p>
+        <p>Reputaciones: <span>x3 (Bonus con Recluta a un amigo)</span></p>
+        <p>Honor: <span>x3</span></p>
+      </div>
+      <div className="realm-information realm-information-half">
+        <h2>Horarios</h2>
+        <p>Los siguientes horarios son basados en la hora del reino.</p>
+        <br />
+        <p>Misiones diarias: <span>7 am</span></p>
+        <p>Reinicio de mazmorras diarias: <span>9 am</span></p>
+        <p>Reinicio de bandas: <span>9 am (Miércoles)</span></p>
+        <p>Campos de Batalla: <span>10 am</span></p>
+        <p>Reparto de Puntos de Arena: <span>11 am (Viernes)</span></p>
+        <br />
+      </div>
+    </div>
+  )
+}

web-next/components/SiteHeader.tsx

@@ -17,10 +17,12 @@ export function SiteHeader({
   loggedIn,
   accountLabel,
   realmHref,
+  playersHref,
 }: {
   loggedIn: boolean
   accountLabel: string
   realmHref: string
+  playersHref: string
 }) {
   const router = useRouter()
   const [open, setOpen] = useState(false)
@@ -89,7 +91,7 @@ export function SiteHeader({
               </p>
               {loggedIn && (
                 <p>
-                  <a href="/novawow-players">JUGADORES</a>
+                  <a href={playersHref}>JUGADORES</a>
                 </p>
               )}
             </div>