Armería: muñeco de papel, talentos, actividad y caché del visor 3D
La ficha de personaje pasa a mostrar el equipo sobre el paperdoll (con encantamientos y gemas en los tooltips de wowhead), el árbol de talentos y la actividad reciente del personaje. El proxy de /modelviewer/* deja de ser un rewrite de Next y pasa a un route handler que cachea en disco los assets de zamimg, para no repetir la descarga en cada visita.
This commit is contained in:
@@ -3,25 +3,61 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
/**
|
||||
* Visor 3D del personaje. Usa la librería `wow-model-viewer` (generateModels), que a
|
||||
* su vez necesita jQuery y el ZamModelViewer de wowhead (wow.zamimg.com) cargados en
|
||||
* global. Se cargan bajo demanda solo en esta ficha.
|
||||
* Visor 3D del personaje (ZamModelViewer de wowhead, servido bajo /modelviewer/*
|
||||
* como proxy same-origin para evitar CORS).
|
||||
*
|
||||
* OJO: es integración cliente que depende de un CDN externo (zamimg) y no se puede
|
||||
* verificar sin navegador; por eso todo va envuelto en try/catch y con un temporizador
|
||||
* de reserva: si el modelo no aparece, se muestra un aviso en lugar de romper la ficha.
|
||||
* Problema de fondo (3.4.3 sobre CDN de wowhead):
|
||||
* - La rama `wrath` SÍ tiene los IDs de personalización de WotLK que guarda
|
||||
* AzerothCore, pero NO publica la geometría de los modelos (los .mo3 dan 404).
|
||||
* - La rama `live` (retail) SÍ tiene geometría y texturas, pero sus choiceID son
|
||||
* los de retail actual, distintos a los de WotLK → la piel salía negra.
|
||||
*
|
||||
* El equipo se pasa como {slot, entry, displayid}; la librería mapea cada ítem a su
|
||||
* slot del visor. displayid = transmog si lo hay, si no el del ítem equipado.
|
||||
* Solución: renderizar con geometría de `live` y REMAPEAR cada choiceID de la BD
|
||||
* (WotLK) a su equivalente retail por POSICIÓN dentro de la opción, usando el orden
|
||||
* de choices de `wrath` como referencia. Así la piel/cara/pelo se ven correctos.
|
||||
*/
|
||||
|
||||
// Same-origin (proxy /modelviewer/* -> zamimg en next.config): evita el bloqueo CORS
|
||||
// del visor, que es lo que dejaba el modelo «no disponible».
|
||||
const ZAM_VIEWER = '/modelviewer/live/viewer/viewer.min.js'
|
||||
const GEO_BRANCH = 'live' // geometría + texturas (wrath no publica modelos)
|
||||
const CONTENT_PATH = `/modelviewer/${GEO_BRANCH}/`
|
||||
const ZAM_VIEWER = `/modelviewer/${GEO_BRANCH}/viewer/viewer.min.js`
|
||||
const JQUERY = 'https://code.jquery.com/jquery-3.7.1.min.js'
|
||||
const CONTENT_PATH = '/modelviewer/live/'
|
||||
const MODEL_TYPE_CHARACTER = 16
|
||||
|
||||
type Win = typeof window & { jQuery?: unknown; $?: unknown; ZamModelViewer?: unknown; CONTENT_PATH?: string }
|
||||
type Choice = { Id: number }
|
||||
type Option = { Id: number; Name?: string; Choices: Choice[] }
|
||||
type CustomizationDoc = { Options?: Option[]; data?: { Options?: Option[] } }
|
||||
|
||||
type Win = typeof window & {
|
||||
jQuery?: (sel: string) => unknown
|
||||
ZamModelViewer?: new (opts: unknown) => unknown
|
||||
CONTENT_PATH?: string
|
||||
WOTLK_TO_RETAIL_DISPLAY_ID_API?: unknown
|
||||
}
|
||||
|
||||
function ensureWH() {
|
||||
const w = window as unknown as { WH?: Record<string, unknown> }
|
||||
const WH = (w.WH = w.WH || {})
|
||||
if (typeof WH.debug !== 'function') WH.debug = () => {}
|
||||
if (!WH.defaultAnimation) WH.defaultAnimation = 'Stand'
|
||||
if (!WH.WebP) WH.WebP = { getImageExtension: () => '.webp' }
|
||||
if (!WH.Wow) {
|
||||
WH.Wow = {
|
||||
Item: {
|
||||
INVENTORY_TYPE_HEAD: 1, INVENTORY_TYPE_NECK: 2, INVENTORY_TYPE_SHOULDERS: 3,
|
||||
INVENTORY_TYPE_SHIRT: 4, INVENTORY_TYPE_CHEST: 5, INVENTORY_TYPE_WAIST: 6,
|
||||
INVENTORY_TYPE_LEGS: 7, INVENTORY_TYPE_FEET: 8, INVENTORY_TYPE_WRISTS: 9,
|
||||
INVENTORY_TYPE_HANDS: 10, INVENTORY_TYPE_FINGER: 11, INVENTORY_TYPE_TRINKET: 12,
|
||||
INVENTORY_TYPE_ONE_HAND: 13, INVENTORY_TYPE_SHIELD: 14, INVENTORY_TYPE_RANGED: 15,
|
||||
INVENTORY_TYPE_BACK: 16, INVENTORY_TYPE_TWO_HAND: 17, INVENTORY_TYPE_BAG: 18,
|
||||
INVENTORY_TYPE_TABARD: 19, INVENTORY_TYPE_ROBE: 20, INVENTORY_TYPE_MAIN_HAND: 21,
|
||||
INVENTORY_TYPE_OFF_HAND: 22, INVENTORY_TYPE_HELD_IN_OFF_HAND: 23,
|
||||
INVENTORY_TYPE_PROJECTILE: 24, INVENTORY_TYPE_THROWN: 25, INVENTORY_TYPE_RANGED_RIGHT: 26,
|
||||
INVENTORY_TYPE_QUIVER: 27, INVENTORY_TYPE_RELIC: 28, INVENTORY_TYPE_PROFESSION_TOOL: 29,
|
||||
INVENTORY_TYPE_PROFESSION_ACCESSORY: 30,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadScript(src: string): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
@@ -35,15 +71,57 @@ function loadScript(src: string): Promise<void> {
|
||||
})
|
||||
}
|
||||
|
||||
function optionsById(doc: CustomizationDoc): Map<number, Option> {
|
||||
const list = doc.Options ?? doc.data?.Options ?? []
|
||||
return new Map(list.map((o) => [o.Id, o]))
|
||||
}
|
||||
|
||||
/**
|
||||
* Remapea los choiceID de WotLK (de la BD) a choiceID de retail por índice.
|
||||
* Usa el orden de choices de `wrath` (WotLK) para hallar la posición, y el de `live`
|
||||
* (retail) para obtener el ID equivalente. Si algo falla, devuelve lo que pueda.
|
||||
*/
|
||||
async function remapCustomizations(
|
||||
raceGender: number,
|
||||
db: { optionId: number; choiceId: number }[],
|
||||
): Promise<{ optionId: number; choiceId: number }[]> {
|
||||
try {
|
||||
const [wrathDoc, liveDoc] = await Promise.all([
|
||||
fetch(`/modelviewer/wrath/meta/charactercustomization/${raceGender}.json`).then((r) => r.json()),
|
||||
fetch(`/modelviewer/live/meta/charactercustomization/${raceGender}.json`).then((r) => r.json()),
|
||||
])
|
||||
const W = optionsById(wrathDoc as CustomizationDoc)
|
||||
const L = optionsById(liveDoc as CustomizationDoc)
|
||||
const out: { optionId: number; choiceId: number }[] = []
|
||||
for (const { optionId, choiceId } of db) {
|
||||
const wo = W.get(optionId)
|
||||
const lo = L.get(optionId)
|
||||
if (!wo || !lo) continue
|
||||
const idx = wo.Choices.findIndex((c) => c.Id === choiceId)
|
||||
if (idx < 0) continue
|
||||
const lc = lo.Choices[idx] ?? lo.Choices[lo.Choices.length - 1]
|
||||
if (lc) out.push({ optionId, choiceId: lc.Id })
|
||||
}
|
||||
return out
|
||||
} catch (err) {
|
||||
console.warn('[armory-3d] no se pudo remapear la apariencia:', err)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export function ArmoryModel3D({
|
||||
race,
|
||||
gender,
|
||||
equip,
|
||||
customizations,
|
||||
labels,
|
||||
}: {
|
||||
race: number
|
||||
gender: number
|
||||
equip: { slot: number; entry: number; displayid: number }[]
|
||||
/** Equipo ya resuelto a slots del visor: [slotVisor, displayId]. */
|
||||
equip: { slot: number; display: number }[]
|
||||
/** Apariencia desde character_customizations (IDs de WotLK): {optionId, choiceId}. */
|
||||
customizations: { optionId: number; choiceId: number }[]
|
||||
labels: { loading: string; unavailable: string }
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
@@ -51,33 +129,45 @@ export function ArmoryModel3D({
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
const failTimer = setTimeout(() => !cancelled && setState((s) => (s === 'loading' ? 'fail' : s)), 12000)
|
||||
const failTimer = setTimeout(() => !cancelled && setState((s) => (s === 'loading' ? 'fail' : s)), 15000)
|
||||
|
||||
;(async () => {
|
||||
try {
|
||||
const w = window as Win
|
||||
w.CONTENT_PATH = CONTENT_PATH
|
||||
w.WOTLK_TO_RETAIL_DISPLAY_ID_API = false
|
||||
|
||||
const raceGender = race * 2 - 1 + gender
|
||||
// El remapeo (peticiones fetch) puede ir en paralelo, pero jQuery debe cargar
|
||||
// ANTES que viewer.min.js (que lo usa como global), así que ese orden es estricto.
|
||||
const remapPromise = remapCustomizations(raceGender, customizations)
|
||||
await loadScript(JQUERY)
|
||||
await loadScript(ZAM_VIEWER)
|
||||
// La librería es ESM y usa jQuery/ZamModelViewer globales.
|
||||
const mv = await import('wow-model-viewer')
|
||||
const options = await remapPromise
|
||||
ensureWH()
|
||||
if (cancelled || !ref.current) return
|
||||
|
||||
// La resolución de ítems hace consultas al CDN y puede fallar; si falla, se
|
||||
// renderiza al menos el personaje sin equipo en vez de dejar la ficha vacía.
|
||||
let items: unknown[] = []
|
||||
try {
|
||||
items = await mv.findItemsInEquipments(
|
||||
equip.map((e) => ({ slot: e.slot, entry: e.entry, displayid: e.displayid })),
|
||||
'live',
|
||||
)
|
||||
} catch (err) {
|
||||
console.warn('[armory-3d] no se pudieron resolver los ítems del modelo:', err)
|
||||
}
|
||||
if (cancelled || !ref.current) return
|
||||
const jQuery = w.jQuery
|
||||
const ZamModelViewer = w.ZamModelViewer
|
||||
if (!jQuery || !ZamModelViewer) throw new Error('ZamModelViewer/jQuery no disponibles')
|
||||
|
||||
ref.current.id = ref.current.id || `armory-model-${race}-${gender}`
|
||||
await mv.generateModels(1, `#${ref.current.id}`, { race, gender, items }, 'live')
|
||||
const items = equip.filter((e) => e.display > 0).map((e) => [e.slot, e.display])
|
||||
|
||||
const models = {
|
||||
type: 2,
|
||||
contentPath: CONTENT_PATH,
|
||||
container: jQuery(`#${ref.current.id}`),
|
||||
aspect: 1,
|
||||
hd: true,
|
||||
items,
|
||||
models: { id: raceGender, type: MODEL_TYPE_CHARACTER },
|
||||
charCustomization: { options },
|
||||
}
|
||||
|
||||
// eslint-disable-next-line new-cap
|
||||
new ZamModelViewer(models)
|
||||
|
||||
if (!cancelled) {
|
||||
clearTimeout(failTimer)
|
||||
setState('ok')
|
||||
|
||||
Reference in New Issue
Block a user