Simulateur de Mise à Jour Système

Le simulateur de mise à jour est une superposition plein écran dans le navigateur qui reproduit l'apparence visuelle des écrans de mise à jour de systèmes d'exploitation en utilisant trois API navigateur fondamentales : l'API Fullscreen, les transitions CSS pour l'animation de progression et les minuteurs JavaScript pour la planification des phases. Lorsque l'utilisateur clique sur « Lancer la simulation », document.documentElement.requestFullscreen() est appelé — cette API nécessite un geste utilisateur (clic ou pression de touche) comme mesure de sécurité, ne peut pas être appelée automatiquement au chargement de la page et déclenche une notification du navigateur informant l'utilisateur de la manière de quitter le plein écran. L'animation de progression utilise une courbe d'assouplissement non linéaire plutôt qu'un incrément linéaire. La valeur de progression P(t) au temps t (où t va de 0 à 1 sur la durée totale de 30 secondes) suit un assouplissement quadratique ease-in-out : P(t) = 2t² pour t < 0,5 et P(t) = 1 − 2(1−t)² pour t ≥ 0,5. Cela crée un début rapide (phase de téléchargement), un milieu lent (phase d'installation) et une fin rapide (phase de configuration), qui imite le comportement des vrais systèmes de mise à jour. La largeur de la barre de progression est pilotée par une transition CSS sur la propriété width avec une durée synchronisée sur la fréquence du setInterval (100 ms), et la valeur assouplie est convertie en pourcentage affiché dans l'interface. La planification des phases utilise une machine à états finis avec des rappels chaînés via setTimeout. Pour la simulation Windows, les phases passent à 0 %, 30 %, 60 % et 90 % de la durée totale, chacune déclenchant une mise à jour du texte et, dans le cas de Windows, un message de redémarrage à 100 %. Les simulations macOS et Android utilisent un modèle plus simple à deux phases (préparation/installation). La simulation Linux génère une sortie de terminal progressive en ajoutant conditionnellement des lignes basées sur la valeur de progression courante — chaque nouvelle ligne de journal apt apparaît à des seuils de progression spécifiques, créant l'illusion d'un gestionnaire de paquets en direct. Deux sorties de sécurité garantissent que l'utilisateur peut toujours quitter : un écouteur d'événement clic sur la superposition appelle document.exitFullscreen() et efface tous les minuteurs ; un écouteur d'événement fullscreenchange détecte lorsque l'utilisateur appuie sur Échap (ce qui quitte le plein écran sans l'intervention de la page) et réinitialise tout l'état interne. L'événement fullscreenchange se déclenche sur l'élément qui possède l'état plein écran, donc l'écoute sur document.documentElement capture à la fois les sorties programmées et celles initiées par l'utilisateur. Tout le rendu est fait en HTML/CSS/JS — la page n'effectue aucun appel système, n'écrit aucun fichier et la fermeture de l'onglet restaure entièrement l'état précédent de la fenêtre.

• Sécurité de l'API Fullscreen : requestFullscreen() nécessite un geste utilisateur (clic/pression de touche) conformément à la norme WHATWG Fullscreen §1.2 — le navigateur affiche une superposition « Appuyez sur Échap pour quitter » que la page ne peut pas supprimer, garantissant que l'utilisateur sait toujours qu'il est en mode plein écran.
• Assouplissement de la progression : la courbe d'assouplissement quadratique ease-in-out P(t) = 2t² (t < 0,5) / 1−2(1−t)² (t ≥ 0,5) produit un rythme rapide-lent-rapide qui imite les vrais systèmes de mise à jour — l'assouplissement est calculé en JavaScript et appliqué comme pourcentage de largeur CSS, découplant la logique d'animation du rendu.
• Machine à états des phases : une chaîne setTimeout avance à travers des seuils de phases prédéfinis (Windows : 0 % → 30 % → 60 % → 90 % → 100 %), chaque phase mettant à jour le message affiché — la chaîne est effacée à la sortie pour empêcher les rappels périmés de s'exécuter après la fermeture de la superposition.
• Simulation du terminal Linux : la sortie progressive de apt est générée en rendant conditionnellement des lignes à des seuils de progression spécifiques (10 %, 25 %, 40 %, 55 %, 70 %, 85 %, 100 %) — chaque seuil ajoute des noms de paquets et des comptes d'octets réalistes, et la ligne « Fetched X MB in Ys » n'apparaît que lorsque le total est atteint.
• Sécurité de sortie : un écouteur de clic sur la superposition appelle exitFullscreen() et efface tous les minuteurs ; un écouteur d'événement fullscreenchange sur document.documentElement détecte les sorties initiées par Échap et réinitialise l'état — les deux chemins garantissent indépendamment le nettoyage.
• Rendu spécifique à la plateforme : chaque variante d'OS utilise un CSS distinct : Windows (bleu #0078D4, police Segoe UI, spinner circulaire), macOS (fond noir, police San Francisco, logo Apple SVG, minuteur de compte à rebours), Linux (terminal sombre avec police monospace et contrôles de fenêtre rouge/jaune/vert), Android (Material Design vert #4CAF50, icône robot SVG).
• Nettoyage des minuteurs : toutes les références setInterval et setTimeout sont stockées dans des refs et effacées à la fois dans la fonction d'arrêt et dans le callback de nettoyage useEffect — cela empêche les fuites de mémoire et les mises à jour d'état périmées si le composant est démonté pendant une simulation active.