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>
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getCharacter, getCharacterEquipment } from '@/lib/armory'
|
||||
import { raceName, className, classColor, factionOf, EQUIP_SLOTS } from '@/lib/wow-data'
|
||||
import { wowheadUrl, wowheadData } from '@/lib/wowhead'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { WowheadRefresh } from '@/components/WowheadRefresh'
|
||||
import { ArmoryModel3D } from '@/components/ArmoryModel3D'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function CharacterPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; guid: string }>
|
||||
}) {
|
||||
const { locale, guid } = await params
|
||||
setRequestLocale(locale)
|
||||
const t = await getTranslations('Armory')
|
||||
|
||||
const id = Number(guid)
|
||||
const character = await getCharacter(id)
|
||||
if (!character) notFound()
|
||||
const equipment = await getCharacterEquipment(id, locale)
|
||||
const bySlot = new Map(equipment.map((e) => [e.slot, e]))
|
||||
|
||||
const faction = factionOf(character.race)
|
||||
const factionLabel = faction === 'alliance' ? t('alliance') : faction === 'horde' ? t('horde') : ''
|
||||
|
||||
// Modelo 3D: raza, género y equipo (entry + display; transmog si lo hay).
|
||||
const modelEquip = equipment
|
||||
.map((e) => ({
|
||||
slot: e.slot,
|
||||
entry: e.transmogEntry ?? e.entry,
|
||||
displayid: e.transmogDisplayId ?? e.displayId ?? 0,
|
||||
}))
|
||||
.filter((e) => e.displayid > 0)
|
||||
|
||||
return (
|
||||
<PageShell title={character.name}>
|
||||
<div className="main-wide">
|
||||
<WowheadRefresh dep={`char-${id}`} />
|
||||
<p className="forum-path">
|
||||
<Link href="/armory">← {t('backToArmory')}</Link>
|
||||
</p>
|
||||
|
||||
<div className="armory-char">
|
||||
{/* Columna izquierda: identidad + modelo 3D */}
|
||||
<div className="armory-char-left">
|
||||
<h1 className="armory-char-name" style={{ color: classColor(character.class) }}>
|
||||
{character.name}
|
||||
</h1>
|
||||
<div className="armory-char-sub">
|
||||
{t('level')} {character.level} · {raceName(character.race, locale)} ·{' '}
|
||||
<span style={{ color: classColor(character.class) }}>{className(character.class, locale)}</span>
|
||||
</div>
|
||||
<div className="armory-char-tags">
|
||||
{factionLabel && <span className={`armory-faction ${faction}`}>{factionLabel}</span>}
|
||||
<span className={`armory-status ${character.online ? 'online' : 'offline'}`}>
|
||||
{character.online ? t('online') : t('offline')}
|
||||
</span>
|
||||
{character.guildName && character.guildId && (
|
||||
<Link href={`/armory/guild/${character.guildId}`} className="armory-guild-tag">
|
||||
<{character.guildName}>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<ArmoryModel3D
|
||||
race={character.race}
|
||||
gender={character.gender}
|
||||
equip={modelEquip}
|
||||
labels={{ loading: t('modelLoading'), unavailable: t('modelUnavailable') }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Columna derecha: equipo */}
|
||||
<div className="armory-char-right">
|
||||
<h2 className="armory-section-title">{t('equipment')}</h2>
|
||||
{equipment.length === 0 ? (
|
||||
<p className="armory-hint">{t('noEquipment')}</p>
|
||||
) : (
|
||||
<div className="armory-equip">
|
||||
{EQUIP_SLOTS.map(({ slot, es, en }) => {
|
||||
const item = bySlot.get(slot)
|
||||
const slotName = locale === 'en' ? en : es
|
||||
if (!item) {
|
||||
return (
|
||||
<div key={slot} className="armory-equip-slot empty">
|
||||
<span className="armory-slot-name">{slotName}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div key={slot} className="armory-equip-slot">
|
||||
<a
|
||||
href={wowheadUrl('item', item.entry, locale)}
|
||||
data-wowhead={wowheadData('item', item.entry, locale)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`armory-item q${item.quality}`}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
<span className="armory-slot-name">
|
||||
{slotName}
|
||||
{item.itemLevel ? ` · ${item.itemLevel}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { getGuild } from '@/lib/armory'
|
||||
import { raceName, className, classColor } from '@/lib/wow-data'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default async function GuildPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; guid: string }>
|
||||
}) {
|
||||
const { locale, guid } = await params
|
||||
setRequestLocale(locale)
|
||||
const t = await getTranslations('Armory')
|
||||
|
||||
const guild = await getGuild(Number(guid))
|
||||
if (!guild) notFound()
|
||||
|
||||
return (
|
||||
<PageShell title={guild.name}>
|
||||
<div className="main-wide">
|
||||
<p className="forum-path">
|
||||
<Link href="/armory">← {t('backToArmory')}</Link>
|
||||
</p>
|
||||
|
||||
<div className="armory-char-sub">
|
||||
{guild.members.length} {t('members')}
|
||||
{guild.leaderName && (
|
||||
<>
|
||||
{' · '}
|
||||
{t('leader')}: {guild.leaderName}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="armory-list" style={{ marginTop: 16 }}>
|
||||
{guild.members.map((m) => (
|
||||
<Link key={m.guid} href={`/armory/character/${m.guid}`} className="armory-row">
|
||||
<span className="armory-name" style={{ color: classColor(m.class) }}>
|
||||
{m.name}
|
||||
</span>
|
||||
<span className="armory-meta">
|
||||
{t('level')} {m.level} · {raceName(m.race, locale)} · {className(m.class, locale)}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import '@/app/forum.css'
|
||||
import '@/app/armory.css'
|
||||
|
||||
// La armería reutiliza clases del foro (main-wide, nice_button, forum-input, colores
|
||||
// de calidad qN) y añade las suyas en armory.css. Todas las rutas /armory heredan esto.
|
||||
export default function ArmoryLayout({ children }: { children: React.ReactNode }) {
|
||||
return children
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user