Inna
6ca94c2803
- 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>
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
'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>
|
|
)
|
|
}
|