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.