// ══════════════════════════════════════════════════════════════════════ // screens-q.jsx — Pantallas del juego en curso // // Contiene: // · TimerRing — círculo de cuenta atrás (amarillo → rojo en ≤3 s) // · ProgressDots — barra de progreso 01/10 // · ScreenPreparado — cuenta atrás 5…1 antes de empezar // · ScreenPregunta — pantalla de pregunta con 4 opciones // · ScreenCalculo — animación de "calculando puntuación" // // Lógica de puntuación (definida en kiosco.html → calcScore): // Acierto con ≥5 s restantes → 9 + bonus (0–1 pt según rapidez) // Acierto con <5 s restantes → 9 pts fijos // Fallo / timeout → 0 pts // Máximo posible → 100 pts (10 preguntas × 10 pts) // ══════════════════════════════════════════════════════════════════════ function TimerRing({ seconds = 10, running = true, onEnd, onTick, size = 180 }) { const [t, setT] = React.useState(seconds); React.useEffect(() => { setT(seconds); }, [seconds]); React.useEffect(() => { if (!running) return; if (t <= 0) { onEnd && onEnd(); return; } onTick && onTick(t); const id = setTimeout(() => setT(v => v - 0.1), 100); return () => clearTimeout(id); }, [t, running]); const pct = Math.max(0, t / seconds); const r = size / 2 - 10; const c = 2 * Math.PI * r; const warn = t <= 3; return (
{Math.ceil(t)}
{window.t('seg')}
); } function ProgressDots({ current = 3, total = 10 }) { return (
{String(current).padStart(2,'0')} / {total}
{Array.from({ length: total }).map((_, i) => (
))}
); } // ══════════════════════════════════════════════════════════════ // 1b. PREPARADO — countdown 5…1 antes de la primera pregunta // ══════════════════════════════════════════════════════════════ function ScreenPreparado({ onReady }) { const [count, setCount] = React.useState(5); const [dots, setDots] = React.useState(0); const [gone, setGone] = React.useState(false); const TIPS = [ { icon: '✓', text: window.t('tip_accuracy') }, { icon: '⚡', text: window.t('tip_speed') }, ]; // Tick each second React.useEffect(() => { if (count <= 0) { setGone(true); const t = setTimeout(() => onReady && onReady(), 600); return () => clearTimeout(t); } const t = setTimeout(() => setCount(c => c - 1), 1000); return () => clearTimeout(t); }, [count]); // Animated dots for "generando…" React.useEffect(() => { const t = setInterval(() => setDots(d => (d + 1) % 4), 350); return () => clearInterval(t); }, []); return ( {/* Logo */}
{/* Generando preguntas */}
{window.t('generando')}{'.'.repeat(dots)}
{/* Scanning bar */}
{/* Big countdown number */}
{count > 0 ? count : window.t('ya')}
{/* Two static tip cards */}
{TIPS.map((tip, i) => (
{tip.icon}
{tip.text}
))}
{/* Points system explainer */}
{window.t('pts_correct')} 9 pts · {window.t('pts_bonus')} {window.t('pts_bonus_val')} · {window.t('pts_wrong')} 0 pts
); } // ══════════════════════════════════════════════════════════════ function ScreenPregunta({ current = 3, total = 10, secondsPerQ = 30, question = "Una fábrica produce 240 piezas por hora con 3 robots. Si se añaden 2 robots más operando al 80% de eficiencia, ¿cuántas piezas por hora producirá la línea?", options = [ "320 piezas/hora", "368 piezas/hora", "400 piezas/hora", "448 piezas/hora", ], correct = 1, phase = 'answering', // 'answering' | 'suspense' | 'revealed' picked = null, aiPercents = [12, 58, 22, 8], humanPercents = [31, 24, 34, 11], onPick, onTimeout, }) { const letters = ['A', 'B', 'C', 'D']; const suspense = phase === 'suspense'; const revealed = phase === 'revealed'; const locked = suspense || revealed; // Track timer value for urgency effect const [timerVal, setTimerVal] = React.useState(secondsPerQ); // Shake/scan pulse during suspense const [tick, setTick] = React.useState(0); React.useEffect(() => { if (!suspense) return; const id = setInterval(() => setTick(t => t + 1), 120); return () => clearInterval(id); }, [suspense]); return ( {/* Top bar — logo + timer row */}
{/* Question + options as a centered block */}
{suspense ? window.t('analizando') : window.t('pregunta_n', { n: String(current).padStart(2, '0') })}

{question}

{/* Options — single column stack for vertical */}
{options.map((opt, i) => { const isPicked = picked === i; const isTimeout = revealed && picked === -1; // se agotó el tiempo // Distinción clave: respuesta correcta elegida por el jugador vs. revelada por timeout const isCorrect = revealed && i === correct && !isTimeout; // ✓ acertaste const isSkipped = revealed && i === correct && isTimeout; // → era esta, pero no respondiste const isWrong = revealed && isPicked && i !== correct; // ✕ fallaste const suspensePicked = suspense && isPicked; const pulseBorder = suspensePicked ? (tick % 2 ? window.UNNIC_YELLOW : '#fff') : null; // Colores según estado const bg = isCorrect ? `color-mix(in srgb, ${window.OK} 18%, ${window.SURFACE})` : isSkipped ? `color-mix(in srgb, #4488cc 12%, ${window.SURFACE})` // azul suave: "era esta" : isWrong ? `color-mix(in srgb, ${window.ERR} 20%, ${window.SURFACE})` : (isPicked || suspensePicked) ? window.SURFACE_2 : window.SURFACE; const border = isCorrect ? window.OK : isSkipped ? '#5599dd' : isWrong ? window.ERR : pulseBorder ? pulseBorder : isPicked ? window.UNNIC_YELLOW : window.BORDER; // Opciones incorrectas en timeout: desvanecidas. Skipped: visible pero distinta del verde const faded = (suspense && !isPicked) || (isTimeout && !isSkipped); return ( ); })}
{/* Urgency vignette — red glow from bottom when time is low */} {!locked && timerVal <= secondsPerQ * 0.4 && (
)} {/* suspense banner */} {suspense && (
{window.t('es_correcta')}
)} ); } // Animated count-up %, with bar fill synced function useCountUp(target, duration = 900, delay = 0) { const [v, setV] = React.useState(0); React.useEffect(() => { let raf; let start; const t0 = performance.now(); const tick = (now) => { if (now - t0 < delay) { raf = requestAnimationFrame(tick); return; } if (!start) start = now; const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setV(target * eased); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [target, duration, delay]); return v; } function ResultBar({ label, value, accent, delay = 0 }) { const v = useCountUp(value, 1100, delay); return (
{label}
{Math.round(v)}%
); } // ══════════════════════════════════════════════════════════════ // 3. CÁLCULO // ══════════════════════════════════════════════════════════════ function ScreenCalculo() { const [dots, setDots] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setDots(d => (d + 1) % 4), 400); return () => clearInterval(t); }, []); // fake scanning lines const [scan, setScan] = React.useState(0); React.useEffect(() => { let raf; const tick = () => { setScan(s => (s + 1) % 200); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); return (
{/* rotating rings */}
{[1, 0.78, 0.56].map((s, i) => (
))}

{window.t('calculando1')}
{window.t('calculando2')}{'.'.repeat(dots)}

{window.t('comparando')}
{/* decode stream — 2 rows for vertical */}
{['claude-opus-4.5', 'claude-sonnet-4.5', 'gpt-5', 'gpt-4', 'gpt-3.5', 'gpt-3', 'gpt-2'].map((m, i) => ( i ? window.UNNIC_YELLOW : 'rgba(255,255,255,0.08)'}`, color: scan / 25 > i ? window.UNNIC_YELLOW : window.TEXT_DIM, transition: 'all 200ms', textAlign: 'center', }}> {m} ✓ ))}
); } window.ScreenPreparado = ScreenPreparado; window.TimerRing = TimerRing; window.ProgressDots = ProgressDots; window.ScreenPregunta = ScreenPregunta; window.ScreenCalculo = ScreenCalculo;