# 🎨 Editor & UI

# Oberfläche

<span style="white-space: pre-wrap;">Die </span>**Storyboard-Oberfläche**<span style="white-space: pre-wrap;"> ist deine Leinwand für Szenen, Logik und Medien. Hier erstellst du Flows, verzweigst Entscheidungen und startest die Vorschau.</span>

---

[![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/7Zngrafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/7Zngrafik.png)

## 1) Kopfbereich

- **Breadcrumb / Projekttitel (links)**  
    Zeigt den aktuellen Pfad/Projektnamen.  
    **Tipp:**<span style="white-space: pre-wrap;"> Den Text einfach </span>**anklicken und direkt eintippen**<span style="white-space: pre-wrap;"> → das ist dein </span>**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)

- <span style="white-space: pre-wrap;">Freies </span>**Drag-&amp;-Drop**<span style="white-space: pre-wrap;">-Canvas zum Platzieren und Ordnen deiner </span>**Karten**:
    - **Szenen**<span style="white-space: pre-wrap;"> (Inhalte &amp; Features)</span>
    - **Master / Globale Sektion**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">[[ ]]</span>`<span style="white-space: pre-wrap;"> (einmalig)</span>
    - **Bedingungen**<span style="white-space: pre-wrap;"> (Verzweigungen)</span>
    - **Spielende**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">[[End]]</span>`<span style="white-space: pre-wrap;"> (einmalig)</span>
    - **Notizen**<span style="white-space: pre-wrap;"> (gelbe Zettel, rein redaktionell)</span>
- <span style="white-space: pre-wrap;">Reihenfolge und Abstand dienen nur der Übersicht; die </span>**Logik entsteht durch Verknüpfungen**<span style="white-space: pre-wrap;"> (Buttons, Wegpunkte, etc.).</span>

---

## 3) Floating-Dock (unten, mittig)

<span style="white-space: pre-wrap;">Von </span>**links nach rechts**:

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

---

## 4) Ansicht &amp; Navigation (unten rechts)

- **Lupe / + / –**<span style="white-space: pre-wrap;"> → Suche &amp; Zoom.</span>
- **„Fit to screen“**<span style="white-space: pre-wrap;"> → Alles einpassen/zentrieren.</span>
- **Vollbild**<span style="white-space: pre-wrap;"> → Arbeitsfläche maximieren.</span>

---

## 5) Statusleiste (ganz unten)

- Projekt-/Build-Infos, Copyright.
- **Systemstatus**<span style="white-space: pre-wrap;">: API/Compiler </span>**Online/Offline**.
- <span style="white-space: pre-wrap;">Quelle (z. B. </span>**lokal**) &amp; Lizenz.

---

## 6) Typische Aktionen

- **Szenen anlegen**<span style="white-space: pre-wrap;"> über das Dock, per Drag-&amp;-Drop positionieren.</span>
- **Ö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**<span style="white-space: pre-wrap;"> jederzeit starten, um den Flow zu testen.</span>

---

## 7) Praktische Hinweise

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

---

## 8) Mini-Shortcuts

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

---

**Merke:**<span style="white-space: pre-wrap;"> Kopfzeile = </span>**Projekt &amp; Vorschau**<span style="white-space: pre-wrap;">, Arbeitsfläche = </span>**Story planen**<span style="white-space: pre-wrap;">, Floating-Dock = </span>**Bausteine anlegen**<span style="white-space: pre-wrap;">, Statusleiste = </span>**Gesundheitscheck**. So behältst du Struktur und kommst schnell von der Idee zur spielbaren Szene.

# Vorschau

# Was du hier alles testen kannst

<span style="white-space: pre-wrap;">Die </span>**Vorschau**<span style="white-space: pre-wrap;"> zeigt deine Story </span>**wie in der App**<span style="white-space: pre-wrap;">, direkt im Browser. Links läuft das Spiel im Smartphone-Frame, rechts hast du </span>**Quicklinks**<span style="white-space: pre-wrap;"> zum gezielten Testen einzelner Trigger.</span>

[![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/vaOgrafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/vaOgrafik.png)

---

## Grundbedienung

- **Start / Schließen**<span style="white-space: pre-wrap;"> (oben rechts im Frame) – Vorschau starten bzw. beenden.</span>
- **Live-Reload**: Speichere eine Szene im Editor → die Vorschau lässt sich sofort neu starten.

---

## Quicklinks (rechte Spalte)

<span style="white-space: pre-wrap;">Hier kannst du typische Sensor-/Ortsaktionen </span>**simulieren**, ohne vor Ort zu sein:

- **Wegpunkt → „Gehe zu“**  
    <span style="white-space: pre-wrap;">Simuliert, dass du den Wegpunkt erreichst (innerhalb des Radius). So prüfst du </span>**Autoselect**<span style="white-space: pre-wrap;"> und Folgeszenen.</span>
- **QR-Code → „Scannen“**  
    <span style="white-space: pre-wrap;">Löst einen Scan mit dem hinterlegten </span>**Wert**<span style="white-space: pre-wrap;"> aus (praktisch für Testlauf ohne Kamera).</span>
- <span style="white-space: pre-wrap;">(falls vorhanden) </span>**Weitere Trigger**<span style="white-space: pre-wrap;"> erscheinen analog – du kannst sie gezielt abfeuern und den Flow prüfen.</span>

> <span style="white-space: pre-wrap;">Die Quicklinks sind rein fürs Testen – sie sind in der echten App </span>**nicht sichtbar**.

---

## UI &amp; Funktionen im Phone-Frame

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

- **Karte / Ziele**<span style="white-space: pre-wrap;"> – öffnet die Map mit Wegpunkten.</span>
- **Hinweise**<span style="white-space: pre-wrap;"> – kleines Badge zeigt neue Hinweise/Lösung an (zeitgesteuert testbar).</span>
- **Inventar**<span style="white-space: pre-wrap;"> – Gegenstände ansehen (Bilder </span>**zoombar**).
- **Hilfe/Info**<span style="white-space: pre-wrap;"> – projektspezifische Hilfe.</span>
- **Menü (…)**<span style="white-space: pre-wrap;"> – weitere Aktionen (z. B. Einstellungen, Neustart – abhängig vom Projekt).</span>

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

---

## Grenzen der Browser-Vorschau

- **GPS/Kompass**<span style="white-space: pre-wrap;"> werden nicht real genutzt – nutze dafür die </span>**Quicklinks**.
- **Kamera/NFC**<span style="white-space: pre-wrap;"> nur eingeschränkt/gar nicht verfügbar (QR per Quicklink testbar).</span>
- <span style="white-space: pre-wrap;">Geräte-Eigenheiten (Leistung, Displaygröße, Autoplay-Richtlinien) können abweichen – am Ende </span>**immer auf einem echten Gerät**<span style="white-space: pre-wrap;"> testen.</span>

---

## Tipp

<span style="white-space: pre-wrap;">Wenn du schnell zu einer Szene springen willst, setze dort </span>**temporär**<span style="white-space: pre-wrap;"> einen Button „Zur Szene X“ oder nutze Quicklinks für die relevanten Trigger. So iterierst du rasch an Texten, Farben, Übergängen und Logik.</span>