System Upgrade Simulator

The upgrade simulator is a fullscreen browser overlay that reproduces the visual appearance of OS upgrade screens using three core browser APIs: the Fullscreen API, CSS transitions for progress animation, and JavaScript timers for phase scheduling. When the user clicks 'Start Simulation', document.documentElement.requestFullscreen() is called — this API requires a user gesture (click or keypress) as a security measure, cannot be called automatically on page load, and triggers a browser notification informing the user how to exit fullscreen. Progress animation uses a non-linear easing curve rather than a linear increment. The progress value P(t) at time t (where t goes from 0 to 1 over the total 30-second duration) follows a quadratic ease-in-out: P(t) = 2t² for t < 0.5 and P(t) = 1 − 2(1−t)² for t ≥ 0.5. This creates a fast start (download phase), a slow middle (install phase), and a fast finish (configuration phase), which mimics the behavior of real OS updaters. The progress bar width is driven by a CSS transition on the width property with a duration matched to the setInterval tick rate (100 ms), and the eased value is mapped to a percentage displayed in the UI. Phase scheduling uses a finite state machine with setTimeout-chained callbacks. For the Windows simulation, phases transition at 0%, 30%, 60%, and 90% of the total duration, each triggering a text update and, in the case of Windows, a restart message at 100%. The macOS and Android simulations use a simpler two-phase model (preparing/installing). The Linux simulation generates progressive terminal output by conditionally appending lines based on the current progress value — each new apt log line appears at specific progress thresholds, creating the illusion of a live package manager. Two safety exits ensure the user can always leave: a click event listener on the overlay calls document.exitFullscreen() and clears all timers; a fullscreenchange event listener detects when the user presses ESC (which exits fullscreen without the page's involvement) and resets all internal state. The fullscreenchange event fires on the element that owns the fullscreen state, so listening on document.documentElement catches both programmatic and user-initiated exits. All rendering is done with HTML/CSS/JS — the page makes no system calls, writes no files, and closing the tab fully restores the previous viewport state.

• Fullscreen API security: requestFullscreen() requires a user gesture (click/keypress) per the WHATWG Fullscreen Standard §1.2 — the browser shows a 'Press ESC to exit' overlay that the page cannot suppress, ensuring the user always knows they are in fullscreen mode.
• Progress easing: The quadratic ease-in-out curve P(t) = 2t² (t < 0.5) / 1−2(1−t)² (t ≥ 0.5) produces fast-slow-fast pacing that mimics real OS updaters — the easing is computed in JavaScript and applied as a CSS width percentage, decoupling the animation logic from the rendering.
• Phase state machine: A setTimeout chain advances through predefined phase thresholds (Windows: 0% → 30% → 60% → 90% → 100%) with each phase updating the displayed message — the chain is cleared on exit to prevent stale callbacks from firing after the overlay is dismissed.
• Linux terminal simulation: Progressive apt output is generated by conditionally rendering lines at specific progress thresholds (10%, 25%, 40%, 55%, 70%, 85%, 100%) — each threshold adds realistic package names and byte counts, and the 'Fetched X MB in Ys' line appears only when the total is reached.
• Exit safety: A click listener on the overlay calls exitFullscreen() and clears all timers; a fullscreenchange event listener on document.documentElement detects ESC-initiated exits and resets state — both paths independently guarantee cleanup.
• Platform-specific rendering: Each OS variant uses distinct CSS: Windows (#0078D4 blue, Segoe UI font, circular spinner), macOS (black background, San Francisco font, Apple logo SVG, countdown timer), Linux (dark terminal with monospace font and red/yellow/green window controls), Android (Material Design green #4CAF50, robot icon SVG).
• Timer cleanup: All setInterval and setTimeout handles are stored in refs and cleared in both the stop function and the useEffect cleanup callback — this prevents memory leaks and stale state updates if the component unmounts during an active simulation.