Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enlaces de ítems por wowhead (locale + tooltips) en toda la web

Browse Source 
Sustituye la base de datos de ítems del sistema antiguo (AoWoW en
wotlk.novawow/wotlk.ultimowow) y los iconos de mirrors por wowhead / zamimg,
con el idioma del tooltip según el locale de la web (es. / www.).

Sistema reutilizable para rutas actuales y futuras:
- lib/wowhead.ts: wowheadUrl/wowheadItemUrl/wowheadWotlkHome (subdominio por
  locale), wowheadIcon (zamimg) y wowheadData (atributo data-wowhead, rama WotLK).
- components/WowheadLink.tsx: enlace con tooltip en el locale actual.
- layout raíz: config whTooltips (solo tooltips) + script tooltips.js global;
  funciona con contenido añadido por React (carrito, búsquedas).

Aplicado en: send-gift (catálogo + carrito), restore-items, recruit
(RecruitPanel, enlace por item_id + icono zamimg), quest-character (misión/npc/
facción + iconos), y el enlace "WOTLK DB" de la cabecera.

Verificado en prod (:3001): /es -> es.wowhead.com, /en -> www.wowhead.com,
data-wowhead presente, iconos por zamimg.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Inna Hoover Brown
2026-07-14 22:34:26 +00:00
parent 809eb756c8
commit 7d1abab9f1
9 changed files with 132 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-next/app/[locale]/layout.tsx
+13
View File
@@ -1,4 +1,5 @@
import type { Metadata } from 'next' import type { Metadata } from 'next'
import Script from 'next/script'
import { notFound } from 'next/navigation' import { notFound } from 'next/navigation'
import { NextIntlClientProvider, hasLocale } from 'next-intl' import { NextIntlClientProvider, hasLocale } from 'next-intl'
import { getTranslations, setRequestLocale } from 'next-intl/server' import { getTranslations, setRequestLocale } from 'next-intl/server'
@@ -66,6 +67,14 @@ export default async function LocaleLayout({
/> />
{/* Tema real de NovaWoW (nw-ryu). Va el ÚLTIMO para ganar la cascada. */} {/* Tema real de NovaWoW (nw-ryu). Va el ÚLTIMO para ganar la cascada. */}
<link rel="stylesheet" href="/nw-themes/nw-ryu/nw-css/novawow-style.css?v=2" /> <link rel="stylesheet" href="/nw-themes/nw-ryu/nw-css/novawow-style.css?v=2" />
{/* Config de los tooltips de wowhead (debe definirse antes de tooltips.js).
Solo tooltips: no recolorea/renombra/iconiza nuestros enlaces. El idioma
del tooltip lo da el subdominio del enlace (es./www.). */}
<script
dangerouslySetInnerHTML={{
__html: 'const whTooltips={colorLinks:false,iconizeLinks:false,renameLinks:false};',
}}
/>
</head> </head>
<body> <body>
<NextIntlClientProvider> <NextIntlClientProvider>
@@ -76,6 +85,10 @@ export default async function LocaleLayout({
<Footer /> <Footer />
<CookieBanner /> <CookieBanner />
</NextIntlClientProvider> </NextIntlClientProvider>
{/* Tooltips de wowhead (WotLK) en todos los enlaces .../wowhead.com/... y
elementos con data-wowhead. Funciona con contenido añadido por React
(carrito, búsquedas) porque delega el hover en el documento. */}
<Script src="https://wow.zamimg.com/js/tooltips.js" strategy="afterInteractive" />
</body> </body>
</html> </html>
) )
web-next/app/[locale]/quest-character/page.tsx
+8 -7
View File
@@ -5,6 +5,7 @@ import { redirect } from '@/i18n/navigation'
import { getSession } from '@/lib/session' import { getSession } from '@/lib/session'
import { getGameCharacters } from '@/lib/characters' import { getGameCharacters } from '@/lib/characters'
import { QUEST_OPTIONS } from '@/lib/quest-tracker' import { QUEST_OPTIONS } from '@/lib/quest-tracker'
import { wowheadIcon, wowheadUrl, wowheadData, wowheadWotlkHome, type WowheadType } from '@/lib/wowhead'
import { PageShell } from '@/components/PageShell' import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox' import { ServiceBox } from '@/components/ServiceBox'
import { QuestTrackerForm } from '@/components/QuestTrackerForm' import { QuestTrackerForm } from '@/components/QuestTrackerForm'
@@ -17,7 +18,6 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
return { title: t('quest.pageTitle') } return { title: t('quest.pageTitle') }
} }
const QUEST_DB = 'https://wotlk.novawow.com'
const CLASS_GROUPS: { css: string; name: string }[] = [ const CLASS_GROUPS: { css: string; name: string }[] = [
{ css: 'warlock', name: 'Brujo' }, { css: 'warlock', name: 'Brujo' },
{ css: 'hunter', name: 'Cazador' }, { css: 'hunter', name: 'Cazador' },
@@ -65,7 +65,8 @@ export default async function QuestCharacterPage({ params }: { params: Promise<{
<li key={o.key}> <li key={o.key}>
{o.link ? ( {o.link ? (
<a <a
href={`${QUEST_DB}/?${o.link.type}=${o.link.id}`} href={wowheadUrl(o.link.type as WowheadType, o.link.id, locale)}
data-wowhead={wowheadData(o.link.type as WowheadType, o.link.id)}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="icontinyl" className="icontinyl"
@@ -73,7 +74,7 @@ export default async function QuestCharacterPage({ params }: { params: Promise<{
o.icon o.icon
? { ? {
paddingLeft: '18px', paddingLeft: '18px',
background: `url("${QUEST_DB}/static/images/wow/icons/tiny/${o.icon}.gif") left center no-repeat`, background: `url("${wowheadIcon(o.icon, 'tiny')}") left center no-repeat`,
} }
: undefined : undefined
} }
@@ -95,8 +96,8 @@ export default async function QuestCharacterPage({ params }: { params: Promise<{
<ul> <ul>
<li> <li>
{t.rich('quest.hodir', { {t.rich('quest.hodir', {
hodir: (c) => <a href={`${QUEST_DB}/?faction=1119`} target="_blank" rel="noopener noreferrer">{c}</a>, hodir: (c) => <a href={wowheadUrl('faction', 1119, locale)} data-wowhead={wowheadData('faction', 1119)} target="_blank" rel="noopener noreferrer">{c}</a>,
lille: (c) => <a href={`${QUEST_DB}/?npc=32540`} target="_blank" rel="noopener noreferrer">{c}</a>, lille: (c) => <a href={wowheadUrl('npc', 32540, locale)} data-wowhead={wowheadData('npc', 32540)} target="_blank" rel="noopener noreferrer">{c}</a>,
})} })}
</li> </li>
</ul> </ul>
@@ -107,9 +108,9 @@ export default async function QuestCharacterPage({ params }: { params: Promise<{
</ul> </ul>
<br /> <br />
<p>{t('quest.howToSearch')}</p> <p>{t('quest.howToSearch')}</p>
<p>{t.rich('quest.step1', { link: (c) => <a href={QUEST_DB} target="_blank" rel="noopener noreferrer">{c}</a> })}</p> <p>{t.rich('quest.step1', { link: (c) => <a href={wowheadWotlkHome(locale)} target="_blank" rel="noopener noreferrer">{c}</a> })}</p>
<p>{t('quest.step2')}</p> <p>{t('quest.step2')}</p>
<p>{t.rich('quest.step3', { url: QUEST_DB, s: (c) => <span className="second-brown">{c}</span> })}</p> <p>{t.rich('quest.step3', { url: wowheadWotlkHome(locale), s: (c) => <span className="second-brown">{c}</span> })}</p>
<p>{t('quest.step4')}</p> <p>{t('quest.step4')}</p>
<br /> <br />
<p>{t('quest.searchButtonExplain')}</p> <p>{t('quest.searchButtonExplain')}</p>
web-next/components/QuestTrackerForm.tsx
+3 -3
View File
@@ -2,10 +2,10 @@
import { useMemo, useState } from 'react' import { useMemo, useState } from 'react'
import { useTranslations } from 'next-intl' import { useTranslations } from 'next-intl'
import { WowheadLink } from '@/components/WowheadLink'
import { CharacterSelect } from '@/components/CharacterSelect' import { CharacterSelect } from '@/components/CharacterSelect'
import { Turnstile } from '@/components/Turnstile' import { Turnstile } from '@/components/Turnstile'
const QUEST_DB = 'https://wotlk.novawow.com'
export interface QuestCharacter { export interface QuestCharacter {
name: string name: string
@@ -173,9 +173,9 @@ export function QuestTrackerForm({ characters, options }: { characters: QuestCha
return ( return (
<tr key={s.quest}> <tr key={s.quest}>
<td className="lefted"> <td className="lefted">
<a href={`${QUEST_DB}/?quest=${s.quest}`} target="_blank" rel="noopener noreferrer"> <WowheadLink type="quest" id={s.quest}>
{t('quest.questNumber', { quest: s.quest })} {t('quest.questNumber', { quest: s.quest })}
</a> </WowheadLink>
</td> </td>
<td className={`real-info-box ${st.cls}`}>{st.text}</td> <td className={`real-info-box ${st.cls}`}>{st.text}</td>
</tr> </tr>
web-next/components/RecruitPanel.tsx
+6 -5
View File
@@ -1,11 +1,10 @@
'use client' 'use client'
import { useState } from 'react' import { useState } from 'react'
import { useTranslations } from 'next-intl' import { useTranslations, useLocale } from 'next-intl'
import type { RecruitRewardView } from '@/lib/recruit-claim' import type { RecruitRewardView } from '@/lib/recruit-claim'
import type { CharOption } from '@/components/CharacterSelect' import type { CharOption } from '@/components/CharacterSelect'
import { wowheadUrl, wowheadData, wowheadIcon } from '@/lib/wowhead'
const ICON_BASE = 'https://wotlk.ultimowow.com/static/images/wow/icons/tiny'
function claimErrorKey(message?: string): string { function claimErrorKey(message?: string): string {
switch (message) { switch (message) {
@@ -40,6 +39,7 @@ export function RecruitPanel({
recruitedCount: number recruitedCount: number
}) { }) {
const t = useTranslations('UI') const t = useTranslations('UI')
const locale = useLocale()
const [character, setCharacter] = useState(characters[0]?.name ?? '') const [character, setCharacter] = useState(characters[0]?.name ?? '')
const selectedCss = characters.find((c) => c.name === character)?.classCss const selectedCss = characters.find((c) => c.name === character)?.classCss
const [busyId, setBusyId] = useState<number | null>(null) const [busyId, setBusyId] = useState<number | null>(null)
@@ -77,11 +77,12 @@ export function RecruitPanel({
return ( return (
<> <>
<a <a
href={r.item_link} href={wowheadUrl('item', r.item_id, locale)}
data-wowhead={wowheadData('item', r.item_id)}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className={`icontinyl ${quality || ''}`} className={`icontinyl ${quality || ''}`}
style={{ paddingLeft: '18px', background: `url('${ICON_BASE}/${icon}.gif') left center no-repeat` }} style={{ paddingLeft: '18px', background: `url('${wowheadIcon(icon, 'tiny')}') left center no-repeat` }}
> >
{r.reward_name} {r.reward_name}
</a> </a>
web-next/components/RestoreItemsForm.tsx
+2 -3
View File
@@ -4,10 +4,9 @@ import { useState } from 'react'
import { useTranslations, useLocale } from 'next-intl' import { useTranslations, useLocale } from 'next-intl'
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect' import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
import { PaymentMethodSelect, pdCostOf, type PayMethod } from '@/components/PaymentMethodSelect' import { PaymentMethodSelect, pdCostOf, type PayMethod } from '@/components/PaymentMethodSelect'
import { WowheadLink } from '@/components/WowheadLink'
import { Turnstile } from '@/components/Turnstile' import { Turnstile } from '@/components/Turnstile'
const ITEM_DB = 'https://wotlk.novawow.com'
interface DeletedItem { interface DeletedItem {
recoverId: number recoverId: number
itemId: number itemId: number
@@ -134,7 +133,7 @@ export function RestoreItemsForm({ characters, price, pdBalance }: { characters:
{items.map((it) => ( {items.map((it) => (
<tr key={it.recoverId}> <tr key={it.recoverId}>
<td className="lefted"> <td className="lefted">
<a href={`${ITEM_DB}/?item=${it.itemId}`} target="_blank" rel="noopener noreferrer">{it.name}</a> <WowheadLink id={it.itemId}>{it.name}</WowheadLink>
{it.count > 1 ? ` x${it.count}` : ''} {it.count > 1 ? ` x${it.count}` : ''}
</td> </td>
<td className="real-info-box"> <td className="real-info-box">
web-next/components/SendGiftForm.tsx
+9 -4
View File
@@ -5,6 +5,7 @@ import { useTranslations, useLocale } from 'next-intl'
import type { GiftCategory, GiftItem } from '@/lib/gift' import type { GiftCategory, GiftItem } from '@/lib/gift'
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect' import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
import { PaymentMethodSelect, type PayMethod } from '@/components/PaymentMethodSelect' import { PaymentMethodSelect, type PayMethod } from '@/components/PaymentMethodSelect'
import { WowheadLink } from '@/components/WowheadLink'
// Tope de cantidad en la interfaz. El servidor lo revalida en priceCart (fuente de verdad). // Tope de cantidad en la interfaz. El servidor lo revalida en priceCart (fuente de verdad).
const MAX_QTY = 100 const MAX_QTY = 100
@@ -186,9 +187,9 @@ export function SendGiftForm({
<div className="gift-grid"> <div className="gift-grid">
{pageItems.map((it) => ( {pageItems.map((it) => (
<div className="item-box" key={it.id}> <div className="item-box" key={it.id}>
<a href={`https://www.wowhead.com/wotlk/item=${it.itemId}`} target="_blank" rel="noreferrer noopener"> <WowheadLink id={it.itemId}>
<img className="item-img-box" src={it.imageUrl} alt={it.name} /> <img className="item-img-box" src={it.imageUrl} alt={it.name} />
</a> </WowheadLink>
<div className="third-brown" style={{ fontSize: '12px' }}>{it.category}</div> <div className="third-brown" style={{ fontSize: '12px' }}>{it.category}</div>
<div className="item-name second-brown">{it.name}</div> <div className="item-name second-brown">{it.name}</div>
<div className="yellow-info"> <div className="yellow-info">
@@ -232,9 +233,13 @@ export function SendGiftForm({
{[...cart.values()].map((e) => ( {[...cart.values()].map((e) => (
<tr key={e.item.id}> <tr key={e.item.id}>
<td> <td>
<img className="item-img-box" src={e.item.imageUrl} alt={e.item.name} /> <WowheadLink id={e.item.itemId}>
<img className="item-img-box" src={e.item.imageUrl} alt={e.item.name} />
</WowheadLink>
</td>
<td className="second-brown">
<WowheadLink id={e.item.itemId}>{e.item.name}</WowheadLink>
</td> </td>
<td className="second-brown">{e.item.name}</td>
<td> <td>
<input <input
type="number" type="number"
web-next/components/SiteHeader.tsx
+2 -1
View File
@@ -3,6 +3,7 @@
import { useState } from 'react' import { useState } from 'react'
import { useLocale, useTranslations } from 'next-intl' import { useLocale, useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation' import { Link } from '@/i18n/navigation'
import { wowheadWotlkHome } from '@/lib/wowhead'
const SERVER_NAME = 'NovaWoW' const SERVER_NAME = 'NovaWoW'
@@ -94,7 +95,7 @@ export function SiteHeader({
<Link href="/forum">{t('header.forums')}</Link> <Link href="/forum">{t('header.forums')}</Link>
</p> </p>
<p> <p>
<a href="https://wotlk.novawow.com" target="_blank" rel="noopener noreferrer"> <a href={wowheadWotlkHome(locale)} target="_blank" rel="noopener noreferrer">
{t('header.wotlkDb')} {t('header.wotlkDb')}
</a> </a>
</p> </p>
web-next/components/WowheadLink.tsx
+37
View File
@@ -0,0 +1,37 @@
'use client'
import { useLocale } from 'next-intl'
import { wowheadUrl, wowheadData, type WowheadType } from '@/lib/wowhead'
/**
* Enlace a wowhead (rama WotLK) con tooltip, en el locale actual de la web.
* Reutilizable en cualquier ruta actual o futura donde haya que enlazar un
* ítem/misión/hechizo. El tooltip lo pinta el script global del layout.
*/
export function WowheadLink({
type = 'item',
id,
children,
className,
style,
}: {
type?: WowheadType
id: number | string
children: React.ReactNode
className?: string
style?: React.CSSProperties
}) {
const locale = useLocale()
return (
<a
href={wowheadUrl(type, id, locale)}
data-wowhead={wowheadData(type, id)}
target="_blank"
rel="noopener noreferrer"
className={className}
style={style}
>
{children}
</a>
)
}
web-next/lib/wowhead.ts
+52
View File
@@ -0,0 +1,52 @@
/**
* Enlaces, iconos y tooltips de wowhead (rama WotLK Classic) con el locale de la
* web. Sustituye a la antigua base de datos de ítems (AoWoW en wotlk.ultimowow /
* wotlk.novawow) y a los iconos de otros mirrors: todo pasa por wowhead / zamimg.
*
* El tooltip lo pinta el script global (ver el layout raíz); el idioma del
* tooltip lo determina el SUBDOMINIO del enlace, por eso construimos las URLs
* con el subdominio del locale actual.
*
* Es un módulo puro (sin acceso a BD), así que lo pueden importar tanto los
* Server Components como los Client Components.
*/
export type WowheadType = 'item' | 'spell' | 'quest' | 'npc' | 'achievement' | 'object' | 'faction'
export type IconSize = 'tiny' | 'small' | 'medium' | 'large'
// Subdominio de wowhead por locale de la web (www = inglés, por defecto).
// Añadir aquí si se soportan más idiomas (de, fr, ru, pt, it, ko...).
const LOCALE_SUBDOMAIN: Record<string, string> = { es: 'es', en: 'www' }
function subdomain(locale: string): string {
return LOCALE_SUBDOMAIN[locale] ?? 'www'
}
/** URL de wowhead (rama WotLK) para una entidad, en el locale de la web. */
export function wowheadUrl(type: WowheadType, id: number | string, locale: string): string {
return `https://${subdomain(locale)}.wowhead.com/wotlk/${type}=${id}`
}
/** Enlace a un ítem en wowhead (WotLK) en el locale de la web. */
export function wowheadItemUrl(id: number | string, locale: string): string {
return wowheadUrl('item', id, locale)
}
/** Home de la base de datos WotLK en wowhead (enlace "WOTLK DB"). */
export function wowheadWotlkHome(locale: string): string {
return `https://${subdomain(locale)}.wowhead.com/wotlk`
}
/** Icono (de ítem/hechizo/misión) servido por el CDN de wowhead (zamimg). */
export function wowheadIcon(name: string, size: IconSize = 'large'): string {
const ext = size === 'tiny' ? 'gif' : 'jpg'
return `https://wow.zamimg.com/images/wow/icons/${size}/${name}.${ext}`
}
/**
* Valor del atributo `data-wowhead`, para que el script de tooltips lo reconozca
* con la rama WotLK aunque el href no baste (iconos, celdas sin enlace, etc.).
*/
export function wowheadData(type: WowheadType, id: number | string): string {
return `${type}=${id}&domain=wotlk`
}