Files
NightSpire/web-next/app/[locale]/armory/page.tsx
T
Inna 297257b753 Armería/Armory: buscador, ficha de personaje con equipo y visor 3D
Nueva sección Armería (menú Jugadores del header, pública). Migra la idea del
módulo armory de FusionCMS a Next, ajustada al diseño del sitio y en ES/EN.

DATOS (verificado antes de construir): item_template no existe en 3.4.3, pero los
datos de ítem ya están en MySQL (django_wow.item_data, 44.873 filas con nombre
es/en, calidad, item_level, inventory_type y display_id). El equipo del personaje
sale de acore_characters (character_inventory + item_instance, con transmog) y se
resuelve contra item_data en dos pasos (sin joins entre esquemas). lib/armory.ts +
lib/wow-data.ts (razas/clases/slots ES/EN y colores de clase).

RUTAS:
- /armory: buscador con pestañas personajes/ítems/hermandades (SSR por searchParams),
  ítems con tooltip/color/icono de wowhead.
- /armory/character/[guid]: identidad, equipo (tooltips wowhead, color por calidad)
  y visor 3D.
- /armory/guild/[guid]: miembros con enlace a su ficha.

VISOR 3D (components/ArmoryModel3D): usa la librería wow-model-viewer (generateModels)
con jQuery + ZamModelViewer de wowhead cargados bajo demanda, alimentado con
raza+género+display_ids del equipo (transmog si lo hay). Es integración cliente que
depende del CDN de zamimg y NO se puede verificar sin navegador: va todo en try/catch
con temporizador de reserva y aviso si no carga, para no romper la ficha.

Verificado en producción (salvo el render 3D): buscador, ficha con equipo real
(«Camisa de acólito»/«Acolyte's Shirt»), tooltips de wowhead y página de hermandad,
en ES y EN.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-16 14:29:02 +00:00

118 lines
4.1 KiB
TypeScript

import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import { searchCharacters, searchItems, searchGuilds } from '@/lib/armory'
import { raceName, className, classColor } from '@/lib/wow-data'
import { wowheadUrl, wowheadData } from '@/lib/wowhead'
import { PageShell } from '@/components/PageShell'
import { ArmorySearchBox } from '@/components/ArmorySearchBox'
import { WowheadRefresh } from '@/components/WowheadRefresh'
export const dynamic = 'force-dynamic'
const TABS = ['characters', 'items', 'guilds'] as const
type Tab = (typeof TABS)[number]
export default async function ArmoryPage({
params,
searchParams,
}: {
params: Promise<{ locale: string }>
searchParams: Promise<{ tab?: string; q?: string }>
}) {
const { locale } = await params
setRequestLocale(locale)
const t = await getTranslations('Armory')
const sp = await searchParams
const tab: Tab = TABS.includes(sp.tab as Tab) ? (sp.tab as Tab) : 'characters'
const q = (sp.q ?? '').trim()
const hasQuery = q.length >= 3
const characters = hasQuery && tab === 'characters' ? await searchCharacters(q) : []
const items = hasQuery && tab === 'items' ? await searchItems(q, locale) : []
const guilds = hasQuery && tab === 'guilds' ? await searchGuilds(q) : []
const tabLabel: Record<Tab, string> = {
characters: t('tabCharacters'),
items: t('tabItems'),
guilds: t('tabGuilds'),
}
return (
<PageShell title={t('title')}>
<div className="main-wide">
<WowheadRefresh dep={`${tab}-${q}`} />
<ArmorySearchBox tab={tab} initialQuery={q} />
<div className="armory-tabs">
{TABS.map((tb) => (
<Link
key={tb}
href={`/armory?tab=${tb}${q ? `&q=${encodeURIComponent(q)}` : ''}`}
className={`armory-tab${tb === tab ? ' active' : ''}`}
>
{tabLabel[tb]}
</Link>
))}
</div>
{!hasQuery ? (
<p className="armory-hint">{t('searchHint')}</p>
) : tab === 'characters' ? (
characters.length === 0 ? (
<p className="armory-hint">{t('noResults')}</p>
) : (
<div className="armory-list">
{characters.map((c) => (
<Link key={c.guid} href={`/armory/character/${c.guid}`} className="armory-row">
<span className="armory-name" style={{ color: classColor(c.class) }}>
{c.name}
</span>
<span className="armory-meta">
{t('level')} {c.level} · {raceName(c.race, locale)} · {className(c.class, locale)}
</span>
</Link>
))}
</div>
)
) : tab === 'items' ? (
items.length === 0 ? (
<p className="armory-hint">{t('noResults')}</p>
) : (
<div className="armory-list">
{items.map((it) => (
<div key={it.entry} className="armory-row">
<a
href={wowheadUrl('item', it.entry, locale)}
data-wowhead={wowheadData('item', it.entry, locale)}
target="_blank"
rel="noopener noreferrer"
className="armory-name"
>
{it.name}
</a>
<span className="armory-meta">
{t('itemLevel')} {it.itemLevel}
</span>
</div>
))}
</div>
)
) : guilds.length === 0 ? (
<p className="armory-hint">{t('noResults')}</p>
) : (
<div className="armory-list">
{guilds.map((g) => (
<Link key={g.guildid} href={`/armory/guild/${g.guildid}`} className="armory-row">
<span className="armory-name">{g.name}</span>
<span className="armory-meta">
{g.members} {t('members')}
</span>
</Link>
))}
</div>
)}
</div>
</PageShell>
)
}