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/app/[locale]/[realm]/page.tsx

@@ -2,14 +2,22 @@ import type { Metadata } from 'next'
 import { setRequestLocale } from 'next-intl/server'
 import { notFound } from 'next/navigation'
 import { getRealmName, realmSlug } from '@/lib/realm'
+import { RealmInfo } from '@/components/RealmInfo'
+import { PlayersBoard } from '@/components/PlayersBoard'
 
 export const dynamic = 'force-dynamic'
 
-// Ruta dinámica del reino: /<slug>-realm, donde <slug> viene del nombre del
-// reino en acore_auth.realmlist (p. ej. «Trinity» → /trinity-realm).
-async function resolveRealm(param: string): Promise<string | null> {
+type Kind = 'realm' | 'players'
+
+// Rutas dinámicas del reino (el slug viene de acore_auth.realmlist):
+//   /<slug>-realm    → información del reino (Rates/Horarios)
+//   /<slug>-players  → estadísticas de personajes (datos reales de la BD)
+async function resolve(param: string): Promise<{ name: string; kind: Kind } | null> {
   const name = await getRealmName()
-  return param === `${realmSlug(name)}-realm` ? name : null
+  const slug = realmSlug(name)
+  if (param === `${slug}-realm`) return { name, kind: 'realm' }
+  if (param === `${slug}-players`) return { name, kind: 'players' }
+  return null
 }
 
 export async function generateMetadata({
@@ -18,8 +26,9 @@ export async function generateMetadata({
   params: Promise<{ realm: string }>
 }): Promise<Metadata> {
   const { realm } = await params
-  const name = await resolveRealm(realm)
-  return name ? { title: `Reino - ${name}` } : {}
+  const r = await resolve(realm)
+  if (!r) return {}
+  return { title: `${r.kind === 'players' ? 'Personajes' : 'Reino'} - ${r.name}` }
 }
 
 export default async function RealmPage({
@@ -29,40 +38,19 @@ export default async function RealmPage({
 }) {
   const { locale, realm } = await params
   setRequestLocale(locale)
-  const name = await resolveRealm(realm)
-  if (!name) notFound()
+  const r = await resolve(realm)
+  if (!r) notFound()
+
+  const heading = r.kind === 'players' ? 'Personajes' : 'Reino'
 
   return (
     <div className="main-page">
       <div className="middle-content">
         <div className="body-content">
           <div className="title-content">
-            <h1>Reino - <span className="blue-info">{name.toUpperCase()}</span></h1>
-          </div>
-          <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>
+            <h1>{heading} - <span className="blue-info">{r.name.toUpperCase()}</span></h1>
           </div>
+          {r.kind === 'realm' ? <RealmInfo /> : <PlayersBoard />}
         </div>
       </div>
     </div>

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>

web-next/lib/players.ts

@@ -0,0 +1,139 @@
+import type { RowDataPacket } from 'mysql2'
+import { db, DB } from './db'
+
+const IMG = '/nw-themes/nw-ryu/nw-images'
+
+// Clases (orden del original) → slug de color + etiqueta.
+export const CLASS_ORDER = [1, 2, 3, 4, 5, 6, 7, 8, 9, 11]
+export const CLASS_INFO: Record<number, { key: string; label: string }> = {
+  1: { key: 'warrior', label: 'Guerrero' },
+  2: { key: 'paladin', label: 'Paladín' },
+  3: { key: 'hunter', label: 'Cazador' },
+  4: { key: 'rogue', label: 'Pícaro' },
+  5: { key: 'priest', label: 'Sacerdote' },
+  6: { key: 'death-knight', label: 'C. de la M.' },
+  7: { key: 'shaman', label: 'Chamán' },
+  8: { key: 'mage', label: 'Mago' },
+  9: { key: 'warlock', label: 'Brujo' },
+  11: { key: 'druid', label: 'Druida' },
+}
+// Razas → slug + etiqueta + facción. Orden del original para «Primeros del reino».
+export const RACE_ORDER = [7, 10, 11, 3, 1, 4, 2, 6, 8, 5]
+export const RACE_INFO: Record<number, { key: string; label: string; faction: 'alliance' | 'horde' }> = {
+  1: { key: 'human', label: 'Humano', faction: 'alliance' },
+  2: { key: 'orc', label: 'Orco', faction: 'horde' },
+  3: { key: 'dwarf', label: 'Enano', faction: 'alliance' },
+  4: { key: 'night-elf', label: 'Elfo de la noche', faction: 'alliance' },
+  5: { key: 'undead', label: 'No-muerto', faction: 'horde' },
+  6: { key: 'tauren', label: 'Tauren', faction: 'horde' },
+  7: { key: 'gnome', label: 'Gnomo', faction: 'alliance' },
+  8: { key: 'troll', label: 'Trol', faction: 'horde' },
+  10: { key: 'blood-elf', label: 'Elfo de sangre', faction: 'horde' },
+  11: { key: 'draenei', label: 'Draenei', faction: 'alliance' },
+}
+
+export function classChest(id: number) {
+  return `${IMG}/nw-classes/${CLASS_INFO[id]?.key ?? 'warrior'}-chest.webp`
+}
+export function classMedium(id: number) {
+  return `${IMG}/nw-classes/${CLASS_INFO[id]?.key ?? 'warrior'}-medium.jpg`
+}
+export function raceBig(race: number, gender: number) {
+  return `${IMG}/nw-races/big-${RACE_INFO[race]?.key ?? 'human'}-${gender === 0 ? 'male' : 'female'}.webp`
+}
+export const ALLIANCE_ICON = `${IMG}/nw-icons/alliance-no-border.webp`
+export const HORDE_ICON = `${IMG}/nw-icons/horde-no-border.webp`
+export const ACH80_ICON = `${IMG}/nw-icons/achievement-level-80.jpg`
+
+// Logro de «Nivel 80» (secuencia estándar de logros de nivel de WotLK: 6=10 … 20=80).
+const ACH_LEVEL80 = 20
+
+export interface ClassStat { id: number; key: string; total: number; alliance: number; horde: number }
+export interface FirstEntry { icon: string; label: string; name: string; classKey: string; date: string }
+export interface AchRow { name: string; race: number; class: number; classKey: string; value: number }
+export interface HonorRow { name: string; race: number; class: number; classKey: string; total: number; today: number }
+
+export interface PlayersData {
+  classStats: ClassStat[]
+  totals: { total: number; alliance: number; horde: number }
+  firsts: FirstEntry[]
+  topAch: AchRow[]
+  topHonor: HonorRow[]
+}
+
+function fmtTs(ts: number): string {
+  const d = new Date(ts * 1000)
+  const p = (n: number) => String(n).padStart(2, '0')
+  return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())} ${p(d.getDate())}-${p(d.getMonth() + 1)}-${d.getFullYear()}`
+}
+
+export async function getPlayersData(): Promise<PlayersData> {
+  const c = db(DB.characters)
+
+  // 1) Personajes creados por clase (y facción).
+  const classStats: ClassStat[] = CLASS_ORDER.map((id) => ({ id, key: CLASS_INFO[id].key, total: 0, alliance: 0, horde: 0 }))
+  const totals = { total: 0, alliance: 0, horde: 0 }
+  try {
+    const [rows] = await c.query<RowDataPacket[]>('SELECT class, race, COUNT(*) AS n FROM characters GROUP BY class, race')
+    for (const r of rows) {
+      const stat = classStats.find((s) => s.id === r.class)
+      const n = Number(r.n)
+      const faction = RACE_INFO[r.race]?.faction
+      totals.total += n
+      if (faction === 'alliance') totals.alliance += n
+      else if (faction === 'horde') totals.horde += n
+      if (stat) {
+        stat.total += n
+        if (faction === 'alliance') stat.alliance += n
+        else if (faction === 'horde') stat.horde += n
+      }
+    }
+  } catch { /* BD de personajes puede no estar poblada */ }
+
+  // 2) Primeros del reino - Nivel 80 (logro 20, por fecha).
+  const firsts: FirstEntry[] = []
+  try {
+    const [rows] = await c.query<RowDataPacket[]>(
+      `SELECT ca.date AS date, ch.name AS name, ch.class AS class, ch.race AS race, ch.gender AS gender
+       FROM character_achievement ca JOIN characters ch ON ch.guid = ca.guid
+       WHERE ca.achievement = ? ORDER BY ca.date ASC`,
+      [ACH_LEVEL80],
+    )
+    if (rows.length) {
+      const overall = rows[0]
+      firsts.push({ icon: ACH80_ICON, label: 'Nivel 80', name: overall.name, classKey: CLASS_INFO[overall.class]?.key ?? '', date: fmtTs(Number(overall.date)) })
+      // Primero por clase.
+      for (const id of CLASS_ORDER) {
+        const row = rows.find((r) => r.class === id)
+        if (row) firsts.push({ icon: classMedium(id), label: `${CLASS_INFO[id].label} nivel 80`, name: row.name, classKey: CLASS_INFO[id].key, date: fmtTs(Number(row.date)) })
+      }
+      // Primero por raza.
+      for (const race of RACE_ORDER) {
+        const row = rows.find((r) => r.race === race)
+        if (row) firsts.push({ icon: raceBig(race, Number(row.gender)), label: `${RACE_INFO[race].label} nivel 80`, name: row.name, classKey: CLASS_INFO[row.class]?.key ?? '', date: fmtTs(Number(row.date)) })
+      }
+    }
+  } catch { /* ignore */ }
+
+  // 3) Top de logros (nº de logros; los «puntos» no están en la BD del servidor).
+  let topAch: AchRow[] = []
+  try {
+    const [rows] = await c.query<RowDataPacket[]>(
+      `SELECT ch.name AS name, ch.race AS race, ch.class AS class, COUNT(*) AS n
+       FROM character_achievement ca JOIN characters ch ON ch.guid = ca.guid
+       GROUP BY ca.guid, ch.name, ch.race, ch.class ORDER BY n DESC LIMIT 10`,
+    )
+    topAch = rows.map((r) => ({ name: r.name, race: r.race, class: r.class, classKey: CLASS_INFO[r.class]?.key ?? '', value: Number(r.n) }))
+  } catch { /* ignore */ }
+
+  // 4) Top de muertes con honor.
+  let topHonor: HonorRow[] = []
+  try {
+    const [rows] = await c.query<RowDataPacket[]>(
+      'SELECT name, race, class, totalKills, todayKills FROM characters ORDER BY totalKills DESC LIMIT 10',
+    )
+    topHonor = rows.map((r) => ({ name: r.name, race: r.race, class: r.class, classKey: CLASS_INFO[r.class]?.key ?? '', total: Number(r.totalKills), today: Number(r.todayKills) }))
+  } catch { /* ignore */ }
+
+  return { classStats, totals, firsts, topAch, topHonor }
+}