Simulador de Actualización del Sistema

El simulador de actualización es una superposición a pantalla completa en el navegador que reproduce la apariencia visual de las pantallas de actualización del sistema operativo utilizando tres APIs del navegador: la Fullscreen API, las transiciones CSS para la animación de progreso y los temporizadores JavaScript para la programación de fases. Cuando el usuario hace clic en 'Iniciar simulación', se llama a document.documentElement.requestFullscreen(): esta API requiere un gesto del usuario (clic o pulsación de tecla) como medida de seguridad, no puede llamarse automáticamente al cargar la página y desencadena una notificación del navegador informando al usuario sobre cómo salir de pantalla completa. La animación de progreso utiliza una curva de suavizado no lineal en lugar de un incremento lineal. El valor de progreso P(t) en el tiempo t (donde t va de 0 a 1 durante los 30 segundos totales) sigue un ease-in-out cuadrático: P(t) = 2t² para t < 0.5 y P(t) = 1 − 2(1−t)² para t ≥ 0.5. Esto crea un inicio rápido (fase de descarga), un medio lento (fase de instalación) y un final rápido (fase de configuración), que imita el comportamiento de los actualizadores reales del sistema operativo. El ancho de la barra de progreso se controla con una transición CSS en la propiedad width con una duración sincronizada con la tasa de ticks de setInterval (100 ms), y el valor suavizado se mapea a un porcentaje mostrado en la interfaz. La programación de fases usa una máquina de estados finitos con callbacks encadenados con setTimeout. Para la simulación de Windows, las fases cambian al 0%, 30%, 60% y 90% de la duración total, cada una actualizando el texto mostrado y, en el caso de Windows, un mensaje de reinicio al 100%. Las simulaciones de macOS y Android usan un modelo de dos fases más simple (preparando/instalando). La simulación de Linux genera salida progresiva de terminal añadiendo líneas condicionalmente según el valor de progreso actual: cada nueva línea de log de apt aparece en umbrales de progreso específicos, creando la ilusión de un gestor de paquetes en vivo. Dos salidas de seguridad aseguran que el usuario siempre pueda salir: un listener de clic en la superposición llama a document.exitFullscreen() y limpia todos los temporizadores; un listener del evento fullscreenchange detecta cuando el usuario pulsa ESC (que sale de pantalla completa sin la participación de la página) y restablece todo el estado interno. El evento fullscreenchange se dispara en el elemento que posee el estado de pantalla completa, por lo que escuchar en document.documentElement captura tanto las salidas programáticas como las iniciadas por el usuario. Todo el renderizado se hace con HTML/CSS/JS: la página no realiza llamadas al sistema, no escribe archivos y cerrar la pestaña restaura completamente el estado anterior del viewport.

• Seguridad de la Fullscreen API: requestFullscreen() requiere un gesto del usuario (clic/pulsación) según el WHATWG Fullscreen Standard §1.2; el navegador muestra una superposición 'Pulsa ESC para salir' que la página no puede suprimir, asegurando que el usuario siempre sepa que está en modo pantalla completa.
• Suavizado de progreso: La curva de ease-in-out cuadrático P(t) = 2t² (t < 0.5) / 1−2(1−t)² (t ≥ 0.5) produce un ritmo rápido-lento-rápido que imita los actualizadores reales del sistema operativo; el suavizado se calcula en JavaScript y se aplica como porcentaje de ancho CSS, desacoplando la lógica de animación del renderizado.
• Máquina de estados de fases: Una cadena de setTimeout avanza por umbrales de fases predefinidos (Windows: 0% → 30% → 60% → 90% → 100%) con cada fase actualizando el mensaje mostrado; la cadena se limpia al salir para evitar que callbacks obsoletos se ejecuten tras descartar la superposición.
• Simulación de terminal Linux: La salida progresiva de apt se generada renderizando líneas condicionalmente en umbrales de progreso específicos (10%, 25%, 40%, 55%, 70%, 85%, 100%); cada umbral añade nombres de paquetes y conteos de bytes realistas, y la línea 'Fetched X MB in Ys' solo aparece cuando se alcanza el total.
• Salida de seguridad: Un listener de clic en la superposición llama a exitFullscreen() y limpia todos los temporizadores; un listener del evento fullscreenchange en document.documentElement detecta salidas iniciadas por ESC y restablece el estado; ambas rutas garantizan la limpieza de forma independiente.
• Renderizado específico por plataforma: Cada variante de SO usa CSS distintivo: Windows (azul #0078D4, fuente Segoe UI, spinner circular), macOS (fondo negro, fuente San Francisco, logo SVG de Apple, temporizador de cuenta atrás), Linux (terminal oscuro con fuente monoespaciada y controles de ventana rojo/amarillo/verde), Android (verde Material Design #4CAF50, icono de robot SVG).
• Limpieza de temporizadores: Todos los handles de setInterval y setTimeout se almacenan en refs y se limpian tanto en la función de stop como en el callback de limpieza de useEffect; esto evita fugas de memoria y actualizaciones de estado obsoletas si el componente se desmonta durante una simulación activa.