Javascript

Mit Javascript kannst du Szenen mit eigener Logik erweitern – z. B. UI anpassen, kleine Effekte einbauen, Zeiten messen oder externe Schnittstellen triggern.

Wichtig: JS ist inkonstant – beim Betreten jeder Szene wird es neu ausgeführt. Teile, die überall gelten sollen, gehören in die Masterszene [[ ]].
Starte dein Script immer leicht verzögert, damit die Szene fertig gerendert ist:

setTimeout(function () { // dein Code hier }, 300); 

Gute Praxis (sehr wichtig)

• Idempotent denken: Code darf mehrfach laufen, ohne doppelten Effekt zu erzeugen.
  Nutze einen „Once“-Guard:

  
  

  setTimeout(function () { if (window.__sceneOnce) return; window.__sceneOnce = true; // init … }, 200);

• Aufräumen: Wenn du setInterval/Event-Listener setzt, räume sie auf (oder nutze { once:true } bei addEventListener).

• Robust warten: Wenn du ein Element brauchst, das evtl. später kommt, warte kurz darauf:

  
  

  
  

  function waitSel(sel, cb, tries=20){ const el = document.querySelector(sel); if (el) return cb(el); if (tries--) return setTimeout(()=>waitSel(sel, cb, tries), 100); } setTimeout(()=>waitSel('.btn-primary', btn=>{ btn.classList.add('pulse'); }), 200); 

• Keine Blocker: Lange Schleifen vermeiden; lieber Timings/Promises verwenden.

• Fallbacks: Netzaufrufe können an CORS/Offline scheitern → Fehler behandeln.

Häufige Mini-Rezepte

1) Button-Label/Style anpassen

2) Szene nach X Sekunden automatisch fortsetzen

3) Einfache „Einmal“-Animation

4) Soft-Gate per Tageszeit (Beispiel)

5) Ereignis mitzählen (lokal)

Typische Stolperfallen

• Doppelte Listener: Bei jeder Rückkehr in die Szene wird JS neu ausgeführt → once-Option nutzen:

  
  

  window.addEventListener('click', handler, { once:true });

• Zu früher Zugriff: Ohne Delay (setTimeout) existieren DOM-Elemente evtl. noch nicht.

• Starke Manipulation am Layout: Bedenke, dass die App auf vielen Displaygrößen läuft – nur sanft stylen.

• Blockierende Prompts/Alerts: Sparsam einsetzen; sie unterbrechen den Flow.

Checkliste

1. Delay einbauen (setTimeout 150–300 ms).

2. Idempotent & ggf. Once-Guard verwenden.

3. Wo nötig: waitSel/Observer nutzen.

4. Netz-/Fehlerfälle abfangen.

5. Auf mehreren Geräten testen.

Damit bekommst du stabile, kleine Scripts, die zuverlässig mit der Szenenlogik zusammenspielen.

Gute Beispiele "ready to use" findest du auch unter Hacks.