Task 012 – Das neue Bühnenbild der App

Status: geplant (2026-10-27), wartet auf die Freigabe der Konzepttafeln (Phase 0). Roadmap: 0.2.0 „Die Bühne“ Referenz: design/reference/ui_concept_v1.png (Codex, 2026-10-27, Prompt in design/prompts/ui_concept.md), vom Eigentümer als Richtung bestätigt.

Ziel

Die App sieht aus wie das Konzept: Jeder Bildschirm ist ein beleuchtetes Bühnenbild bei Mondlicht, in dem die Pappfiguren in echtem Raum stehen. Die Bedienung liegt ruhig und hochwertig davor. Das gilt für jeden Bildschirm und jeden Zustand, auf Handy, Tablet, Desktop und im Browser. Die Spielregeln, das Netz und die Geheimhaltung ändern sich nicht. Es ändert sich nur, wie es aussieht und sich anfühlt.

Nicht Ziel: neue Spielfunktionen, ein neues Logo, die Website. Die Website wird erst nach der App angeglichen (Phase 7).

Was das Konzept ausmacht

Daran messen wir jeden Bildschirm. Abgeleitet aus dem Konzeptbild:

1. Ein Bühnenbild pro Moment. Jeder Bildschirm hat eine eigene Szene: Dorf am Abend zum Beitreten, Theater mit Vorhang für die Rolle, Nachtsee unter Vollmond, Dorf in der Dämmerung zur Abstimmung. Die Szene füllt den Bildschirm von Rand zu Rand, die Bedienung liegt darauf.
2. Der Mond ist das Leitmotiv und hat eine Aufgabe. Er zeigt die Tageszeit (Sichel am Abend, Vollmond in der Nacht, Sonne am Morgen) und dient als Uhr. Der Leuchtring um den Mond ist der Timer, auf dem Abstimmungsbildschirm wird er zur kleinen Uhr.
3. Rahmen aus Kulisse. Bäume, Häuser, Laternen und Vorhänge rahmen links und rechts den Inhalt, wie Seitenkulissen einer Bühne. Die Mitte bleibt frei für das Wichtige.
4. Die Figuren sind die Helden. Sie stehen groß und warm beleuchtet in der Szene, mit hellem Kartonrand. Neu gegenüber dem Konzept: Sie stehen in echtem 3D, also geneigt, mit sichtbarer Wellpappkante und weichem Schatten auf dem Boden. Das können wir schon (TurningFigure, siehe DESIGN.md).
5. Ein klarer Satz oben. Eine kleine Dachzeile in Kapitälchen mit Strichen („— SPIELABEND —“), darunter ein großer Titel in einer warmen Serifenschrift („Komm dazu“, „Deine Rolle“, „Augen zu“, „Wen verdächtigst du?“).
6. Eine Hauptaktion unten. Ein breiter Knopf in Laternenorange mit Pfeil oder Symbol, groß genug für den Daumen. Darüber höchstens eine Plakette mit dem Nötigsten (Raumcode, Rolle, Timer).
7. Plaketten aus dunklem Holz und Karton für Informationen. Sie sind halbtransparent dunkel mit feiner goldener Kante und warmem Text, wie Schilder auf der Bühne.
8. Wenig Text, große Schrift, viel Luft. Ein Satz Erklärung statt eines Absatzes. Alles andere liegt eine Ebene tiefer (Hilfe, Details).
9. Die Nacht ist fast schwarz und für alle gleich. Mond, Himmel, kaum Bedienung, dazu der Hinweis, dass der Erzähler spricht.
10. Warmes Licht gegen kühle Nacht. Tiefes Nachtblau und Tinte als Grund, Laternenorange und Mondgold als Licht. Rot nur für Gefahr und Tod.

Was wir am Konzept bewusst ändern:

• Figuren: Im Konzept wirken sie wie Aufkleber. Bei uns sind sie Pappfiguren in 3D (siehe Punkt 4).
• Mond-Timer in der Nacht: Er darf keine Restzeit zeigen. In der klassischen Nacht sehen nur die Aufgerufenen die Restzeit (SECURITY_DESIGN, „Die klassische Nacht“), sonst verriete ein Timer, wann jemand gewählt hat. Der Ring in der Nacht läuft deshalb gleichmäßig über die ganze Nacht, aus dem Phasenbeginn und der eingestellten Nachtlänge, für alle gleich. Die Aufgerufenen sehen ihre Restzeit nur in ihrer eigenen Aufgabe.
• Tonwelle „Die Nacht erzählt“: Sie bewegt sich nicht nach dem tatsächlichen Pegel des eigenen Handys. Weil der Erzähler wandert, wäre das zwar öffentlich, sähe aber auf jedem Handy anders aus. Sie folgt dem gesprochenen Satz (an, wenn der Erzähler spricht), auf allen Handys gleich.
• „1 Geist schaut zu“: Das ist erlaubt, denn wie viele tot sind, ist öffentlich. Geisterwissen selbst erscheint nur im gedrückten Geisterblick.

Was bleibt (nicht verhandelbar)

• Geheimhaltung nach SECURITY_DESIGN: Die Nacht ist für alle gleich aufgebaut (Anti-Tell). Kein Bildschirm zeigt, was der Spieler nicht wissen darf. Geisterwissen gibt es nur gehalten. Keine Animation, kein Klang und keine Farbe hängt von einer geheimen Rolle ab, außer auf dem eigenen, verdeckt angesehenen Rollenbildschirm.
• Figuren-Regeln aus DESIGN.md: eigene Designs, Kartonrand, schauen nach rechts, Personas verraten nie die Rolle.
• Barrierefreiheit: Kontrast nach WCAG AA, Schrift skaliert mit der Systemeinstellung bis 200 %, jede Aktion mit Bildschirmleser-Beschriftung, Ziele mindestens 48 × 48 dp, bei reduzierter Bewegung keine großen Bewegungen.
• Alles läuft offline, keine Schriften oder Bilder von fremden Servern.
• Eine Quelle für Farben: design/tokens.json erzeugt die Palette der App und der Website.

Das Designsystem

Farben (Tokens)

Bestehende Tokens behalten ihre Namen und werden nachgeschärft. Neue kommen hinzu. Endwerte legt Phase 1 nach Messung am Konzeptbild fest, mit Kontrastprüfung.

Schrift

• Titel: eine warme, gut lesbare Buchserife mit Charakter, wie im Konzept. Kandidaten (SIL OFL, mitlieferbar): Ancizar Serif (schon auf der Website, dann sind App und Website gleich), Alegreya, Fraunces. Entscheidung in Phase 0 mit den Konzepttafeln. Lilita One wird ersetzt.
• Dachzeile: dieselbe Serife in Kapitälchen mit weiter Laufweite, mit kurzen Strichen davor und danach.
• Text und Bedienung: Manrope bleibt (400/600/800).
• Zahlen (Raumcode, Timer): Serife mit Versalziffern, sehr groß.
• Größen (bei Systemgröße 100 %): Titel 34/40, Dachzeile 12 mit Laufweite 0,2 em, Text 16/24, Knopf 20, Raumcode 44. Auf dem Tablet ×1,2, im Querformat ein Stück kleiner, wenn die Höhe fehlt.

Raum, Formen, Licht

• Raster: 4 dp. Seitenrand 20 dp (Handy) und 32 dp (Tablet). Abstände 8/12/16/24/32/48.
• Rundungen: Plaketten 18, Knöpfe 18, Figurenkarten 16, Handyrahmen nicht (die App läuft randlos).
• Licht: Jede Szene hat eine Lichtquelle (Mond oder Laterne). Plaketten und Knöpfe bekommen davon eine helle Oberkante und einen Schatten nach unten. Dafür gibt es ein gemeinsames StageLight, damit alles zum selben Licht passt.
• Körnung: feines Papierkorn über allem (wie heute), sehr dezent.

Komponenten

Jede Komponente bekommt eine Galerie-Seite (Phase 1) und einen Screenshot-Test in drei Größen.

Bühnenbilder und Bausteine

Jedes Bühnenbild entsteht aus Ebenen, nicht als ein festes Bild. So passt es sich jeder Bildschirmgröße an (Handy hochkant, Tablet, Desktop quer), die Figuren stehen zwischen den Ebenen, und Parallaxe ist möglich. Was es heute schon gibt (design/source/stage, design/source/props), wird im neuen Stil neu erzeugt, damit alles aus einem Guss ist.

Szenen

Bausteinliste für Codex

Gezählt mit Varianten. Jede Zeile ist ein Sammelbogen (mehrere Teile auf transparentem Grund, siehe Asset-Pipeline in DESIGN.md).

1. Himmel (5): Abend, Nacht, Dämmerung, Morgen, Blutnacht. Breit genug für Querformat, Sterne als eigene Ebene.
2. Monde und Sonne (7): Sichel, Halbmond, Vollmond, Vollmond hinter Wolken, Blutmond, Sonne aufgehend, Sonne hoch. Dazu Leuchthöfe.
3. Horizonte (5): Dorfsilhouette mit Kirche, Wald mit See, Hügel, Dorfplatz, Waldrand.
4. Häuser und Kirche (8): Fachwerkhäuser mit und ohne Licht, Kirche, Mühle, Brunnen, Marktstand.
5. Seitenkulissen (10): Bäume (Eiche, Tanne, Weide), Laternenpfahl, Hausecke, Busch, Zaun, Vorhang links und rechts, Ast mit Eule.
6. Böden und Bühnenrand (5): Holzbühne gerade und rund, Wiese, Kopfsteinpflaster, Seeufer mit Schilf.
7. Requisiten (12): Laterne an, Laterne aus, Fass, Kiste, Heuballen, Wegweiser, Girlande, Rosen, Kessel, Bogen, Kristallkugel, Herzwolke.
8. Atmosphäre (6): Nebelbänke, Wolken, Glühwürmchen, Lichtkegel, Funken, Sterne.
9. Dorf-Posen (20 Bögen): je Persona zwei bis drei Posen im Beruf, mit der Persona als Vorlage.
10. Bedienungs-Texturen (6): dunkles Holz, Plakettenkarton, Goldkante (9-Patch), Knopf-Laterne (9-Patch), Papier, Vorhangstoff.
11. Symbole (≈ 24): eigenes Symbolset im Stil (Mond, Sonne, Waage, Auge zu, Lautsprecher, Geist, Herz, Schwert/Bogen, Trank, Kugel, QR, Teilen, Einstellungen, Hilfe, Zurück, Häkchen, Pfeil). Als Vektoren (SVG oder Pfade), nicht als Bilder.

Figuren: Die 20 Personas und ihre 100 Rollenkostüme bleiben, sie passen im Stil schon. Neu sind:

• Dorf-Posen (Wunsch des Eigentümers, 2026-10-27): Jede Persona bekommt zwei bis drei weitere Posen in ihrem Beruf, ohne Rollenkostüm. Die Bäckerin schiebt Brot in den Ofen oder winkt mit dem Brotschieber, der Schmied hämmert oder wischt sich die Stirn, die Großmutter strickt oder schaut über die Brille. Das sind 40–60 neue Figurenbilder, je Persona ein Bogen mit der vorhandenen Figur als Vorlage, damit Gesicht, Kleidung und Farben gleich bleiben. Die Posen verraten nie eine Rolle, sie zeigen nur den Dorfalltag.
• Wie die App wechselt: Lobby, Tag und Abstimmung zeigen jede Figur in einer ihrer Posen. Die Pose wechselt bei jedem Phasenwechsel, für alle Handys gleich, ausgewählt aus Raum, Runde und Platz (öffentliche Werte, wie die Variante des Erzählers). In der Lobby wechselt sie zusätzlich alle 20–40 Sekunden mit einer kurzen Wende, damit der Tisch lebt. Nachts stehen keine Dorf-Posen, dort zählt nur der Mond.
• Brustbild-Ausschnitte für die PuppetCard, berechnet aus Brennpunkten pro Pose (wie heute für das Porträt), und Bodenschatten.

Figurenwahl: In der Lobby wählt jeder seine Figur selbst aus allen noch freien, in jeder Stufe. Bisher schaltete „Klassisch“ das ab, das ist seit 2026-10-27 entfernt. Neu im Design: Die Wahl ist ein Schaufenster aller 20 Figuren in 3D, belegte stehen im Schatten mit dem Namen ihres Spielers, die eigene steht im Licht. Ein Tipp wählt, ein Wischen blättert.

Größe und Format

• Ebenen als WebP (verlustbehaftet für Himmel und Nebel, verlustfrei mit Alpha für Kanten), in zwei Auflösungen (Handy, Tablet und Desktop). Die Ladeauswahl nach Bildschirmgröße.
• Budget für alle Szenen zusammen: höchstens 12 MB in der App, für die Dorf-Posen höchstens 4 MB (WebP, 560 px hoch wie die Kostüme). Die Aufnahmen brauchen schon 19 MB.
• Kein Bild größer als 2048 px. Dekodiert wird höchstens in Bildschirmgröße (cacheWidth).

Bildschirm-Katalog

Jeder Bildschirm mit Szene, Dachzeile und Titel, Inhalt und Hauptaktion. „Zustände“ zählt auf, was der Bildschirm zusätzlich können muss. Alle Bildschirme gibt es in drei Layouts:

• Handy hochkant: eine Spalte. Die Szene füllt den Bildschirm, die Bedienung unten.
• Tablet: breitere Spalte, größere Figuren.
• Quer und Desktop: zwei Spalten. Die Szene mit Figuren links, die Bedienung auf einer Plakette rechts.

Übergänge: Zwischen Phasen fällt kurz der Vorhang. In der Nacht wechseln die aufgerufenen Rollen ohne Vorhang, damit sich am Bildschirm nichts verrät. Innerhalb einer Phase gibt es nur weiche Überblendungen.

Technik

• Aufbau: StageScene(scene: Scene.nightLake, child: …) ersetzt StageScaffold. Szenen sind Daten: Ebenen mit Bild, Anker, Tiefe und Verhalten im Querformat. Eine Szene zeichnet sich in RepaintBoundary-Schichten, damit sich bei Bewegung nur die bewegte Ebene neu malt.
• Mond: CustomPainter mit Ring, Phase als Bild aus dem Bogen, Leuchten als Verlauf.
• 3D-Figuren: TurningFigure bekommt Neigung, Bodenschatten (weiche Ellipse, perspektivisch) und ein leichtes Wiegen. Je Bildschirm höchstens 8 Figuren in 3D, alle anderen als flache Karten (Leistung).
• Theme: Tokens aus design/tokens.json, Schriften als Assets, Text-Stile zentral in theme.dart. Die alten Widgets (Panel, PrimaryButton, Headline) bleiben, bis jeder Bildschirm umgestellt ist, und werden dann gelöscht.
• Leistung: 60 fps auf einem iPhone 12 und einem Android-Mittelklassegerät, auch im Browser. Messung mit dem Flutter-Performance-Overlay je Szene. Bilder vorab laden, sobald die nächste Phase absehbar ist (die Morgenszene während der Nacht).
• Web-App: Die Szenen gehören in den Web-App-Build, den der Host ausliefert. Die Größe wird geprüft, damit der Beitritt im WLAN schnell bleibt.

Ablauf mit Codex

1. Konzepttafeln (Phase 0): Je Tafel ein Bild mit 3–4 Bildschirmen, wie das erste Konzept, mit design/reference/ui_concept_v1.png als Stilvorlage und zwei Figuren als Pappvorlage. Fünf Tafeln:

   • (a) Start, Beitreten, Lobby, Vorhang zu;
   • (b) Rolle, Intro, Nacht aufgerufen, Nacht alle tippen;
   • (c) Morgen, Tag, Stichwahl, Jäger;
   • (d) Ende ×3;
   • (e) Einstellungen, Hilfe, Geisterblick, Querformat.

   Dazu eine Tafel „Figuren in 3D“: dieselbe Figur geneigt, mit Kante und Schatten. Der Eigentümer gibt jede Tafel frei oder wünscht Änderungen.

2. Sammelbögen (Phase 2): erst wenn alle Tafeln freigegeben sind, damit kein Kontingent für verworfene Richtungen verbraucht wird. Jeder Bogen mit der freigegebenen Tafel als Vorlage.

3. Schneiden und Säubern mit tool/assets/slice_sheet.py und clean_alpha.py, dann optimieren.

4. Nachweis: Prompts in design/prompts/, jede Datei in design/CREDITS.md, Prompt in die PNG eingebettet.

5. Prüfen: jeden Baustein gegen LEGAL.md (keine Anlehnung an bekannte Spiele oder Figuren), jede Szene gegen das Anti-Tell (nichts Rollenabhängiges).

Roadmap

Jede Phase endet mit einem Stand, den man am Handy ansehen kann. Neue Phasen beginnen erst, wenn die vorige abgenommen ist.

Release: 0.2.0 nach Phase 6, die Website danach.

Prüfliste vor dem Release

• Jeder Bildschirm und Zustand aus dem Katalog hat einen Screenshot-Test in drei Größen (Handy, Tablet, quer).
• Die Nacht sieht für jede Rolle gleich aus (Screenshot-Vergleich: Werwolf, Seherin, Dorfbewohner, tot, Pixel für Pixel bis auf die Aufgabe der Aufgerufenen).
• Kein Mondring zeigt nachts Restzeit für Nicht-Aufgerufene.
• Kontrast AA für jeden Text auf jeder Szene (gemessen, nicht geschätzt).
• Bildschirmleser liest jeden Bildschirm sinnvoll vor, jede Aktion ist beschriftet.
• 200 % Schrift: nichts abgeschnitten, Titel brechen sauber um.
• Englisch und Deutsch geprüft, lange Namen (20 Zeichen) passen.
• 60 fps auf iPhone 12, Android-Mittelklasse und Chrome auf einem Mittelklasse-Laptop.
• Bilder-Budget eingehalten, Web-App-Größe gemessen.
• Alle Bausteine in design/CREDITS.md, keine fremden Marken oder Anlehnungen.

Offene Entscheidungen (Phase 0)

1. Titelschrift: Ancizar Serif (wie die Website) oder eine andere Buchserife.
2. Ende: drei eigene Szenen (Dorf, Wölfe, Liebe) oder eine Szene mit drei Lichtstimmungen.
3. Lobby: die Gäste als 3D-Figuren im Halbkreis (wie eine Bühne) oder als Karten im Raster (übersichtlicher bei 20 Spielern). Vorschlag: bis 8 Gäste Figuren, darüber Karten.
4. Tischkreis am Tag: bleibt er (mit Figuren statt Porträts) oder wird er durch eine Szene mit allen Figuren ersetzt.

Sicherheit

• Was schiefgehen kann: Eine Szene, eine Animation oder ein Timer verrät eine Rolle oder eine Nachtaktion. Geisterwissen wird offen sichtbar. Ein Bild aus dem Netz verrät die Nutzung.
• Was es verhindert:
  • Szenen und Übergänge hängen nur von der Phase und öffentlichen Werten ab.
  • Der Nachtring läuft gleichmäßig aus dem Phasenbeginn.
  • Geisterwissen nur in der GhostPlaque.
  • Alle Bilder und Schriften liegen in der App.
• Welcher Test es zeigt:
  • Screenshot-Vergleich der Nacht über alle Rollen;
  • ghost_sight_test;
  • ein Test, dass der Nachtring nur aus Phasenbeginn und Nachtlänge berechnet wird;
  • atmosphere_test (öffentliche Werte).