95 lines
3.2 KiB
JavaScript
95 lines
3.2 KiB
JavaScript
/**
|
|
* Initialisierungsmodul für den CyberNetwork-Hintergrund
|
|
* Importiert und startet die Animation
|
|
*/
|
|
|
|
import CyberNetwork from './cyber-network.js';
|
|
|
|
// Beim Laden des Dokuments starten
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('CyberNetwork: Initialisierung gestartet');
|
|
|
|
// Prüfen ob das CSS bereits geladen ist, wenn nicht, dann laden
|
|
if (!document.querySelector('link[href*="cybernetwork-bg.css"]')) {
|
|
console.log('CyberNetwork: CSS wird geladen');
|
|
const cyberNetworkCss = document.createElement('link');
|
|
cyberNetworkCss.rel = 'stylesheet';
|
|
cyberNetworkCss.href = '/static/css/src/cybernetwork-bg.css';
|
|
document.head.appendChild(cyberNetworkCss);
|
|
}
|
|
|
|
// Container-Element für das Netzwerk finden
|
|
const container = document.getElementById('cyber-background-container');
|
|
|
|
if (!container) {
|
|
console.error('CyberNetwork: Container #cyber-background-container nicht gefunden!');
|
|
return;
|
|
}
|
|
|
|
console.log('CyberNetwork: Container gefunden', container);
|
|
|
|
// Konfiguration für den Netzwerk-Hintergrund
|
|
const networkConfig = {
|
|
container: container,
|
|
nodeCount: window.innerWidth < 768 ? 15 : 30, // Weniger Nodes auf mobilen Geräten
|
|
connectionCount: window.innerWidth < 768 ? 25 : 50,
|
|
packetCount: window.innerWidth < 768 ? 8 : 15,
|
|
animationSpeed: 1.0
|
|
};
|
|
|
|
// Netzwerk erstellen und initialisieren
|
|
const cyberNetwork = new CyberNetwork(networkConfig);
|
|
cyberNetwork.init();
|
|
console.log('CyberNetwork: Netzwerk initialisiert');
|
|
|
|
// Globale Referenz für Debug-Zwecke
|
|
window.cyberNetwork = cyberNetwork;
|
|
});
|
|
|
|
// Funktion zum manuellen Initialisieren, falls notwendig
|
|
export function initCyberNetwork(config = {}) {
|
|
console.log('CyberNetwork: Manuelle Initialisierung gestartet');
|
|
|
|
// CSS laden, falls nicht vorhanden
|
|
if (!document.querySelector('link[href*="cybernetwork-bg.css"]')) {
|
|
console.log('CyberNetwork: CSS wird geladen (manuell)');
|
|
const cyberNetworkCss = document.createElement('link');
|
|
cyberNetworkCss.rel = 'stylesheet';
|
|
cyberNetworkCss.href = '/static/css/src/cybernetwork-bg.css';
|
|
document.head.appendChild(cyberNetworkCss);
|
|
}
|
|
|
|
// Container-Element für das Netzwerk finden
|
|
const container = document.getElementById('cyber-background-container');
|
|
|
|
if (!container) {
|
|
console.error('CyberNetwork: Container #cyber-background-container nicht gefunden!');
|
|
return null;
|
|
}
|
|
|
|
// Bestehende Instanz zurücksetzen, falls vorhanden
|
|
if (window.cyberNetwork) {
|
|
console.log('CyberNetwork: Bestehende Instanz wird zurückgesetzt');
|
|
window.cyberNetwork.reset();
|
|
}
|
|
|
|
// Netzwerk mit benutzerdefinierten Optionen erstellen
|
|
const networkConfig = {
|
|
container: container,
|
|
nodeCount: window.innerWidth < 768 ? 15 : 30,
|
|
connectionCount: window.innerWidth < 768 ? 25 : 50,
|
|
packetCount: window.innerWidth < 768 ? 8 : 15,
|
|
animationSpeed: 1.0,
|
|
...config
|
|
};
|
|
|
|
// Neue Instanz erstellen und initialisieren
|
|
const cyberNetwork = new CyberNetwork(networkConfig);
|
|
cyberNetwork.init();
|
|
console.log('CyberNetwork: Netzwerk manuell initialisiert');
|
|
|
|
// Globale Referenz aktualisieren
|
|
window.cyberNetwork = cyberNetwork;
|
|
|
|
return cyberNetwork;
|
|
}
|