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/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] ?? '—'
+}