# 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.