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:
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user