// ══════════════════════════════════════════════════════════════════════
// screens.jsx — Pantallas de inicio y attract screen
//
// Contiene:
// · ArcadeBG — fondo con grid y glow (compartido con otros archivos)
// · UnnicLogo — logo Unnic AI
// · CornerMarks — marcas de esquina decorativas
// · ScreenInicio — pantalla de presentación con botón EMPEZAR
// · ScreenAttract — pantalla idle: leaderboard animado + CTA
//
// Resolución de diseño: 1080×1920 px (9:16 portrait kiosk)
// Todos los valores de px son para esa resolución — el escalado
// a la pantalla real lo hace App() en kiosco.html con CSS transform.
// ══════════════════════════════════════════════════════════════════════
const UNNIC_YELLOW = '#dddb26';
const PRIMARY = '#031d40'; // deep navy (brand)
const PRIMARY_SOFT = '#0a3160'; // accent tint
const PRIMARY_DARK = '#02132c';
const PRIMARY_GLOW = '#2a5aa8'; // for glows/gradients on dark bg
const BG = '#020914'; // deeper navy-black
const SURFACE = '#081730';
const SURFACE_2 = '#0d2348';
const BORDER = 'rgba(255,255,255,0.08)';
const TEXT = '#f5f5fa';
const TEXT_DIM = 'rgba(245,245,250,0.55)';
const OK = 'oklch(0.78 0.19 150)';
const ERR = 'oklch(0.66 0.25 22)';
// ─── Shared chrome: subtle grid bg + corner marks ───
function ArcadeBG({ children, accent = PRIMARY }) {
return (
{/* radial glow */}
{/* grid */}
{/* scanline */}
{children}
);
}
function CornerMarks() {
const m = (pos) => ({
position: 'absolute', width: 32, height: 32,
borderColor: 'rgba(255,255,255,0.15)',
...pos,
});
return (
<>
);
}
// ══════════════════════════════════════════════════════════════
// 1. INICIO
// ══════════════════════════════════════════════════════════════
function ScreenInicio({ onStart, active = true, liveTotal = 0 }) {
const [pulse, setPulse] = React.useState(0);
React.useEffect(() => {
if (!active) return;
const t = setInterval(() => setPulse(p => p + 1), 1400);
return () => clearInterval(t);
}, [active]);
return (
{/* top header — stacked for vertical */}
{window.t('event_label')}
{/* Language switcher — top-right corner */}
{/* big centered block: hero + button grouped around vertical center */}
{window.t('el_reto')}
{window.t('hero_line1')}
{window.t('hero_pre_word') ? window.t('hero_pre_word') + ' ' : ''}{window.t('hero_word')}
{window.t('hero_line3')} {window.t('hero_ai')}?
{window.t('hero_subtitle')}
{window.t('hero_subtitle2')}
{window.t('tap_to_play')}
{/* minimal footer strip — kept inside visible zone */}
{window.t('participants', { n: liveTotal > 0 ? liveTotal : '—' })}
·
{window.t('prize_label')} {window.t('prize_amount')}
);
}
// ══════════════════════════════════════════════════════════════
// ATTRACT SCREEN — idle / sin uso
// Combina hero llamativo + leaderboard animado en vivo
// ══════════════════════════════════════════════════════════════
function ScreenAttract({ onStart, liveScores = [], liveTotal = 0 }) {
const [pulse, setPulse] = React.useState(0);
const [scrollY, setScrollY] = React.useState(0);
// Refs for scroll state — shared between raf loop and touch handlers
const posRef = React.useRef(0);
const dirRef = React.useRef(1);
const rafRef = React.useRef(null);
const isTouchingRef = React.useRef(false);
const touchStartYRef = React.useRef(0);
const touchStartScrollRef = React.useRef(0);
// Button pulse
React.useEffect(() => {
const t = setInterval(() => setPulse(p => p + 1), 1400);
return () => clearInterval(t);
}, []);
const STATIC_MODELS = [
{ name: 'Claude Opus', brand: 'anthropic', kind: 'ai', score: 93 },
{ name: 'GPT-5', brand: 'openai', kind: 'ai', score: 91 },
{ name: 'Claude Sonnet', brand: 'anthropic', kind: 'ai', score: 89 },
{ name: 'GPT-4', brand: 'openai', kind: 'ai', score: 81 },
];
const ATTRACT_ROWS = React.useMemo(() => {
const humanRows = liveScores.length > 0
? liveScores.map(e => ({ name: e.name, kind: 'human', score: e.score }))
: [
'MARTA G.','DAVID Ñ.','ANA P.','LEO B.','CARLA S.',
'JAVIER R.','SOFIA M.','MARC T.','ELENA B.','PABLO R.',
'LUCIA G.','OMAR S.','RITA V.','DIEGO C.','ALBA N.',
].map((name, i) => ({ name, kind: 'human', score: Math.max(12, 88 - i * 4.2) }));
return [...STATIC_MODELS, ...humanRows].sort((a, b) => b.score - a.score);
}, [liveScores]);
const ROW_H = 76;
const ROW_GAP = 8;
const ROW_STRIDE = ROW_H + ROW_GAP;
const VISIBLE = 8;
const maxPos = Math.max(0, (ATTRACT_ROWS.length - VISIBLE) * ROW_STRIDE);
// Auto-scroll: slow pan down/up — pauses while user is touching
React.useEffect(() => {
const tick = () => {
if (!isTouchingRef.current) {
posRef.current += dirRef.current * 0.4;
if (posRef.current >= maxPos) { posRef.current = maxPos; dirRef.current = -1; }
if (posRef.current <= 0) { posRef.current = 0; dirRef.current = 1; }
setScrollY(posRef.current);
}
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [maxPos]);
// Touch scroll handlers
const handleTouchStart = React.useCallback((e) => {
isTouchingRef.current = true;
touchStartYRef.current = e.touches[0].clientY;
touchStartScrollRef.current = posRef.current;
}, []);
const handleTouchMove = React.useCallback((e) => {
if (!isTouchingRef.current) return;
// Compensate for CSS scale: kiosk is 1080px wide, screen may be narrower
const scale = window.innerWidth / 1080;
const dy = touchStartYRef.current - e.touches[0].clientY;
const newPos = Math.max(0, Math.min(maxPos, touchStartScrollRef.current + dy / scale));
posRef.current = newPos;
setScrollY(newPos);
}, [maxPos]);
const handleTouchEnd = React.useCallback(() => {
isTouchingRef.current = false;
// Resume auto-scroll in the direction that makes sense from current position
dirRef.current = posRef.current >= maxPos ? -1 : 1;
}, [maxPos]);
const UNNIC_YELLOW = '#dddb26';
const BG = '#020914';
return (
{/* Language switcher */}
{/* Animated background grid */}
{/* Top radial glow — yellow-tinted */}
{/* Blue radial glow — matches ArcadeBG */}
{/* Scanlines */}
{/* ── HERO ZONE (top 55%) ── */}
{/* Logo */}
{/* Headline */}
{window.t('el_reto')}
{window.t('hero_line1')}{window.t('hero_pre_word') ? ' ' + window.t('hero_pre_word') : ''}
{window.t('hero_word')}
{window.t('hero_line3')} {window.t('hero_ai')}?
{/* Pulsing CTA */}
{/* Divider */}
{/* ── LEADERBOARD ZONE (bottom 45%) ── */}
{/* Header */}
{window.t('clasif_directo')}
{window.t('participants', { n: liveTotal || ATTRACT_ROWS.length })}
{/* Scrolling list — touch-draggable + auto-scroll when idle */}
{/* Top fade */}
{/* Bottom fade */}
{ATTRACT_ROWS.map((r, idx) => {
const isAI = r.kind === 'ai';
const color = isAI
? (r.brand === 'anthropic' ? '#d4a574' : '#6fb39a')
: '#ffffff';
return (
{String(idx + 1).padStart(2, '0')}
{isAI ? 'AI' : r.name.split(' ').map(s => s[0]).slice(0, 2).join('')}
{/* Nombre + barra de puntuación */}
{r.name}
{isAI && {window.t('ai_tag')}}
{/* Barra de puntuación */}
{Math.round(r.score)}%
);
})}
{langs.map(({ code, label }) => {
const active = (window.currentLang || 'es') === code;
return (
);
})}
);
}
window.ScreenAttract = ScreenAttract;
window.ScreenInicio = ScreenInicio;
window.LangSwitcher = LangSwitcher;
window.ArcadeBG = ArcadeBG;
window.UnnicLogo = UnnicLogo;
window.CornerMarks = CornerMarks;
window.UNNIC_YELLOW = UNNIC_YELLOW;
window.PRIMARY = PRIMARY;
window.PRIMARY_SOFT = PRIMARY_SOFT;
window.PRIMARY_DARK = PRIMARY_DARK;
window.BG = BG;
window.SURFACE = SURFACE;
window.SURFACE_2 = SURFACE_2;
window.BORDER = BORDER;
window.TEXT = TEXT;
window.TEXT_DIM = TEXT_DIM;
window.OK = OK;
window.ERR = ERR;