System-Upgrade-Simulator

Der Upgrade-Simulator ist eine browserweite Vollbild-Einblendung, die das visuelle Erscheinungsbild von Betriebssystem-Upgrade-Bildschirmen mithilfe von drei zentralen Browser-APIs nachbildet: der Fullscreen API, CSS-Übergängen für die Fortschrittsanimation und JavaScript-Timern für die Phasensteuerung. Wenn der Benutzer auf „Simulation starten“ klickt, wird document.documentElement.requestFullscreen() aufgerufen — diese API erfordert als Sicherheitsmaßnahme eine Benutzergeste (Klick oder Tastendruck), kann nicht automatisch beim Laden der Seite ausgelöst werden und löst eine Browser-Benachrichtigung aus, die den Benutzer darüber informiert, wie er den Vollbildmodus beendet. Die Fortschrittsanimation verwendet eine nichtlineare Easing-Kurve statt einer linearen Steigerung. Der Fortschrittswert P(t) zum Zeitpunkt t (wobei t über die gesamte Dauer von 30 Sekunden von 0 auf 1 steigt) folgt einer quadratischen Ease-in-out-Funktion: P(t) = 2t² für t < 0,5 und P(t) = 1 − 2(1−t)² für t ≥ 0,5. Dies erzeugt einen schnellen Start (Download-Phase), eine langsame Mitte (Installationsphase) und ein schnelles Ende (Konfigurationsphase), was das Verhalten echter Betriebssystem-Updater nachahmt. Die Breite des Fortschrittsbalkens wird durch eine CSS-Transition auf der width-Eigenschaft gesteuert, deren Dauer auf die setInterval-Taktrate (100 ms) abgestimmt ist, und der geglättete Wert wird als Prozentwert in der Benutzeroberfläche angezeigt. Die Phasensteuerung nutzt einen endlichen Zustandsautomaten mit setTimeout-verketteten Rückrufen. Bei der Windows-Simulation erfolgen Phasenwechsel bei 0 %, 30 %, 60 % und 90 % der Gesamtdauer, wobei jede Phase eine Textaktualisierung auslöst und bei 100 % im Fall von Windows eine Neustart-Nachricht angezeigt wird. Die macOS- und Android-Simulationen verwenden ein einfacheres Zweiphasenmodell (Vorbereiten/Installieren). Die Linux-Simulation erzeugt schrittweise Terminalausgabe, indem Zeilen bedingt anhand des aktuellen Fortschrittswerts angefügt werden — jede neue apt-Logzeile erscheint bei bestimmten Fortschrittsschwellen und erzeugt den Eindruck eines laufenden Paketmanagers. Zwei sichere Ausstiegsmechanismen stellen sicher, dass der Benutzer die Simulation jederzeit verlassen kann: Ein Klick-Ereignislistener auf der Einblendung ruft document.exitFullscreen() auf und löscht alle Timer; ein fullscreenchange-Ereignislistener erkennt, wenn der Benutzer ESC drückt (was den Vollbildmodus ohne Mitwirkung der Seite beendet), und setzt alle internen Zustände zurück. Das fullscreenchange-Ereignis wird auf dem Element ausgelöst, dem der Vollbildzustand gehört — ein Listener auf document.documentElement fängt sowohl programmgesteuerte als auch vom Benutzer initiierte Beendigungen ab. Die gesamte Darstellung erfolgt mit HTML/CSS/JS — die Seite tätigt keine Systemaufrufe, schreibt keine Dateien, und das Schließen des Tabs stellt den vorherigen Ansichtszustand vollständig wieder her.

• Fullscreen-API-Sicherheit: requestFullscreen() erfordert eine Benutzergeste (Klick/Tastendruck) gemäß dem WHATWG Fullscreen Standard §1.2 — der Browser zeigt eine Einblendung „ESC zum Beenden drücken“ an, die die Seite nicht unterdrücken kann, sodass der Benutzer stets weiß, dass er sich im Vollbildmodus befindet.
• Fortschritts-Glättung: Die quadratische Ease-in-out-Kurve P(t) = 2t² (t < 0,5) / 1−2(1−t)² (t ≥ 0,5) erzeugt ein schnell-langsam-schnell-Tempo, das echte Betriebssystem-Updater nachahmt — die Glättung wird in JavaScript berechnet und als CSS-Breite in Prozent angewendet, wodurch die Animationslogik von der Darstellung entkoppelt ist.
• Phasen-Zustandsautomat: Eine setTimeout-Kette durchläuft vordefinierte Phasenschwellen (Windows: 0 % → 30 % → 60 % → 90 % → 100 %), wobei jede Phase die angezeigte Nachricht aktualisiert — die Kette wird beim Beenden gelöscht, um zu verhindern, dass veraltete Rückrufe nach dem Ausblenden der Einblendung noch feuern.
• Linux-Terminal-Simulation: Schrittweise apt-Ausgabe wird erzeugt, indem Zeilen bei bestimmten Fortschrittsschwellen bedingt gerendert werden (10 %, 25 %, 40 %, 55 %, 70 %, 85 %, 100 %) — jede Schwelle fügt realistische Paketnamen und Byteanzahlen hinzu, und die Zeile „Fetched X MB in Ys“ erscheint erst, wenn der Gesamtwert erreicht ist.
• Sicherer Ausstieg: Ein Klick-Listener auf der Einblendung ruft exitFullscreen() auf und löscht alle Timer; ein fullscreenchange-Ereignislistener auf document.documentElement erkennt ESC-initiierte Beendigungen und setzt den Zustand zurück — beide Wege garantieren eigenständig eine vollständige Bereinigung.
• Plattformspezifische Darstellung: Jede Betriebssystemvariante verwendet eigene CSS-Styles: Windows (#0078D4-Blau, Schriftart Segoe UI, kreisförmiger Ladeindikator), macOS (schwarzer Hintergrund, Schriftart San Francisco, Apple-Logo-SVG, Countdown-Timer), Linux (dunkles Terminal mit Monospace-Schriftart und rot/gelb/grünen Fenstersteuerelementen), Android (Material Design Grün #4CAF50, Roboter-Icon-SVG).
• Timer-Bereinigung: Alle setInterval- und setTimeout-Handles werden in Refs gespeichert und sowohl in der Stop-Funktion als auch im useEffect-Bereinigungsrückruf gelöscht — dies verhindert Speicherlecks und veraltete Zustandsaktualisierungen, falls die Komponente während einer aktiven Simulation aus dem DOM entfernt wird.