Simulador de Atualização do Sistema

O simulador de atualização é uma sobreposição em tela cheia no navegador que reproduz a aparência visual das telas de atualização de SO usando três APIs principais do navegador: a Fullscreen API, transições CSS para animação de progresso e temporizadores JavaScript para agendamento de fases. Quando o usuário clica em 'Iniciar Simulação', document.documentElement.requestFullscreen() é chamado — essa API requer um gesto do usuário (clique ou tecla) como medida de segurança, não pode ser chamada automaticamente ao carregar a página e dispara uma notificação do navegador informando como sair da tela cheia. A animação de progresso usa uma curva de suavização não linear em vez de um incremento linear. O valor de progresso P(t) no tempo t (onde t vai de 0 a 1 ao longo da duração total de 30 segundos) segue uma ease-in-out quadrática: P(t) = 2t² para t < 0,5 e P(t) = 1 − 2(1−t)² para t ≥ 0,5. Isso cria um início rápido (fase de download), um meio lento (fase de instalação) e um fim rápido (fase de configuração), que imita o comportamento de atualizadores reais de SO. A largura da barra de progresso é controlada por uma transição CSS na propriedade width com duração compatível com a taxa de ticks do setInterval (100 ms), e o valor suavizado é mapeado para uma porcentagem exibida na interface. O agendamento de fases usa uma máquina de estados finita com callbacks encadeados por setTimeout. Para a simulação Windows, as fases fazem transição em 0%, 30%, 60% e 90% da duração total, cada uma disparando uma atualização de texto e, no caso do Windows, uma mensagem de reinicialização em 100%. As simulações macOS e Android usam um modelo mais simples de duas fases (preparando/instalando). A simulação Linux gera saída de terminal progressiva adicionando linhas condicionalmente com base no valor atual de progresso — cada nova linha de log do apt aparece em limiares específicos de progresso, criando a ilusão de um gerenciador de pacotes em tempo real. Duas saídas de segurança garantem que o usuário sempre possa sair: um listener de clique na sobreposição chama document.exitFullscreen() e limpa todos os temporizadores; um listener de fullscreenchange detecta quando o usuário pressiona ESC (que sai da tela cheia sem envolvimento da página) e redefine todo o estado interno. O evento fullscreenchange é disparado no elemento que possui o estado de tela cheia, então escutar em document.documentElement captura tanto saídas programáticas quanto iniciadas pelo usuário. Toda a renderização é feita com HTML/CSS/JS — a página não faz chamadas de sistema, não grava arquivos e fechar a aba restaura completamente o estado anterior da viewport.

• Segurança da Fullscreen API: requestFullscreen() requer um gesto do usuário (clique/tecla) conforme o WHATWG Fullscreen Standard §1.2 — o navegador exibe uma sobreposição 'Pressione ESC para sair' que a página não pode suprimir, garantindo que o usuário sempre saiba que está em modo de tela cheia.
• Suavização de progresso: A curva de ease-in-out quadrática P(t) = 2t² (t < 0,5) / 1−2(1−t)² (t ≥ 0,5) produz um ritmo rápido-lento-rápido que imita atualizadores reais de SO — a suavização é calculada em JavaScript e aplicada como porcentagem de largura CSS, desacoplando a lógica de animação da renderização.
• Máquina de estados de fases: Uma cadeia de setTimeout avança por limiares de fases predefinidos (Windows: 0% → 30% → 60% → 90% → 100%) com cada fase atualizando a mensagem exibida — a cadeia é limpa na saída para evitar callbacks obsoletos após a sobreposição ser dispensada.
• Simulação de terminal Linux: A saída progressiva do apt é gerada renderizando linhas condicionalmente em limiares específicos de progresso (10%, 25%, 40%, 55%, 70%, 85%, 100%) — cada limiar adiciona nomes de pacotes e contagens de bytes realistas, e a linha 'Fetched X MB in Ys' aparece apenas quando o total é alcançado.
• Saída de segurança: Um listener de clique na sobreposição chama exitFullscreen() e limpa todos os temporizadores; um listener de fullscreenchange em document.documentElement detecta saídas iniciadas por ESC e redefine o estado — ambos os caminhos garantem limpeza de forma independente.
• Renderização específica por plataforma: Cada variante de SO usa CSS distinto: Windows (azul #0078D4, fonte Segoe UI, spinner circular), macOS (fundo preto, fonte San Francisco, SVG do logotipo Apple, temporizador regressivo), Linux (terminal escuro com fonte monoespaçada e controles de janela vermelho/amarelo/verde), Android (verde Material Design #4CAF50, ícone SVG do robô).
• Limpeza de temporizadores: Todos os handles de setInterval e setTimeout são armazenados em refs e limpos tanto na função de stop quanto no callback de cleanup do useEffect — isso previne vazamentos de memória e atualizações de estado obsoletas se o componente for desmontado durante uma simulação ativa.