Enlaces de ítems por wowhead (locale + tooltips) en toda la web
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:
@@ -2,10 +2,10 @@
|
||||
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { WowheadLink } from '@/components/WowheadLink'
|
||||
import { CharacterSelect } from '@/components/CharacterSelect'
|
||||
import { Turnstile } from '@/components/Turnstile'
|
||||
|
||||
const QUEST_DB = 'https://wotlk.novawow.com'
|
||||
|
||||
export interface QuestCharacter {
|
||||
name: string
|
||||
@@ -173,9 +173,9 @@ export function QuestTrackerForm({ characters, options }: { characters: QuestCha
|
||||
return (
|
||||
<tr key={s.quest}>
|
||||
<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 })}
|
||||
</a>
|
||||
</WowheadLink>
|
||||
</td>
|
||||
<td className={`real-info-box ${st.cls}`}>{st.text}</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
import type { RecruitRewardView } from '@/lib/recruit-claim'
|
||||
import type { CharOption } from '@/components/CharacterSelect'
|
||||
|
||||
const ICON_BASE = 'https://wotlk.ultimowow.com/static/images/wow/icons/tiny'
|
||||
import { wowheadUrl, wowheadData, wowheadIcon } from '@/lib/wowhead'
|
||||
|
||||
function claimErrorKey(message?: string): string {
|
||||
switch (message) {
|
||||
@@ -40,6 +39,7 @@ export function RecruitPanel({
|
||||
recruitedCount: number
|
||||
}) {
|
||||
const t = useTranslations('UI')
|
||||
const locale = useLocale()
|
||||
const [character, setCharacter] = useState(characters[0]?.name ?? '')
|
||||
const selectedCss = characters.find((c) => c.name === character)?.classCss
|
||||
const [busyId, setBusyId] = useState<number | null>(null)
|
||||
@@ -77,11 +77,12 @@ export function RecruitPanel({
|
||||
return (
|
||||
<>
|
||||
<a
|
||||
href={r.item_link}
|
||||
href={wowheadUrl('item', r.item_id, locale)}
|
||||
data-wowhead={wowheadData('item', r.item_id)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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}
|
||||
</a>
|
||||
|
||||
@@ -4,10 +4,9 @@ import { useState } from 'react'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
||||
import { PaymentMethodSelect, pdCostOf, type PayMethod } from '@/components/PaymentMethodSelect'
|
||||
import { WowheadLink } from '@/components/WowheadLink'
|
||||
import { Turnstile } from '@/components/Turnstile'
|
||||
|
||||
const ITEM_DB = 'https://wotlk.novawow.com'
|
||||
|
||||
interface DeletedItem {
|
||||
recoverId: number
|
||||
itemId: number
|
||||
@@ -134,7 +133,7 @@ export function RestoreItemsForm({ characters, price, pdBalance }: { characters:
|
||||
{items.map((it) => (
|
||||
<tr key={it.recoverId}>
|
||||
<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}` : ''}
|
||||
</td>
|
||||
<td className="real-info-box">
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useTranslations, useLocale } from 'next-intl'
|
||||
import type { GiftCategory, GiftItem } from '@/lib/gift'
|
||||
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
||||
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).
|
||||
const MAX_QTY = 100
|
||||
@@ -186,9 +187,9 @@ export function SendGiftForm({
|
||||
<div className="gift-grid">
|
||||
{pageItems.map((it) => (
|
||||
<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} />
|
||||
</a>
|
||||
</WowheadLink>
|
||||
<div className="third-brown" style={{ fontSize: '12px' }}>{it.category}</div>
|
||||
<div className="item-name second-brown">{it.name}</div>
|
||||
<div className="yellow-info">
|
||||
@@ -232,9 +233,13 @@ export function SendGiftForm({
|
||||
{[...cart.values()].map((e) => (
|
||||
<tr key={e.item.id}>
|
||||
<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 className="second-brown">{e.item.name}</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState } from 'react'
|
||||
import { useLocale, useTranslations } from 'next-intl'
|
||||
import { Link } from '@/i18n/navigation'
|
||||
import { wowheadWotlkHome } from '@/lib/wowhead'
|
||||
|
||||
const SERVER_NAME = 'NovaWoW'
|
||||
|
||||
@@ -94,7 +95,7 @@ export function SiteHeader({
|
||||
<Link href="/forum">{t('header.forums')}</Link>
|
||||
</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')}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user