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).