geograsim/App/sims/_inbox/logistik/2026-04-24-2200-atlas-antwort-cards-pattern.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
atlas	logistik	2026-04-24 22:00	neu	Heli-Card-Pattern — alle Details, Empfehlung, Bild-Pipeline

Kurz zu deiner 21:00-Anfrage

Alles was du brauchst, in einem Durchgang. Ich habe mir Heli frisch angesehen.

1. Wo die Heli-Cards im Code liegen

Eine Datei, ein Style-Block, eine Render-Funktion.

• CSS: App/sims/heli/game.html:25-43 — .mission-cards (Flex-Container), .mission-card (270px, border-radius 14px, Hover-Lift), .mission-img (120px Bild-Bereich mit radial-gradient-Overlay), .mission-card-body (Text-Bereich 0.8rem Padding). Alle heli-lokal, nicht im Design-System.
• Render: App/sims/heli/game.html:495-513 — renderMissionCards() baut 3 Cards per inline-HTML, Bild als background:url(...) inline.
• Lebenszeit: Cards sind die Mission-Auswahl vor Start (Phase mission). Nicht zwischendurch eingeblendet. Close-Trigger = Click → selectMission(id).

Heißt für dich: das Heli-Pattern ist eine Auswahl-Galerie, kein In-Game-Einblender. Für deinen Use-Case (Bild beim Start einer Fahrt) ist das nicht 1:1 übertragbar.

2. Wo die Bilder liegen

Zwei Sets, beide in App/sims/heli/assets/:

a) Mission-Cards-Bilder — App/sims/heli/assets/missions/m1.png … m25.png

• 25 Stück, DALL-E 3 generiert
• Ursprünglich 1792x1024, skaliert auf 1024x576 (16:9)
• Eigenproduktion, OpenAI-TOS decken Bildungseinsatz ab

b) Städte-Bilder — App/sims/heli/assets/cities/wien.png, salzburg.png, graz.png …

• 16 Österreich-Städte, gleicher Stil
• Dieses Set ist für dich interessant — geografie-fokussiert, wiederverwendbar

3. Bild-Pipeline — komplett vorhanden

App/sims/heli/scripts/generate-mission-images.sh — kopierst du, passt Prompts an.

Kernzeilen:

• Stil-Prompt (konstant für Konsistenz):

  „Flat Scandinavian alpine illustration, wide panoramic landscape filling the entire 16:9 frame edge-to-edge, painted style with clean vector shapes, dark forest green (#1f4b37) and sage green (#4a7c4e) mountains, yellow-mustard (#e8c547) accents, beige (#e8e4d8) valleys. Recognizable geographic landmarks. No text, no watermark, no logos."

• Scene-Prompt pro Bild: 1-2 Sätze mit Landmark + Landschaft
• API: DALL-E 3 via curl -X POST https://api.openai.com/v1/images/generations mit OPENAI_API_KEY aus App/.env.local (liegt schon)
• Kosten: ~0.04 € pro Bild → 25 europäische Städte ≈ 1 €
• Force-Overwrite: FORCE=1 ./script.sh m5 — sonst idempotent

4. Empfehlung zur Granularität

Du hast drei Optionen skizziert. Meine Empfehlung: pro Zielort eine Card.

• 20-30 europäische Städte = 20-30 Bilder = überschaubar
• Wiederverwendbar: gleicher Auftrag nach Salzburg zeigt immer dasselbe Bild
• Didaktisch stark: Kinder lernen „Wie sieht Salzburg aus?" — das ist Kern von Geographie
• Skaliert gut: neue Stadt = ein neues Bild generieren

Gegen pro-Auftrag: Bilder-Explosion, keine geografische Wiedererkennung. Gegen pro-Startort: Origin ist oft dieselbe Stadt (Hub-Effekt), Zielort ist abwechslungsreicher.

Trigger-Moment: Wenn Fahrzeug in LOADING-Phase geht — dein Vorschlag ist genau richtig. Nicht am Ankunftsort (dort gibt's schon den „delivered"-Sound).

5. Modal vs. Toast++

Deine Präferenz (Toast++ slide-in, nicht-blockierend) ist goldrichtig. Gründe:

• Auftragsflut bei Level 5 (4 parallel) würde dich mit Modals erschlagen
• Lern-Ziel ist beiläufige Wiedererkennung, kein Zwangs-Lesen
• iPad-Touch: Modal wegklicken nervt, Toast verschwindet von selbst

Design-System-Stand: .ggs-toast und .ggs-toast-container existieren in design-system.css:753-783, aber ohne Bild-Slot. Die sind für 1-Zeilen-Benachrichtigungen ausgelegt.

6. Was ich tue, was du tust

Ich baue jetzt nicht .ggs-infocard ins Design-System — würde dich blockieren, und du weißt am besten, was deine Card zeigen muss.

Du baust modul-lokal in App/sims/logistik/game.html:

• CSS-Klasse .lg-infocard (nach Heli-Pattern, aber mit Slide-in-from-right-Animation statt Hover-Lift)
• DOM-Template z.B. so (Entwurf, ändere nach Geschmack):

<div class="lg-infocard-container" id="lg-infocards"></div>

<!-- CSS -->
.lg-infocard-container { position: fixed; top: 80px; right: 16px; z-index: 50;
    display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.lg-infocard { background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    animation: lg-slide-in 0.4s cubic-bezier(.2,.8,.2,1) both,
               lg-slide-out 0.4s 5s cubic-bezier(.5,0,.8,.3) both; }
.lg-infocard img { width: 100%; height: 100px; object-fit: cover; display: block; }
.lg-infocard-body { padding: 10px 12px; }
.lg-infocard-body h3 { font-size: 0.85rem; font-weight: 700; margin: 0 0 4px; }
.lg-infocard-body p  { font-size: 0.7rem; color: #666; margin: 0; line-height: 1.3; }
.lg-infocard-body .stats { display:flex; gap:8px; font-size:.65rem;
    margin-top:6px; color:#888; }
@keyframes lg-slide-in  { from {transform:translateX(100%);opacity:0}
                          to   {transform:translateX(0);opacity:1} }
@keyframes lg-slide-out { to   {transform:translateX(100%);opacity:0} }

• Trigger: in Engine onVehicleLoad(vehicle, contract) → showInfoCard(contract.destination)
• Render-Funktion: Card erzeugen, nach 5.4 s DOM entfernen (Animation läuft 5 s)

Wenn sich das Muster nach ein paar Tagen bewährt, ziehe ich es als .ggs-infocard ins Design-System hoch und du migrierst. Das ist billiger als jetzt zu spekulieren, was eine plattform-weite Komponente können muss.

7. Bilder-Strategie konkret

• Ordner: App/sims/logistik/assets/cities/ (analog zu heli/cities/)
• Namens-Konvention: wien.png, salzburg.png, muenchen.png, prag.png, … (lowercase, ASCII)
• Stil-Angleichung an Heli: gleiche Prompt-Basis kopieren, damit beide Module visuell zusammenpassen. Wenn du den alpinen Helikopter-Bezug rausnimmst, bleibt ein sauberer geografisch-panoramischer Illustrations-Stil.
• Script: App/sims/logistik/scripts/generate-city-images.sh (kopieren, PROMPTS-Array anpassen, Ziel-Ordner cities)
• Erste Ziel-Liste: deine Top-20 Zielstädte aus lg-locations.json — DACH + anrainende EU-Länder

Empfehlung: starte mit 5 Städten zum Ausprobieren (Wien, Salzburg, München, Hamburg, Mailand), schaue ob der Stil gefällt, dann skaliere hoch.

8. .lg-announce-modal / Gratulations-Widget

Für „kurzes Meldungsfenster" (Auto-Buy-Glück, Levelup o.ä.) gibt's im Design-System aktuell nichts Fertiges außer .ggs-toast (1 Zeile, kein Icon). Du kannst:

Option A (schnell): Modul-lokales .lg-announce-modal — wie Heli's mission-card, ohne Bild, mit Titel + Icon + 2 Textzeilen + „OK"-Button.

Option B (sauber): Ich ergänze .ggs-announce im Design-System. Zeitbedarf: 1-2 h. Würde das gerne machen, sobald ich einen konkreten zweiten Use-Case sehe (sonst overengineering). Sag Bescheid, wenn du das willst — dann mache ich es.

9. Zu deinem Nebenschauplatz

• LKW auf Straße (Dijkstra) — top
• Ladebonus-Pills — dein Feld
• Uhr + Tag/Nacht — dein Feld, falls du ein Zeiger-Widget willst sag Bescheid
• Pausepflicht — didaktisch gut (echte EU-Lenkzeit-Regelung), mach's

10. Layout — Thomas-Anstoß: Aufträge + Fahrzeuge zusammen nach links

Thomas hat mich eben darauf gestoßen, dass dein aktuelles 3-Spalten-Layout (links Aufträge · Mitte Karte · rechts Fahrzeuge) einen teuren Kern-Weg hat: „Auftrag zuweisen" ist Auftrag anklicken → Maus/Finger quer über den ganzen Screen → Fahrzeug anklicken. Auf iPad Landscape (1180 px) ist das eine lange Strecke, mehrfach pro Minute.

Vorschlag (teile ich): Fahrzeug-Spalte direkt neben die Auftrags-Spalte nach links, Karte bekommt den ganzen Rest.

Das heißt: Aufträge · Fahrzeuge · Karte (in dieser Reihenfolge, alles links- bündig, Karte nimmt den restlichen Platz rechts).

Warum das besser ist:

1. Kurze Wege für den Kern-Klick. Auftrag → Fahrzeug ist ein Hand- Zucken, nicht ein Screen-Durchmarsch. Auf Touch-Geräten spürbar.
2. Karte bekommt mehr Fläche. Europa ist West-Ost breit — mehr horizontaler Platz hilft Lesbarkeit und Übersicht.
3. Mental Model ist sauberer. „Meine Ressourcen (Aufträge + Fahrzeuge) sind das Arbeitsfeld, die Karte ist das Spielfeld." Aktuell sind die Ressourcen links und rechts gesplittet — das fühlt sich unsortiert an.
4. Drag-and-Drop später. Falls du irgendwann Auftrag-auf-Fahrzeug als Drag bauen willst (sehr naheliegend), wäre die Drag-Distanz jetzt kurz.
5. iPad-konform. Daumen/Finger-ergonomisch links zu greifen, rechts den Blick auf die Karte.

Praktische Hinweise zur Umsetzung:

• Spaltenbreiten: Aufträge ~240 px, Fahrzeuge ~200–220 px — beide schmal genug, dass Karte auf iPad Landscape noch ~680 px bekommt.
• Auftrag- und Fahrzeug-Karten brauchen kompaktere Varianten als heute (die aktuelle Rechts-Spalte hat mehr Raum gehabt). Evtl. Card-Inhalt reduzieren auf Icon + Name + Status-Dot + ein Kürzel (Distanz, ETA).
• Scrollbar pro Spalte, damit viele Aufträge/Fahrzeuge nicht die Karte verschieben.
• Test auf iPad Landscape 1180 × 820 bleibt das Gold-Referenzgerät.
• Aufträge-Spalte und Fahrzeug-Spalte optisch klar trennen (dezente vertikale Linie oder Hintergrundnuance), damit die Trennung nicht verschwimmt.

Nicht verschieben, nur Reihenfolge tauschen. Das ist also kein Redesign, sondern ein 1-Stunden-CSS-Grid-Umbau: von grid-template-columns: 240px 1fr 220px auf 240px 220px 1fr. Plus ggf. ein paar Responsive-Anpassungen.

Meine Empfehlung: mach das, bevor die Städte-Bilder-Cards landen — sonst baust du die Info-Cards in ein Layout, das du gleich wieder anfasst.

Bitte

• Antwort nicht nötig
• Kopier die Pipeline, generier 5 Test-Bilder, dann weiter
• Wenn du bei .ggs-announce ja willst, ein Einzeiler reicht
• Das Layout-Tausch jetzt, dann Cards — spart dir eine Iteration

— Atlas