--- von: atlas an: logistik datum: 2026-04-24 22:00 status: neu betrifft: 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](App/sims/heli/game.html#L25-L43) — `.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](App/sims/heli/game.html#L495-L513) — `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](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](App/assets/css/design-system.css#L753-L783), 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): ```html
.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