🎨 Editor & UI

• Oberfläche
• Vorschau

Oberfläche

Die Storyboard-Oberfläche ist deine Leinwand für Szenen, Logik und Medien. Hier erstellst du Flows, verzweigst Entscheidungen und startest die Vorschau.

---

1) Kopfbereich

• Breadcrumb / Projekttitel (links)
  Zeigt den aktuellen Pfad/Projektnamen.
  Tipp: Den Text einfach anklicken und direkt eintippen → das ist dein Spieltitel.
• Werkzeug-Icons (rechts, projektweit)
  Je nach Plan/Rolle u. a.: Styles/Theme, Projekteinstellungen, Medien/Dateien, Analytics.
• Vorschau (blauer Button)
  Startet die Live-Preview des aktuellen Stands.

---

2) Arbeitsfläche (Leinwand)

• Freies Drag-&-Drop-Canvas zum Platzieren und Ordnen deiner Karten:
  • Szenen (Inhalte & Features)
  • Master / Globale Sektion [[ ]] (einmalig)
  • Bedingungen (Verzweigungen)
  • Spielende [[End]] (einmalig)
  • Notizen (gelbe Zettel, rein redaktionell)
• Reihenfolge und Abstand dienen nur der Übersicht; die Logik entsteht durch Verknüpfungen (Buttons, Wegpunkte, etc.).

---

3) Floating-Dock (unten, mittig)

Von links nach rechts:

1. Neue Szene – Beliebig oft. Normale Content-Szene mit Features.
2. Master / Globale Sektion [[ ]] – Einmal pro Projekt. Enthält globale Elemente (z. B. Stylesheets, Masterszene-JS, Funktionen). Wirkt szenenübergreifend.
3. Bedingung – Logik-Knoten, der anhand von Variablen/Inventar/Status verzweigt (z. B. „wenn Schlüssel → A, sonst → B“).
4. Spielende [[End]] – Einmal pro Projekt. Markiert das Ende/den Abschluss.
5. Notiz – Gelber Zettel für Hinweise/To-dos. Hat keinen Einfluss aufs Spiel.

---

4) Ansicht & Navigation (unten rechts)

• Lupe / + / – → Suche & Zoom.
• „Fit to screen“ → Alles einpassen/zentrieren.
• Vollbild → Arbeitsfläche maximieren.

---

5) Statusleiste (ganz unten)

• Projekt-/Build-Infos, Copyright.
• Systemstatus: API/Compiler Online/Offline.
• Quelle (z. B. lokal) & Lizenz.

---

6) Typische Aktionen

• Szenen anlegen über das Dock, per Drag-&-Drop positionieren.
• Öffnen/Bearbeiten: Karte anklicken → Szenen-Editor (Features: Wegpunkt, QR/NFC, Dialog, Medien, Inventar, Variablen, Hinweise, Countdown, Team-Sync …).
• Verknüpfen: In Szenen Buttons/Zielszene setzen oder Trigger (Wegpunkt, QR/NFC) konfigurieren.
• Vorschau jederzeit starten, um den Flow zu testen.

---

7) Praktische Hinweise

• Projekttitel schnell ändern: Breadcrumb-Text anklicken und direkt tippen.
• Ordnung: Benenne Szenen sprechend („01-Intro“, „20-Rätsel-Brücke“, „99-Ende“).
• Global denken: Stylesheets & Masterszene-JS wirken überall – sparsam, mit Klassen arbeiten.
• Testen: Regelmäßig Vorschau nutzen; Entscheidungswege und Fallbacks prüfen.
• Team-Flows: Bei individuellen Schritten Team-Sync deaktivieren (Feature in der Szene), anschließend wieder zusammenführen.

---

8) Mini-Shortcuts

• Drag-&-Drop: Karten verschieben, sauber ausrichten.
• Zoom: Strg/Cmd + Mausrad (oder Buttons).
• Fit: „Alles einpassen“ klick → Überblick zurück.

---

Merke: Kopfzeile = Projekt & Vorschau, Arbeitsfläche = Story planen, Floating-Dock = Bausteine anlegen, Statusleiste = Gesundheitscheck. So behältst du Struktur und kommst schnell von der Idee zur spielbaren Szene.

Vorschau

Was du hier alles testen kannst

Die Vorschau zeigt deine Story wie in der App, direkt im Browser. Links läuft das Spiel im Smartphone-Frame, rechts hast du Quicklinks zum gezielten Testen einzelner Trigger.

---

Grundbedienung

• Start / Schließen (oben rechts im Frame) – Vorschau starten bzw. beenden.
• Live-Reload: Speichere eine Szene im Editor → die Vorschau lässt sich sofort neu starten.

---

Quicklinks (rechte Spalte)

Hier kannst du typische Sensor-/Ortsaktionen simulieren, ohne vor Ort zu sein:

• Wegpunkt → „Gehe zu“
  Simuliert, dass du den Wegpunkt erreichst (innerhalb des Radius). So prüfst du Autoselect und Folgeszenen.
• QR-Code → „Scannen“
  Löst einen Scan mit dem hinterlegten Wert aus (praktisch für Testlauf ohne Kamera).
• (falls vorhanden) Weitere Trigger erscheinen analog – du kannst sie gezielt abfeuern und den Flow prüfen.

Die Quicklinks sind rein fürs Testen – sie sind in der echten App nicht sichtbar.

---

UI & Funktionen im Phone-Frame

Unten im Spiel-UI findest du – je nach Projekt – u. a.:

• Karte / Ziele – öffnet die Map mit Wegpunkten.
• Hinweise – kleines Badge zeigt neue Hinweise/Lösung an (zeitgesteuert testbar).
• Inventar – Gegenstände ansehen (Bilder zoombar).
• Hilfe/Info – projektspezifische Hilfe.
• Menü (…) – weitere Aktionen (z. B. Einstellungen, Neustart – abhängig vom Projekt).

Alles verhält sich wie auf dem Gerät: Dialoge, Buttons, Eingabefelder, Medien (Audio/Video), Hotspots, Foto-/Fotovergleich-Flows etc.

---

Was du in der Vorschau besonders gut testen kannst

• Szenenfluss & Übergänge (In/Out-Transitions).
• Bedingungen (Variablen, Inventar-Checks, Pfadverzweigungen).
• Wegpunkt-Logik (Autoselect vs. manuell) via „Gehe zu“.
• QR-/NFC-Ersatztests (QR über Quicklink; NFC lässt sich in der Vorschau i. d. R. nicht real scannen).
• Hinweise & Countdown (Zeitpunkte, Texte).
• Audio/Video inkl. End-Buttons und Fallback-Szenen.
• Team-Sync deaktivieren: Prüfe, ob eine Szene lokal bleibt und die nächste wieder synchronisiert.

---

Grenzen der Browser-Vorschau

• GPS/Kompass werden nicht real genutzt – nutze dafür die Quicklinks.
• Kamera/NFC nur eingeschränkt/gar nicht verfügbar (QR per Quicklink testbar).
• Geräte-Eigenheiten (Leistung, Displaygröße, Autoplay-Richtlinien) können abweichen – am Ende immer auf einem echten Gerät testen.

---

Tipp

Wenn du schnell zu einer Szene springen willst, setze dort temporär einen Button „Zur Szene X“ oder nutze Quicklinks für die relevanten Trigger. So iterierst du rasch an Texten, Farben, Übergängen und Logik.