ScorevsApp es una avanzada aplicación móvil construida principalmente en React Native, pero que integra robustas capacidades nativas en Java/Kotlin para Android. Está orientada a la gestión de puntuaciones interactivas, perfiles de jugadores, estadísticas y personalización a través de un sistema de temas dinámicos sincronizados en tiempo real mediante Firebase.
| Login | Dashboard | Configuración | Burbuja Flotante |
|---|---|---|---|
 |
 |
 |
 |
- Sistema de Salas en Tiempo Real (Create/Join): Sincronización atómica mediante Firebase Realtime Database.
- Temas Dinámicos en Tiempo Real: 8 variaciones visuales (Win95, Neon, Metal, Modern, etc.) con transiciones limpias y sin residuos de renderizado.
- Marcador OOB (Out-of-Bounds): Implementación nativa de una burbuja flotante/Picture-in-Picture con soporte para gestos inteligentes (Doble Tap para regresar a la app).
- Normalización Trans-plataforma: Sincronización perfecta de variantes y temas entre la versión Web (OBS) y la App móvil.
- Gestión de Jugadores: Perfiles con fotos y nombres personalizables.
- Gestión de Link para Streaming: Generación y copiado automático del enlace de overlay para visualización web, facilitando la integración con OBS Studio y plataformas de transmisión.
- Estilizado Nativo de Alta Fidelidad: Motor nativo capaz de renderizar bordes, biseles 3D y colores CSS (rgba) con total paridad visual.
- Configuración Avanzada: Control granular de opacidad, orientación vertical (TikTok mode) y visibilidad de elementos decorativos.
El éxito de la funcionalidad de la burbuja flotante se debe a una arquitectura que combina lo mejor de ambos mundos:
- Capa JavaScript (React Native + TS): Gestiona la lógica de negocio, la navegación y la sincronización con Firebase aplicando principios de Clean Architecture para mantener el código modular, escalable y fácil de testear.
- Capa Nativa (Java/Kotlin): Crucial para el desarrollo del FloatingScoreService. Incluye un motor de renderizado dinámico que traduce tokens de diseño complejos (biseles Win95, scanlines Neon) a primitivas de Android.
- Puente de Comunicación: Se utiliza un sistema de
NativeModulespara disparar el overlay yNativeEventEmitterpara devolver las interacciones. Además, implementaGestureDetectorpara funciones avanzadas de navegación.
- Node.js
- JDK 17+ (Necesario para la compilación Kotlin/Java)
- Android SDK / Herramientas de línea de comandos
- React Native Environment Setup
- Dependencias: Ejecuta
npm installoyarn install. - Firebase: Renombra el archivo
android/app/google-services.json.exampleagoogle-services.jsony coloca tus credenciales válidas. - Metro Bundler: Inicia el servidor con
npm start. - Lanzamiento: Ejecuta
npm run androidpara compilar e instalar en tu dispositivo/emulador.
Para compilar versiones firmadas, configurar en tu archivo gradle.properties global:
MYAPP_UPLOAD_STORE_FILEMYAPP_UPLOAD_KEY_ALIASMYAPP_UPLOAD_STORE_PASSWORDMYAPP_UPLOAD_KEY_PASSWORD
- Permiso Overlay: Es obligatorio conceder "Mostrar sobre otras aplicaciones" al primer inicio o desde los ajustes del sistema.
- Batería: Configure la app como "Sin restricciones" para asegurar que la burbuja no sea eliminada por el sistema operativo en sesiones largas de juego.
- El código nativo se encuentra en
android/app/src/main/java/com/scorevsapp/. - Se utiliza un
Foreground Servicecon tipospecialUsepara garantizar la persistencia del marcador mientras la app está minimizada.
- Ejecuta la App y crea una sala.
- Desde el ícono de configuración, copia el enlace generado en el campo "Enlace para streaming".
- Abre OBS Studio o PRISM Live Studio.
- Añade una nueva fuente de tipo Navegador (Browser Source).
- Pega el enlace, ajusta el ancho a
500y el alto a300(o ajusta según tu preferencia o layout). - ¡Listo! Abre el panel de administración en tu celular y controla el stream a distancia en tiempo real.
Desarrollador de software con sólida experiencia en programación y arquitectura de sistemas. Enfocado en crear herramientas web y móviles eficientes, reactivas y con arquitecturas escalables que resuelven problemas reales.
Hecho con dedicación para la comunidad de Pump It Up.