feat: time-based credits, JUGADORES leaderboard, fix footer visibility

- Credits system: 1€/day, 5€/week, 15€/month time-based access via Redsys
  - credits table with token, tier, expires_at, status lifecycle
  - /api/credito/iniciar, /api/credito/estado, /api/pregunta/enviar endpoints
  - Polling-based token delivery to browser after Redsys URLOK redirect
  - localStorage token storage with expiry check on load
- JUGADORES leaderboard: top 7 players by questions used, polled every 60s
  - /api/jugadores endpoint, PlayerLeaderboard component in Standings sidebar
- Footer: moved into Standings sidebar (.standings__footer) so it's always visible
- pregunta.tsx: complete redesign with tier cards, credit badge, spinner, success state
- pregunta.css: new styles for tier cards, input, badge, spinner, success, link-btn

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 14:43:25 +01:00
parent 2fac92356d
commit e772fb5cc0
6 changed files with 857 additions and 117 deletions

View File

@@ -173,6 +173,7 @@ body {
.pregunta__links {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
}
@@ -185,3 +186,138 @@ body {
.pregunta__links a:hover {
color: var(--text-dim);
}
.pregunta__links-sep {
color: var(--text-muted);
font-size: 13px;
}
.pregunta__link-btn {
background: none;
border: none;
padding: 0;
color: var(--text-muted);
font-size: 13px;
font-family: var(--sans);
cursor: pointer;
}
.pregunta__link-btn:hover {
color: var(--text-dim);
}
/* ── Header row (logo + credit badge) ─────────────────────────── */
.pregunta__header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.pregunta__credit-badge {
font-size: 12px;
font-weight: 600;
color: #4caf7d;
background: rgba(76, 175, 125, 0.12);
border: 1px solid rgba(76, 175, 125, 0.25);
border-radius: 20px;
padding: 4px 12px;
white-space: nowrap;
}
/* ── Success banner ────────────────────────────────────────────── */
.pregunta__success {
background: rgba(76, 175, 125, 0.1);
border: 1px solid rgba(76, 175, 125, 0.25);
border-radius: 6px;
padding: 10px 14px;
color: #4caf7d;
font-size: 13px;
font-weight: 500;
}
/* ── Username input ────────────────────────────────────────────── */
.pregunta__input {
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
color: var(--text);
font-family: var(--sans);
font-size: 14px;
line-height: 1.5;
transition: border-color 0.15s;
}
.pregunta__input:focus {
outline: none;
border-color: #444;
}
.pregunta__input::placeholder {
color: var(--text-muted);
}
/* ── Tier cards ────────────────────────────────────────────────── */
.tier-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.tier-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 18px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
font-family: var(--sans);
color: var(--text);
transition: border-color 0.15s, background 0.15s;
}
.tier-card:hover {
border-color: #444;
}
.tier-card--selected {
border-color: var(--accent);
background: rgba(217, 119, 87, 0.08);
}
.tier-card__price {
font-size: 22px;
font-weight: 700;
color: var(--accent);
}
.tier-card__label {
font-size: 12px;
color: var(--text-dim);
}
/* ── Spinner ───────────────────────────────────────────────────── */
.pregunta__spinner {
width: 32px;
height: 32px;
border: 3px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: pregunta-spin 0.8s linear infinite;
margin: 8px auto;
}
@keyframes pregunta-spin {
to { transform: rotate(360deg); }
}