Симулятор обновления системы

Симулятор обновления — это полноэкранное браузерное оверлей-окно, воспроизводящее визуальный вид экранов обновления ОС с помощью трёх основных браузерных API: Fullscreen API, CSS-переходов для анимации прогресса и JavaScript-таймеров для планирования фаз. Когда пользователь нажимает «Начать симуляцию», вызывается document.documentElement.requestFullscreen() — этот API требует пользовательского жеста (клика или нажатия клавиши) в качестве меры безопасности, не может быть вызван автоматически при загрузке страницы и запускает браузерное уведомление о способе выхода из полноэкранного режима. Анимация прогресса использует нелинейную кривую сглаживания вместо линейного приращения. Значение прогресса P(t) в момент t (где t изменяется от 0 до 1 за общую длительность 30 секунд) следует квадратичному ease-in-out: P(t) = 2t² при t < 0,5 и P(t) = 1 − 2(1−t)² при t ≥ 0,5. Это создаёт быстрое начало (фаза загрузки), медленную середину (фаза установки) и быстрый конец (фаза настройки), что имитирует поведение реальных обновляющих систем ОС. Ширина полосы прогресса управляется CSS-переходом свойства width с длительностью, синхронизированной с интервалом вызова setInterval (100 мс), а сглаженное значение отображается в виде процента в интерфейсе. Планирование фаз использует конечный автомат с цепочкой обратных вызовов setTimeout. Для симуляции Windows переходы фаз происходят на 0%, 30%, 60% и 90% от общей длительности, каждый вызывает обновление текста, а в случае Windows — сообщение о перезагрузке на 100%. Симуляции macOS и Android используют более простую двухфазную модель (подготовка/установка). Симуляция Linux генерирует постепенный вывод терминала, условно добавляя строки на основе текущего значения прогресса — каждая новая строка лога apt появляется при определённых порогах прогресса, создавая иллюзию работы реального менеджера пакетов. Два механизма безопасности гарантируют, что пользователь всегда сможет выйти: обработчик клика на оверлее вызывает document.exitFullscreen() и очищает все таймеры; обработчик события fullscreenchange определяет, когда пользователь нажимает ESC (что выходит из полноэкранного режима без участия страницы), и сбрасывает всё внутреннее состояние. Событие fullscreenchange срабатывает на элементе, владеющем полноэкранным состоянием, поэтому прослушивание на document.documentElement перехватывает как программные, так и пользовательские выходы. Весь рендеринг выполняется с помощью HTML/CSS/JS — страница не делает системных вызовов, не записывает файлов, а закрытие вкладки полностью восстанавливает предыдущее состояние окна.

• Безопасность Fullscreen API: requestFullscreen() требует пользовательского жеста (клика/нажатия клавиши) согласно стандарту WHATWG Fullscreen Standard §1.2 — браузер показывает оверлей «Нажмите ESC для выхода», который страница не может подавить, гарантируя, что пользователь всегда знает о нахождении в полноэкранном режиме.
• Сглаживание прогресса: квадратичная кривая ease-in-out P(t) = 2t² (t < 0,5) / 1−2(1−t)² (t ≥ 0,5) создаёт темп быстро-медленно-быстро, имитирующий реальные обновляющие системы ОС — сглаживание вычисляется в JavaScript и применяется как CSS-процент ширины, отделяя логику анимации от рендеринга.
• Конечный автомат фаз: цепочка setTimeout продвигается через предопределённые пороги фаз (Windows: 0% → 30% → 60% → 90% → 100%), при каждом переходе обновляя отображаемое сообщение — цепочка очищается при выходе, чтобы предотвратить срабатывание устаревших обратных вызовов после закрытия оверлея.
• Симуляция терминала Linux: постепенный вывод apt генерируется условным рендерингом строк при определённых порогах прогресса (10%, 25%, 40%, 55%, 70%, 85%, 100%) — каждый порог добавляет реалистичные имена пакетов и количество байтов, а строка «Fetched X MB in Ys» появляется только при достижении итогового значения.
• Безопасность выхода: обработчик клика на оверлее вызывает exitFullscreen() и очищает все таймеры; обработчик события fullscreenchange на document.documentElement обнаруживает выход по ESC и сбрасывает состояние — оба пути независимо гарантируют очистку.
• Платформо-специфичный рендеринг: каждый вариант ОС использует уникальный CSS: Windows (синий #0078D4, шрифт Segoe UI, круговой спиннер), macOS (чёрный фон, шрифт San Francisco, SVG-логотип Apple, таймер обратного отсчёта), Linux (тёмный терминал с моноширинным шрифтом и красными/жёлтыми/зелёными элементами управления окном), Android (зелёный Material Design #4CAF50, SVG-иконка робота).
• Очистка таймеров: все дескрипторы setInterval и setTimeout сохраняются в ref-ах и очищаются как в функции остановки, так и в callback-очистке useEffect — это предотвращает утечки памяти и обновления устаревшего состояния при размонтировании компонента во время активной симуляции.