Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web-next: selector de personaje coloreado + rediseño unstuck + fixes vote/account-info

Browse Source 
- 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:
Inna Hoover Brown
2026-07-14 10:55:43 +00:00
parent b9803adeb9
commit 6ca94c2803
22 changed files with 227 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-next/components/TradePointsForm.tsx
+6 -11
View File
@@ -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)