# Overlays de OBS — Bantip

Tres piezas listas para usar como **Browser Source** en OBS, con el mismo lenguaje visual del
Drawer (vidrio oscuro, azul `#007DFF`/`#4DA5FF`, mascota de Bantip). Lienzo de referencia
1280×720 (usa 1920×1080 y escala ×1,5 si tu escena es Full HD). Fondo transparente.

- `subtitles.html` — badge de sala + meta de tokens + subtítulo de traducción en vivo.
- `socials.html` — redes sociales rotativas + Bantip saludando con una frase.
- `alerts.html` — alerta de propina recibida + top de fans de la sesión + chip de marca.

## Cómo agregarlos en OBS

Cada archivo es HTML/CSS/JS autocontenido (solo depende de Google Fonts). En OBS: **Fuentes →
Añadir → Navegador**, apunta al archivo con `Ruta local de archivo` (`build/unpacked/overlays/…`
tras `npm run build`), y usa 1280×720 (o 1920×1080) como ancho/alto de la fuente.

Sin datos reales conectados, cada overlay se autocompleta a los 1,5 s con datos de muestra
(`window.BantokensOverlay.demo(...)`) solo para poder previsualizarlo.

## Conectar datos reales (pendiente de infraestructura)

Los overlays están armados para recibir eventos por `BroadcastChannel("bantokens-overlay")` o
`window.postMessage` con la forma `{ channel: "bantokens-overlay", type, payload }` (ver
`overlay-bridge.js` y los tipos `room`, `goal`, `caption`, `tip`, `topFans`, `socials`,
`tokiQuote` usados en cada página).

El navegador embebido de OBS (CEF) es un proceso aparte del Chrome del streamer: no comparte
perfil, `localStorage` ni `BroadcastChannel` con la pestaña donde corre la extensión. Para que
estos overlays reciban datos reales de la sala hace falta un puente — por ejemplo un pequeño
relay WebSocket que el background service worker alimente y que estas páginas consuman por
`new WebSocket(...)`. Eso es una decisión de infraestructura aparte del branding/diseño y no
está implementado todavía.
