Kiosk refresh · 2025-09-30
Contexto
- Brief: compactar toda la información en display vertical 1080×1920 (22”), mejorar jerarquía visual/UX legible a 3 m, reforzar seguridad OTP y controles multimedia.
- Alcance: rediseño layout front-end, mejoras de clima/noticias/indicadores/ticker, controles de radio en pantalla, rotación OTP en cada escaneo y hash de assets estáticos para bust de caché.
Cambios principales
- Cabecera: clima resumido en barra superior (
status-chip), reloj y fecha ampliados, OTP consolidado en tarjeta rígida con QR 168px.
- Clima: módulo lateral con condición (emoji representa cielo) + probabilidad de lluvia y viento separados; forecast rotado para 3 slots.
- Noticias/indicadores: rotación automática (45s) en lotes legibles (
NEWS_VISIBLE_COUNT=3, INDICATOR_VISIBLE_COUNT=4), filtrando “dólar acuerdo” y formateando CLP/porcentajes.
- Radio: controles (
⏯️, volumen ±6 %) conectados al backend (display:radio_toggle, display:volume_bump), metadata Now Playing de T13 Radio en panel y ticker.
- Ticker: combina clima actual, radio, titular más reciente y el set filtrado de indicadores.
- OTP/seguridad: nuevo evento
control:qr_scan fuerza rotación tras cada escaneo; botones de pie incluyen limpieza de sesión.
- Build pipeline:
scripts/build-web.mjs genera hashes (entryNames: [name].[hash], CSS sha256) y escribe manifest.json + version.json (buildId).
Consideraciones de UX
- Tipografía base
clamp(18px, 1.8vw, 22px) para lectura a ~3 m.
- Paneles laterales en grid
minmax(320px, 360px) asegurando columnas dentro de 1080 px, con overflow sólo en escenarios extremos (layout__stage).
- Emoticonos de clima = condición del cielo; lluvia siempre explicitada con
🌧️ XX% para evitar ambigüedad solicitada.
Pruebas
npm run build (esbuild+tsc) ← asegura compilación TS y hashing.
- Verificación manual en navegador devtools con viewport 1080×1920: sin scroll vertical global, ticker activo y tamaños legibles.
Pendientes relacionados
- Revisar tasks #1, #5, #7, #15, #18, #19 del backlog para próximas iteraciones (creación de salas, capa de votaciones, pruebas automatizadas, documentación ampliada).