Marcador

El marcador funciona como una pequeña máquina de estados en el cliente: cada equipo es un objeto con campos de nombre, puntuación y color, y toda la plantilla se persiste en window.localStorage como una cadena JSON en cada mutación. Dado que localStorage es síncrono y está acotado al origen más el perfil del navegador, la misma pestaña sobrevive a una actualización, pero un navegador diferente o una ventana de modo privado comienza con una plantilla vacía. La animación de dígitos con estilo de volteo es CSS puro: cada dígitos son dos mitades rotadas alrededor del eje X, y un cambio de puntuación intercambia el dígito visible mientras una transición transform: rotateX de 300-400 ms anima la solapa. Como la animación está impulsada por el estado local en lugar de un fotograma de red, la pantalla sigue animándose incluso cuando el Wi-Fi del lugar se cae a mitad del partido. La presentación a pantalla completa usa la API estándar Fullscreen (element.requestFullscreen, document.exitFullscreen) para que el tablero llene un proyector o televisor sin el chrome del navegador. La sincronización entre pestañas se aprovecha del evento storage: cuando la clave de localStorage cambia en una pestaña, todas las demás pestañas del mismo origen reciben un StorageEvent y se re-renderizan desde el JSON actualizado. Esto permite que un teléfono de árbitro y un portátil al lado de la cancha se mantengan sincronizados sin ningún backend, ya que ningún dato sale del dispositivo.

• Persistencia de estado: window.localStorage.setItem con una plantilla serializada como JSON en cada cambio de puntuación, acotado por origen y perfil del navegador
• Animación de volteo: dos pseudo-mitades CSS animadas con transform: rotateX durante aproximadamente 300-400 ms; no se necesita bucle de animación JS
• API Fullscreen: element.requestFullscreen() / document.exitFullscreen() con el evento fullscreenchange para rastrear la salida con la tecla Esc
• Sincronización multi-pestaña: window.addEventListener('storage', handler) se dispara en cada otra pestaña cuando la clave cambia
• Puntuación mínima: las puntuaciones se limitan a cero para que el botón de menos no produzca resultados negativos durante el juego casual
• Tema de color: propiedades CSS personalizadas (--team-a, --team-b) intercambian la paleta sin re-renderizar el árbol DOM
• Los límites de puntuación siguen el conjunto de reglas activo, por ejemplo el baloncesto no tiene límite, el tenis de mesa termina en 11 con regla de 2 puntos en empate