web-next: selector de personaje coloreado + rediseño unstuck + fixes vote/account-info
- CharacterSelect: componente reutilizable que colorea las opciones por clase (class="priest big-font"…) y el <select> con la clase seleccionada. Usado en unstuck, revive, gold, transfer, trade-points, servicios de pago y recruit. getGameCharacters ahora devuelve classCss. - /unstuck (+revive): diseño del original (info + NOTA, prompt, opciones coloreadas, botón "Desbloqueado"/"Revivido" con refresh). - /vote-points: seed de los 4 sitios con logos y URLs (sql/seed_votesites.sql); botón voted-button para sitios en cooldown; etiqueta "Nota:" separada. - account-info.png (imagen nueva) y CSS de los paneles de cuenta: se añade background-blend-mode: saturation y background-size en #account-settings y .account-fieldset para que la imagen salga como el original. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -22,7 +22,7 @@ export default async function GoldPage({ params }: { params: Promise<{ locale: s
|
||||
return (
|
||||
<PageShell title={t('gold.title')}>
|
||||
<ServiceBox>
|
||||
<GoldForm characters={chars.map((c) => c.name)} options={options} />
|
||||
<GoldForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} options={options} />
|
||||
</ServiceBox>
|
||||
</PageShell>
|
||||
)
|
||||
|
||||
@@ -20,7 +20,9 @@ export default async function RecruitPage({ params }: { params: Promise<{ locale
|
||||
const rewards = loggedIn ? await getRecruitRewards(session.accountId!) : []
|
||||
const level80Count = loggedIn ? await getRecruitedLevel80Count(session.accountId!) : 0
|
||||
const stats = loggedIn ? await getRecruitStats(session.accountId!) : { isRecruited: false, recruitedCount: 0 }
|
||||
const characters = loggedIn ? (await getGameCharacters(session.accountId!)).map((c) => c.name) : []
|
||||
const characters = loggedIn
|
||||
? (await getGameCharacters(session.accountId!)).map((c) => ({ name: c.name, classCss: c.classCss }))
|
||||
: []
|
||||
|
||||
return (
|
||||
<PageShell title={t('title')}>
|
||||
|
||||
@@ -20,7 +20,15 @@ export default async function RevivePage({ params }: { params: Promise<{ locale:
|
||||
return (
|
||||
<PageShell title={t('reviveTitle')}>
|
||||
<ServiceBox>
|
||||
<CharacterActionForm characters={chars.map((c) => c.name)} endpoint="/api/character/revive" actionLabel={t('reviveAction')} buttonClass="revive-button" />
|
||||
<CharacterActionForm
|
||||
characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
|
||||
endpoint="/api/character/revive"
|
||||
actionLabel={t('reviveAction')}
|
||||
processingLabel={t('reviveProcessing')}
|
||||
doneLabel={t('reviveDone')}
|
||||
promptText={t('reviveChoose')}
|
||||
buttonClass="revive-button"
|
||||
/>
|
||||
</ServiceBox>
|
||||
</PageShell>
|
||||
)
|
||||
|
||||
@@ -79,7 +79,7 @@ export default async function TradePointsPage({ params }: { params: Promise<{ lo
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<TradePointsForm characters={chars.map((c) => c.name)} />
|
||||
<TradePointsForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} />
|
||||
</ServiceBox>
|
||||
</PageShell>
|
||||
)
|
||||
|
||||
@@ -22,7 +22,7 @@ export default async function TransferPage({ params }: { params: Promise<{ local
|
||||
return (
|
||||
<PageShell title={t('transfer.title')}>
|
||||
<ServiceBox>
|
||||
<TransferForm characters={chars.map((c) => c.name)} price={price} />
|
||||
<TransferForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} price={price} />
|
||||
</ServiceBox>
|
||||
</PageShell>
|
||||
)
|
||||
|
||||
@@ -20,7 +20,27 @@ export default async function UnstuckPage({ params }: { params: Promise<{ locale
|
||||
return (
|
||||
<PageShell title={t('unstuckTitle')}>
|
||||
<ServiceBox>
|
||||
<CharacterActionForm characters={chars.map((c) => c.name)} endpoint="/api/character/unstuck" actionLabel={t('unstuckAction')} buttonClass="unstuck-button" />
|
||||
<br />
|
||||
<p>{t.rich('unstuckInfo1', { b: (c) => <span>{c}</span> })}</p>
|
||||
<p>{t('unstuckInfo2')}</p>
|
||||
<br />
|
||||
<fieldset>
|
||||
<legend>NOTA</legend>
|
||||
<div className="separate2">
|
||||
<p>{t('unstuckNote1')}</p>
|
||||
<p>{t('unstuckNote2')}</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<CharacterActionForm
|
||||
characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
|
||||
endpoint="/api/character/unstuck"
|
||||
actionLabel={t('unstuckAction')}
|
||||
processingLabel={t('unstuckProcessing')}
|
||||
doneLabel={t('unstuckDone')}
|
||||
promptText={t('unstuckChoose')}
|
||||
buttonClass="unstuck-button"
|
||||
/>
|
||||
</ServiceBox>
|
||||
</PageShell>
|
||||
)
|
||||
|
||||
@@ -2,26 +2,41 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { useRouter } from '@/i18n/navigation'
|
||||
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
||||
|
||||
const ERROR_KEYS = ['noCharacter', 'notOfflineOrOwned', 'cooldown', 'soapError'] as const
|
||||
|
||||
interface Props {
|
||||
characters: string[]
|
||||
characters: CharOption[]
|
||||
endpoint: string
|
||||
actionLabel: string
|
||||
buttonClass?: string
|
||||
processingLabel?: string // texto mientras procesa (por defecto t('processing'))
|
||||
doneLabel?: string // si se pasa, muestra el estado "hecho" (dorado) y refresca a los 5s
|
||||
promptText?: string // texto encima del selector (por defecto t('choose'))
|
||||
}
|
||||
|
||||
/** Formulario reutilizable para acciones de personaje por SOAP (revive, unstuck...). */
|
||||
export function CharacterActionForm({ characters, endpoint, actionLabel, buttonClass = '' }: Props) {
|
||||
export function CharacterActionForm({
|
||||
characters,
|
||||
endpoint,
|
||||
actionLabel,
|
||||
buttonClass = '',
|
||||
processingLabel,
|
||||
doneLabel,
|
||||
promptText,
|
||||
}: Props) {
|
||||
const t = useTranslations('Services')
|
||||
const router = useRouter()
|
||||
const [character, setCharacter] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [done, setDone] = useState(false)
|
||||
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (busy || !character) return
|
||||
if (busy || done || !character) return
|
||||
setBusy(true)
|
||||
setMessage(null)
|
||||
try {
|
||||
@@ -32,10 +47,22 @@ export function CharacterActionForm({ characters, endpoint, actionLabel, buttonC
|
||||
body: JSON.stringify({ character }),
|
||||
})
|
||||
const data: { success?: boolean; error?: string } = await res.json()
|
||||
if (data.success) setMessage({ ok: true, text: t('success') })
|
||||
else {
|
||||
if (data.success) {
|
||||
setMessage({ ok: true, text: t('success') })
|
||||
if (doneLabel) {
|
||||
// Como el original: tras 5 s se limpia el formulario y se refresca.
|
||||
setDone(true)
|
||||
setTimeout(() => {
|
||||
setDone(false)
|
||||
setCharacter('')
|
||||
setMessage(null)
|
||||
router.refresh()
|
||||
}, 5000)
|
||||
}
|
||||
} else {
|
||||
const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
|
||||
setMessage({ ok: false, text: t(key) })
|
||||
setTimeout(() => setMessage(null), 5000)
|
||||
}
|
||||
} catch {
|
||||
setMessage({ ok: false, text: t('genericError') })
|
||||
@@ -50,29 +77,25 @@ export function CharacterActionForm({ characters, endpoint, actionLabel, buttonC
|
||||
|
||||
return (
|
||||
<div className="centered">
|
||||
<p>{t('choose')}</p>
|
||||
<br />
|
||||
<br />
|
||||
<p>{promptText ?? t('choose')}</p>
|
||||
<br />
|
||||
<form onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||
<select value={character} onChange={(e) => setCharacter(e.target.value)} required>
|
||||
<option value="" disabled>
|
||||
{t('selectCharacter')}
|
||||
</option>
|
||||
{characters.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
|
||||
<br />
|
||||
<button type="submit" className={buttonClass} disabled={busy || !character}>
|
||||
{busy ? t('processing') : actionLabel}
|
||||
<button
|
||||
type="submit"
|
||||
className={buttonClass}
|
||||
disabled={busy || done || !character}
|
||||
style={done ? { color: '#d79602' } : undefined}
|
||||
>
|
||||
{done && doneLabel ? doneLabel : busy ? processingLabel ?? t('processing') : actionLabel}
|
||||
</button>
|
||||
</form>
|
||||
<hr />
|
||||
<div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
|
||||
{message && (
|
||||
<span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>
|
||||
)}
|
||||
{message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client'
|
||||
|
||||
export interface CharOption {
|
||||
name: string
|
||||
classCss?: string // clase CSS de color por clase (priest, warrior…)
|
||||
}
|
||||
|
||||
/**
|
||||
* Selector de personaje con las opciones coloreadas por clase (como el diseño
|
||||
* original: `class="priest big-font"`). El propio <select> toma el color de la
|
||||
* clase del personaje seleccionado. Se usa en todas las herramientas que piden
|
||||
* elegir un personaje.
|
||||
*/
|
||||
export function CharacterSelect({
|
||||
characters,
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
name,
|
||||
required = true,
|
||||
className,
|
||||
}: {
|
||||
characters: CharOption[]
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
placeholder: string
|
||||
name?: string
|
||||
required?: boolean
|
||||
className?: string
|
||||
}) {
|
||||
const selectedCss = characters.find((c) => c.name === value)?.classCss
|
||||
const selectClass = [className, selectedCss].filter(Boolean).join(' ') || undefined
|
||||
|
||||
return (
|
||||
<select name={name} className={selectClass} value={value} onChange={(e) => onChange(e.target.value)} required={required}>
|
||||
<option value="" disabled>
|
||||
{placeholder}
|
||||
</option>
|
||||
{characters.map((c) => (
|
||||
<option key={c.name} value={c.name} className={c.classCss ? `${c.classCss} big-font` : undefined}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)
|
||||
}
|
||||
@@ -3,8 +3,9 @@
|
||||
import { useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import type { GoldOption } from '@/lib/prices'
|
||||
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
||||
|
||||
export function GoldForm({ characters, options }: { characters: string[]; options: GoldOption[] }) {
|
||||
export function GoldForm({ characters, options }: { characters: CharOption[]; options: GoldOption[] }) {
|
||||
const t = useTranslations('Services')
|
||||
const tp = useTranslations('Paid')
|
||||
const [character, setCharacter] = useState('')
|
||||
@@ -41,10 +42,7 @@ export function GoldForm({ characters, options }: { characters: string[]; option
|
||||
return (
|
||||
<div className="centered">
|
||||
<form onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||
<select value={character} onChange={(e) => setCharacter(e.target.value)} required>
|
||||
<option value="" disabled>{t('selectCharacter')}</option>
|
||||
{characters.map((c) => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
<CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
|
||||
<br />
|
||||
<select value={amount} onChange={(e) => setAmount(e.target.value)} required>
|
||||
<option value="" disabled>{tp('gold.selectAmount')}</option>
|
||||
|
||||
@@ -2,9 +2,10 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
||||
|
||||
interface Props {
|
||||
characters: string[]
|
||||
characters: CharOption[]
|
||||
checkoutEndpoint: string
|
||||
payLabel: string // ya formateado con el precio
|
||||
buttonClass?: string
|
||||
@@ -51,16 +52,7 @@ export function PaidServiceForm({ characters, checkoutEndpoint, payLabel, button
|
||||
<p>{t('choose')}</p>
|
||||
<br />
|
||||
<form onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||
<select value={character} onChange={(e) => setCharacter(e.target.value)} required>
|
||||
<option value="" disabled>
|
||||
{t('selectCharacter')}
|
||||
</option>
|
||||
{characters.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
|
||||
<br />
|
||||
<button type="submit" className={buttonClass} disabled={busy || !character}>
|
||||
{busy ? t('processing') : payLabel}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
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'
|
||||
|
||||
@@ -32,12 +33,13 @@ export function RecruitPanel({
|
||||
recruitedCount,
|
||||
}: {
|
||||
rewards: RecruitRewardView[]
|
||||
characters: string[]
|
||||
characters: CharOption[]
|
||||
level80Count: number
|
||||
isRecruited: boolean
|
||||
recruitedCount: number
|
||||
}) {
|
||||
const [character, setCharacter] = useState(characters[0] ?? '')
|
||||
const [character, setCharacter] = useState(characters[0]?.name ?? '')
|
||||
const selectedCss = characters.find((c) => c.name === character)?.classCss
|
||||
const [busyId, setBusyId] = useState<number | null>(null)
|
||||
const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null)
|
||||
|
||||
@@ -97,9 +99,9 @@ export function RecruitPanel({
|
||||
{characters.length > 0 && (
|
||||
<p className="lefted">
|
||||
Recibir recompensas en:{' '}
|
||||
<select value={character} onChange={(e) => setCharacter(e.target.value)} className="account-select">
|
||||
<select value={character} onChange={(e) => setCharacter(e.target.value)} className={['account-select', selectedCss].filter(Boolean).join(' ')}>
|
||||
{characters.map((c) => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
<option key={c.name} value={c.name} className={c.classCss ? `${c.classCss} big-font` : undefined}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</p>
|
||||
|
||||
@@ -25,7 +25,7 @@ export async function ServicePageContent({ service, locale }: { service: string;
|
||||
<PageShell title={t(`${service}.title`)}>
|
||||
<ServiceBox>
|
||||
<PaidServiceForm
|
||||
characters={chars.map((c) => c.name)}
|
||||
characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
|
||||
checkoutEndpoint={`/api/character/${service}/checkout`}
|
||||
payLabel={t(`${service}.pay`, { price })}
|
||||
buttonClass={`${service}-button`}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Turnstile } from '@/components/Turnstile'
|
||||
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
||||
|
||||
function tradeError(error?: string): string {
|
||||
switch (error) {
|
||||
@@ -78,7 +79,7 @@ function PasswordInput({
|
||||
}
|
||||
|
||||
/* ---------------------------------- VENTA ---------------------------------- */
|
||||
function SellForm({ characters, visible }: { characters: string[]; visible: boolean }) {
|
||||
function SellForm({ characters, visible }: { characters: CharOption[]; visible: boolean }) {
|
||||
const [points, setPoints] = useState('')
|
||||
const [gold, setGold] = useState('')
|
||||
const [character, setCharacter] = useState('')
|
||||
@@ -138,10 +139,7 @@ function SellForm({ characters, visible }: { characters: string[]; visible: bool
|
||||
<tr><td><input type="number" maxLength={5} min="1" max="99999" step="1" value={gold} onChange={(e) => setGold(e.target.value)} placeholder="Valor del código en oro" required /></td></tr>
|
||||
<tr><td>¿A qué personaje se enviará el oro?</td></tr>
|
||||
<tr><td>
|
||||
<select value={character} onChange={(e) => setCharacter(e.target.value)} required>
|
||||
<option disabled value="">Selecciona un personaje</option>
|
||||
{characters.map((c) => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
<CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder="Selecciona un personaje" />
|
||||
</td></tr>
|
||||
<tr><td><br /><PasswordInput id="password-sell" value={password} onChange={setPassword} placeholder="Contraseña de tu cuenta" maxLength={16} /></td></tr>
|
||||
<tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder="Token de seguridad" required /></td></tr>
|
||||
@@ -169,7 +167,7 @@ function SellForm({ characters, visible }: { characters: string[]; visible: bool
|
||||
}
|
||||
|
||||
/* ---------------------------------- COMPRA --------------------------------- */
|
||||
function BuyForm({ characters, visible }: { characters: string[]; visible: boolean }) {
|
||||
function BuyForm({ characters, visible }: { characters: CharOption[]; visible: boolean }) {
|
||||
const [code, setCode] = useState('')
|
||||
const [character, setCharacter] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
@@ -247,10 +245,7 @@ function BuyForm({ characters, visible }: { characters: string[]; visible: boole
|
||||
)}
|
||||
<tr><td>¿De qué personaje se cobrará el oro?</td></tr>
|
||||
<tr><td>
|
||||
<select value={character} onChange={(e) => setCharacter(e.target.value)} required>
|
||||
<option disabled value="">Selecciona un personaje</option>
|
||||
{characters.map((c) => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
<CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder="Selecciona un personaje" />
|
||||
</td></tr>
|
||||
<tr><td><br /><PasswordInput id="password-buy" value={password} onChange={setPassword} placeholder="Contraseña de tu cuenta" maxLength={16} /></td></tr>
|
||||
<tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder="Token de seguridad" required /></td></tr>
|
||||
@@ -268,7 +263,7 @@ function BuyForm({ characters, visible }: { characters: string[]; visible: boole
|
||||
)
|
||||
}
|
||||
|
||||
export function TradePointsForm({ characters }: { characters: string[] }) {
|
||||
export function TradePointsForm({ characters }: { characters: CharOption[] }) {
|
||||
// Como el original: al cargar no se muestra ningún formulario; se revela al
|
||||
// pulsar VENTA o COMPRA.
|
||||
const [active, setActive] = useState<'sell' | 'buy' | null>(null)
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
||||
|
||||
export function TransferForm({ characters, price }: { characters: string[]; price: number }) {
|
||||
export function TransferForm({ characters, price }: { characters: CharOption[]; price: number }) {
|
||||
const t = useTranslations('Services')
|
||||
const tp = useTranslations('Paid')
|
||||
const [character, setCharacter] = useState('')
|
||||
@@ -40,10 +41,7 @@ export function TransferForm({ characters, price }: { characters: string[]; pric
|
||||
return (
|
||||
<div className="centered">
|
||||
<form onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||
<select value={character} onChange={(e) => setCharacter(e.target.value)} required>
|
||||
<option value="" disabled>{t('selectCharacter')}</option>
|
||||
{characters.map((c) => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
<CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
|
||||
<br />
|
||||
<input type="text" placeholder={tp('transfer.destination')} value={destination} onChange={(e) => setDestination(e.target.value)} required />
|
||||
<br />
|
||||
|
||||
@@ -56,7 +56,7 @@ export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="refresh-icon" src={REFRESH_ICON} title={t('refresh')} alt={t('refresh')} />
|
||||
</button>
|
||||
<p><span>{t('note')}</span></p>
|
||||
<p><span>{t('noteLabel')}</span> {t('note')}</p>
|
||||
<br />
|
||||
|
||||
{sites.map((s) => {
|
||||
@@ -78,28 +78,31 @@ export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote
|
||||
<tr><td className="lefted">{t('pv')}: <span>{s.points}</span></td></tr>
|
||||
<tr>
|
||||
<td className="lefted small-font third-brown">
|
||||
{s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : t('neverVoted')}
|
||||
{s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : ''}
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td><hr /></td></tr>
|
||||
<tr>
|
||||
<td>
|
||||
{canVote ? (
|
||||
{!canVote ? (
|
||||
<a className="vote-button" href={s.url} target="_blank" rel="noopener noreferrer">
|
||||
{t('vote')}
|
||||
</a>
|
||||
) : isVoted || s.onCooldown ? (
|
||||
<button type="button" name="vote" className="voted-button" disabled>
|
||||
{t('voted')}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
name="vote"
|
||||
className="vote-button"
|
||||
value={s.url}
|
||||
onClick={() => vote(s)}
|
||||
disabled={busyId !== null || isVoted}
|
||||
style={isVoted ? { color: '#d79602' } : undefined}
|
||||
disabled={busyId !== null}
|
||||
>
|
||||
{isVoted ? t('voted') : busyId === s.id ? t('voting') : t('vote')}
|
||||
{busyId === s.id ? t('voting') : t('vote')}
|
||||
</button>
|
||||
) : (
|
||||
<a className="vote-button" href={s.url} target="_blank" rel="noopener noreferrer">
|
||||
{t('vote')}
|
||||
</a>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
import type { RowDataPacket } from 'mysql2'
|
||||
import { db, DB } from './db'
|
||||
import { getClassCss } from './character-info'
|
||||
|
||||
export interface GameCharacter {
|
||||
name: string
|
||||
online: boolean
|
||||
classCss: string // clase CSS de color por clase (priest, warrior…), para el <select>
|
||||
}
|
||||
|
||||
/** Personajes de una cuenta de juego (acore_characters). Vacío si no está poblada. */
|
||||
export async function getGameCharacters(accountId: number): Promise<GameCharacter[]> {
|
||||
try {
|
||||
const [rows] = await db(DB.characters).query<RowDataPacket[]>(
|
||||
'SELECT name, online FROM characters WHERE account = ?',
|
||||
'SELECT name, online, class FROM characters WHERE account = ?',
|
||||
[accountId],
|
||||
)
|
||||
return rows.map((r) => ({ name: r.name, online: r.online === 1 }))
|
||||
return rows.map((r) => ({ name: r.name, online: r.online === 1, classCss: getClassCss(r.class) }))
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
|
||||
@@ -33,12 +33,13 @@ export async function getVoteSites(): Promise<VoteSite[]> {
|
||||
|
||||
export interface VoteSiteStatus extends VoteSite {
|
||||
lastVoteAt: string | null // ISO del último voto de la cuenta en este sitio, o null
|
||||
onCooldown: boolean // true si aún no puede volver a votar (dentro de las 12h30m)
|
||||
}
|
||||
|
||||
/** Sitios de votación con la fecha del último voto de la cuenta (para el recuadro). */
|
||||
export async function getVoteSitesForAccount(accountId: number): Promise<VoteSiteStatus[]> {
|
||||
const sites = await getVoteSites()
|
||||
if (!accountId) return sites.map((s) => ({ ...s, lastVoteAt: null }))
|
||||
if (!accountId) return sites.map((s) => ({ ...s, lastVoteAt: null, onCooldown: false }))
|
||||
try {
|
||||
const [rows] = await db(DB.default).query<RowDataPacket[]>(
|
||||
'SELECT vote_site_id, MAX(created_at) AS last FROM home_votelog WHERE account_id = ? GROUP BY vote_site_id',
|
||||
@@ -47,10 +48,15 @@ export async function getVoteSitesForAccount(accountId: number): Promise<VoteSit
|
||||
const map = new Map(rows.map((r) => [Number(r.vote_site_id), r.last as Date]))
|
||||
return sites.map((s) => {
|
||||
const last = map.get(s.id)
|
||||
return { ...s, lastVoteAt: last ? new Date(last).toISOString() : null }
|
||||
const lastMs = last ? new Date(last).getTime() : 0
|
||||
return {
|
||||
...s,
|
||||
lastVoteAt: last ? new Date(last).toISOString() : null,
|
||||
onCooldown: lastMs > 0 && Date.now() - lastMs < COOLDOWN_MS,
|
||||
}
|
||||
})
|
||||
} catch {
|
||||
return sites.map((s) => ({ ...s, lastVoteAt: null }))
|
||||
return sites.map((s) => ({ ...s, lastVoteAt: null, onCooldown: false }))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -256,7 +256,17 @@
|
||||
"info": "Information",
|
||||
"back": "Back to my account",
|
||||
"backShort": "Back",
|
||||
"choose": "Choose your character:"
|
||||
"choose": "Choose your character:",
|
||||
"unstuckInfo1": "The <b>Unstuck character</b> tool lets you unstuck a character that is stuck and moves it to its Hearthstone location.",
|
||||
"unstuckInfo2": "Use this option when your character is trapped and no other option works.",
|
||||
"unstuckNote1": "The character must be offline.",
|
||||
"unstuckNote2": "You can repeat the action on the same character every 12 hours.",
|
||||
"unstuckChoose": "Choose the character you want to unstuck",
|
||||
"unstuckProcessing": "Unstucking",
|
||||
"unstuckDone": "Unstucked",
|
||||
"reviveChoose": "Choose the character you want to revive",
|
||||
"reviveProcessing": "Reviving",
|
||||
"reviveDone": "Revived"
|
||||
},
|
||||
"Paid": {
|
||||
"rename": {
|
||||
@@ -522,7 +532,8 @@
|
||||
"title": "Vote for us",
|
||||
"info": "Vote for {server} on the sites below and earn VP. You can vote on each site every 12 hours.",
|
||||
"sitesTitle": "Vote sites",
|
||||
"note": "Note: some sites may take a few minutes to credit the vote.",
|
||||
"noteLabel": "Note:",
|
||||
"note": "some sites may take a few minutes to credit the vote.",
|
||||
"refresh": "Refresh",
|
||||
"vote": "Vote",
|
||||
"voting": "Voting",
|
||||
|
||||
@@ -256,7 +256,17 @@
|
||||
"info": "Información",
|
||||
"back": "Regresar a mi cuenta",
|
||||
"backShort": "Regresar",
|
||||
"choose": "Escoge el personaje:"
|
||||
"choose": "Escoge el personaje:",
|
||||
"unstuckInfo1": "La herramienta <b>Desbloquear personaje</b> te permite desbloquear un personaje que esté atascado y lo mueve a la ubicación de su Piedra Hogar.",
|
||||
"unstuckInfo2": "Usa esta opción cuando tu personaje se encuentre atrapado y ninguna otra opción te sirva.",
|
||||
"unstuckNote1": "Se requiere que el personaje esté desconectado.",
|
||||
"unstuckNote2": "Se puede repetir la acción en un mismo personaje cada 12 horas.",
|
||||
"unstuckChoose": "Escoge el personaje que quieres desbloquear",
|
||||
"unstuckProcessing": "Desbloqueando",
|
||||
"unstuckDone": "Desbloqueado",
|
||||
"reviveChoose": "Escoge el personaje que quieres revivir",
|
||||
"reviveProcessing": "Reviviendo",
|
||||
"reviveDone": "Revivido"
|
||||
},
|
||||
"Paid": {
|
||||
"rename": {
|
||||
@@ -522,7 +532,8 @@
|
||||
"title": "Votar por nosotros",
|
||||
"info": "Vota por {server} en las siguientes páginas y recibe PV. Puedes votar en cada sitio cada 12 horas.",
|
||||
"sitesTitle": "Sitios de votación",
|
||||
"note": "Nota: algunos sitios pueden demorar unos minutos en acreditar el voto.",
|
||||
"noteLabel": "Nota:",
|
||||
"note": "algunos sitios pueden demorar unos minutos en acreditar el voto.",
|
||||
"refresh": "Refrescar",
|
||||
"vote": "Votar",
|
||||
"voting": "Votando",
|
||||
|
||||
@@ -106,6 +106,14 @@ legend {
|
||||
width: 48.1%;
|
||||
}
|
||||
|
||||
.account-fieldset {
|
||||
background: hsla(0, 100%, 0%, 0.7);
|
||||
background-blend-mode: saturation;
|
||||
background-position: left;
|
||||
background-size: 200%;
|
||||
background-image: url(../nw-images/nw-general/account-info.png);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.account-fieldset {
|
||||
display: block;
|
||||
@@ -850,12 +858,14 @@ textarea:focus, select:focus, input[type=password]:focus, input[type=number]:foc
|
||||
}
|
||||
/* acc panels */
|
||||
#account-settings, #character-settings, #account-history {
|
||||
background: hsla(0,100%,0%,0.5);
|
||||
background-image: url(../nw-images/nw-general/account-settings.webp);
|
||||
background: hsla(0, 100%, 0%, 0.7);
|
||||
background-image: url(../nw-images/nw-general/account-info.png);
|
||||
background-repeat: no-repeat;
|
||||
background-blend-mode: saturation;
|
||||
background-position: right;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 2px solid #352e2b;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,14 @@
|
||||
-- Sitios de votación (/vote-points). Se gestionan en /admin/votes, pero este seed
|
||||
-- reproduce los 4 del diseño original con sus logos (public/.../nw-vote-sites/) y URLs.
|
||||
-- OJO: las URLs apuntan a los listados de UltimoWoW (IDs 94649/496618/94147/91402);
|
||||
-- cámbialas por las de NovaWoW/nightspire en /admin/votes para que los votos cuenten aquí.
|
||||
|
||||
DELETE FROM home_votelog WHERE vote_site_id IN (SELECT id FROM home_votesite WHERE name = 'TopTest');
|
||||
DELETE FROM home_votesite WHERE name = 'TopTest';
|
||||
|
||||
INSERT INTO home_votesite (name, url, image_url, points, created_at, updated_at) VALUES
|
||||
('Gtop100', 'https://gtop100.com/topsites/World-of-Warcraft/sitedetails/UltimoWoW-94649?vote=1&pingUsername=91402', '/nw-themes/nw-ryu/nw-images/nw-vote-sites/gtop100.jpg', 1, NOW(), NOW()),
|
||||
('TopG', 'https://topg.org/wow-private-servers/in-496618-91402', '/nw-themes/nw-ryu/nw-images/nw-vote-sites/topg.webp', 1, NOW(), NOW()),
|
||||
('Top100arena', 'http://www.top100arena.com/in.asp?id=94147&incentive=91402', '/nw-themes/nw-ryu/nw-images/nw-vote-sites/top100arena.jpg', 1, NOW(), NOW()),
|
||||
('Arena-Top100', 'https://www.arena-top100.com/index.php?a=in&u=UltimoWoW&id=91402', '/nw-themes/nw-ryu/nw-images/nw-vote-sites/arenatop100.webp', 1, NOW(), NOW())
|
||||
ON DUPLICATE KEY UPDATE url = VALUES(url), image_url = VALUES(image_url), points = VALUES(points), updated_at = NOW();
|
||||
Reference in New Issue
Block a user