Personajes: zona, raza/clase e imagen en el panel de cuenta

- lib/data/zone-names.json: ZONE_NAMES (9156 zonas) exportado de zone_definitions.py.
- lib/character-info.ts: getZoneName, getClassCss/getClassName, getRaceName y
  getCharacterImage (raza/clase/género -> /races/big-*.webp, con validación de
  compatibilidad clase-raza y fallback unknown), portado de account.py.
- lib/account.ts: Character enriquecido (race, class, zone, imageUrl, class/raceName).
- account page: tarjetas con imagen de raza, color de clase WoW, nivel, raza/clase,
  📍 zona y oro. globals.css: colores de clase (.class-*).
- public/races: 20 imágenes de raza del tema + unknown.webp.

Verificado: build OK, imágenes 200, /account 307→login. El JSON de zonas se usa
solo en servidor (no infla el bundle cliente).

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

web-next/app/[locale]/account/page.tsx

@@ -59,12 +59,27 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
         ) : (
           <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
             {data.characters.map((c) => (
-              <div key={c.name} className={card}>
-                <p className="font-semibold text-amber-400">{c.name}</p>
-                <p className="text-sm">{t('level')} {c.level}</p>
-                <p className="text-sm text-amber-200/70">
-                  {c.gold}g {c.silver}s {c.copper}c
-                </p>
+              <div key={c.name} className={`${card} flex gap-3`}>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={c.imageUrl}
+                  alt={c.raceName}
+                  className="h-16 w-16 shrink-0 rounded-md object-cover ring-1 ring-nw-border/60"
+                  loading="lazy"
+                />
+                <div className="min-w-0">
+                  <p className={`truncate font-semibold class-${c.classCss}`}>{c.name}</p>
+                  <p className="text-xs text-nw-muted">
+                    {t('level')} {c.level} · {c.raceName} {c.className}
+                  </p>
+                  <p className="mt-1 flex items-center gap-1 text-xs text-amber-200/70" title={c.zone}>
+                    <span aria-hidden>📍</span>
+                    <span className="truncate">{c.zone}</span>
+                  </p>
+                  <p className="text-xs text-amber-200/60">
+                    {c.gold}g {c.silver}s {c.copper}c
+                  </p>
+                </div>
               </div>
             ))}
           </div>

web-next/app/globals.css

@@ -48,3 +48,16 @@ body {
 .prose :where(a) {
   color: #7cc0f7;
 }
+
+/* Colores de clase de WoW (nombre de personaje) */
+.class-warrior { color: #c79c6e; }
+.class-paladin { color: #f58cba; }
+.class-hunter { color: #abd473; }
+.class-rogue { color: #fff569; }
+.class-priest { color: #ffffff; }
+.class-death-knight { color: #c41f3b; }
+.class-shaman { color: #0070de; }
+.class-mage { color: #69ccf0; }
+.class-warlock { color: #9482c9; }
+.class-druid { color: #ff7d0a; }
+.class-unknown { color: #f0b100; }

web-next/lib/account.ts

@@ -1,6 +1,7 @@
 import type { RowDataPacket } from 'mysql2'
 import { db, DB } from './db'
 import type { SessionData } from './session'
+import { getZoneName, getClassCss, getCharacterImage, getRaceName, getClassName } from './character-info'
 
 export interface Character {
   name: string
@@ -8,6 +9,13 @@ export interface Character {
   gold: number
   silver: number
   copper: number
+  race: number
+  classId: number
+  className: string
+  raceName: string
+  classCss: string
+  zone: string
+  imageUrl: string
 }
 
 export interface AccountDashboard {
@@ -64,7 +72,7 @@ export async function getAccountDashboard(session: SessionData): Promise<Account
   let characters: Character[] = []
   try {
     const [ch] = await db(DB.characters).query<RowDataPacket[]>(
-      'SELECT name, level, money FROM characters WHERE account = ?',
+      'SELECT name, level, money, race, class, zone, gender FROM characters WHERE account = ?',
       [accountId],
     )
     characters = ch.map((r) => ({
@@ -73,6 +81,13 @@ export async function getAccountDashboard(session: SessionData): Promise<Account
       gold: Math.floor(r.money / 10000),
       silver: Math.floor((r.money % 10000) / 100),
       copper: r.money % 100,
+      race: r.race,
+      classId: r.class,
+      className: getClassName(r.class),
+      raceName: getRaceName(r.race),
+      classCss: getClassCss(r.class),
+      zone: getZoneName(r.zone),
+      imageUrl: getCharacterImage(r.class, r.race, r.gender),
     }))
   } catch {
     /* la BD de personajes puede no estar poblada */

web-next/lib/character-info.ts

@@ -0,0 +1,99 @@
+// Metadatos de personaje portados de home/views/account.py + home/zone_definitions.py.
+import zoneNames from './data/zone-names.json'
+
+const ZONE_NAMES = zoneNames as Record<string, string>
+
+/** Nombre de la zona a partir de su ZoneID (o "Zona desconocida"). */
+export function getZoneName(zoneId: number): string {
+  return ZONE_NAMES[String(zoneId)] ?? 'Zona desconocida'
+}
+
+const CLASS_MAP: Record<number, string> = {
+  1: 'warrior',
+  2: 'paladin',
+  3: 'hunter',
+  4: 'rogue',
+  5: 'priest',
+  6: 'death-knight',
+  7: 'shaman',
+  8: 'mage',
+  9: 'warlock',
+  11: 'druid',
+}
+
+/** Slug de clase (para color/estilo). */
+export function getClassCss(classId: number): string {
+  return CLASS_MAP[classId] ?? 'unknown'
+}
+
+// Clases compatibles por raza (validación de la imagen).
+const RACE_CLASS_MAP: Record<number, number[]> = {
+  10: [2, 3, 4, 5, 6, 8, 9], // Elfo de Sangre
+  8: [1, 3, 4, 5, 6, 7, 8], // Trol
+  6: [1, 3, 6, 7, 11], // Tauren
+  5: [1, 4, 5, 6, 8, 9], // No-muerto
+  2: [1, 3, 4, 6, 7, 9], // Orco
+  11: [1, 2, 3, 5, 6, 7, 8], // Draenei
+  7: [1, 4, 6, 8, 9], // Gnomo
+  4: [1, 3, 4, 5, 6, 11], // Elfo de la Noche
+  3: [1, 2, 3, 4, 5, 6], // Enano
+  1: [1, 2, 4, 5, 6, 8, 9], // Humano
+}
+
+const RACE_IMAGE: Record<number, string> = {
+  10: 'blood-elf',
+  8: 'troll',
+  6: 'tauren',
+  5: 'undead',
+  2: 'orc',
+  11: 'draenei',
+  7: 'gnome',
+  4: 'night-elf',
+  3: 'dwarf',
+  1: 'human',
+}
+
+/**
+ * Ruta pública de la imagen del personaje según raza/clase/género.
+ * `gender`: 0 = hombre, 1 = mujer. Si la clase no es válida para la raza -> unknown.
+ */
+export function getCharacterImage(classId: number, race: number, gender: number): string {
+  if (!(RACE_CLASS_MAP[race] ?? []).includes(classId)) return '/races/unknown.webp'
+  const base = RACE_IMAGE[race]
+  if (!base) return '/races/unknown.webp'
+  const suffix = gender === 0 ? 'male' : 'female'
+  return `/races/big-${base}-${suffix}.webp`
+}
+
+const RACE_NAME: Record<number, string> = {
+  1: 'Humano',
+  2: 'Orco',
+  3: 'Enano',
+  4: 'Elfo de la Noche',
+  5: 'No-muerto',
+  6: 'Tauren',
+  7: 'Gnomo',
+  8: 'Trol',
+  10: 'Elfo de Sangre',
+  11: 'Draenei',
+}
+
+const CLASS_NAME: Record<number, string> = {
+  1: 'Guerrero',
+  2: 'Paladín',
+  3: 'Cazador',
+  4: 'Pícaro',
+  5: 'Sacerdote',
+  6: 'Caballero de la Muerte',
+  7: 'Chamán',
+  8: 'Mago',
+  9: 'Brujo',
+  11: 'Druida',
+}
+
+export function getRaceName(race: number): string {
+  return RACE_NAME[race] ?? '—'
+}
+export function getClassName(classId: number): string {
+  return CLASS_NAME[classId] ?? '—'
+}