From 6ca94c28038a0591c6df71304dff3258fa0665e3 Mon Sep 17 00:00:00 2001 From: adevopg Date: Tue, 14 Jul 2026 10:55:43 +0000 Subject: [PATCH] =?UTF-8?q?web-next:=20selector=20de=20personaje=20colorea?= =?UTF-8?q?do=20+=20redise=C3=B1o=20unstuck=20+=20fixes=20vote/account-inf?= =?UTF-8?q?o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CharacterSelect: componente reutilizable que colorea las opciones por clase (class="priest big-font"…) y el setCharacter(e.target.value)} required> - - {characters.map((c) => ( - - ))} - +
-
- {message && ( - {message.text} - )} + {message && {message.text}}
) diff --git a/web-next/components/CharacterSelect.tsx b/web-next/components/CharacterSelect.tsx new file mode 100644 index 0000000..5efd75e --- /dev/null +++ b/web-next/components/CharacterSelect.tsx @@ -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 onChange(e.target.value)} required={required}> + + {characters.map((c) => ( + + ))} + + ) +} diff --git a/web-next/components/GoldForm.tsx b/web-next/components/GoldForm.tsx index 15d39eb..55eb773 100644 --- a/web-next/components/GoldForm.tsx +++ b/web-next/components/GoldForm.tsx @@ -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 (
- +
setCharacter(e.target.value)} required> - - {characters.map((c) => ( - - ))} - +
-

{t('note')}

+

{t('noteLabel')} {t('note')}


{sites.map((s) => { @@ -78,28 +78,31 @@ export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote {t('pv')}: {s.points} - {s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : t('neverVoted')} + {s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : ''}
- {canVote ? ( + {!canVote ? ( + + {t('vote')} + + ) : isVoted || s.onCooldown ? ( + + ) : ( - ) : ( - - {t('vote')} - )} diff --git a/web-next/lib/characters.ts b/web-next/lib/characters.ts index 76bdb12..081b454 100644 --- a/web-next/lib/characters.ts +++ b/web-next/lib/characters.ts @@ -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