# 📁 FortuneCookie - Asset Anforderungen

**Version:** 1.0.1
**Datum:** 02.06.2026
**Zweck:** Spezifikationen für Grafik-Assets (Hintergründe, Logos, Icons)

---

## 🎨 Allgemeine Anforderungen

### Dateiformate
| Asset-Typ | Empfohlen | Alternative | Grund |
|-----------|-----------|-------------|-------|
| Hintergründe | `.png` | `.jpg` | Transparenz möglich, gute Qualität |
| Logos | `.png` | `.svg` | Transparenz, scharfe Kanten |
| Icons | `.png` | - | Konsistenz mit bestehenden Assets |

### Dateinamen-Konventionen
- **Nur Kleinbuchstaben** (z. B. `background_70s.png`, nicht `Background_70s.PNG`)
- **Bindestriche statt Leerzeichen** (z. B. `seventies-style.png`, nicht `seventies style.png`)
- **Keine Umlaute/Sonderzeichen** (z. B. `esoteric.png`, nicht `esoterisch.png`)
- **Keine Versionen in Dateinamen** (z. B. `logo.png`, nicht `logo_v2_final.png`)

---

## 📏 Größen & Auflösungen

### Hintergründe
- **Abmessungen:** **1080 × 1920 Pixel** (Full HD, 16:9)
- **QML-Einheit:** 45 GU (Breite) × 75 GU (Höhe) = 1080×1920 px
- **Dateigröße:** **Max. 500 KB pro Bild**
- **Farbraum:** RGB
- **Transparenz:** Optional (PNG unterstützt Alpha-Kanal)

**Benötigte Varianten:**
```
assets/backgrounds/
├── 70s.png          # 70er-Jahre Stil (Disco, Retro)
├── esoteric.png     # Esoterisch (Mystik, Tarot, spirituell)
└── heavenly.png     # Himmelisch (Wolken, Engel, Licht)
```

### Logos
- **Haupt-Logo (Startseite):** **240 × 240 Pixel** (ca. 30 GU × 30 GU)
- **Button-Icon (Musik):** **80 × 80 Pixel** (ca. 10 GU × 10 GU)
- **Dateigröße:** Max. 200 KB pro Logo
- **Transparenz:** **Pflicht** (PNG mit Alpha-Kanal)
- **Farbraum:** RGB

**Benötigte Varianten:**
```
assets/logos/
├── default.png      # Standard Logo (Glückskeks)
├── 70s.png          # 70er-Jahre Stil (passend zu Hintergrund)
├── esoteric.png     # Esoterisch (passend zu Hintergrund)
├── heavenly.png     # Himmelisch (passend zu Hintergrund)
└── unfortune.png    # Gothic/Dark (Totenköpfe, Lilafarben, Blitze)
```

### Icons
- **Musik-Button:** Emoji (🎵/🔇) oder PNG (80×80 px)
- **Dateigröße:** Max. 50 KB
- **Transparenz:** Pflicht

---

## 📂 Verzeichnis-Struktur

```
fortunecookie-neu/
└── testing/
    └── assets/
        │
        ├── ASSET_REQUIREMENTS.md    # ← Diese Datei
        │
        ├── backgrounds/              # Hintergrundbilder (Full HD)
        │   ├── 70s.png
        │   ├── esoteric.png
        │   └── heavenly.png
        │
        ├── logos/                   # Logos (240×240 px, transparent)
        │   ├── default.png
        │   ├── 70s.png
        │   ├── esoteric.png
        │   ├── heavenly.png
        │   └── unfortune.png
        │
        └── sounds/                  # Bestehend
            ├── chinese_music.mp3
            └── cookie_crack.mp3
```

---

## ⚠️ WICHTIGE HINWEISE für Ubuntu Touch

### 1. QML-Kompatibilität
- **SVG-Unterstützung:** Begrenzt in Lomiri/QML - **PNG bevorzugen**
- **Transparenz:** Funktioniert mit PNG (Alpha-Kanal)
- **Skalierung:** Bilder werden automatisch skaliert, aber native Auflösung empfohlen

### 2. QML-Integration
Hintergründe einbinden:
```qml
Image {
    id: background
    anchors.fill: parent
    source: Qt.resolvedUrl("../assets/backgrounds/70s.png")
    fillMode: Image.PreserveAspectCrop
}
```

Logos einbinden:
```qml
Image {
    id: logo
    width: units.gu(30)
    height: units.gu(30)
    source: Qt.resolvedUrl("../assets/logos/70s.png")
    fillMode: Image.PreserveAspectFit
}
```

### 3. Performance
- **Maximale Dateigröße:** 1 MB pro Asset (Click-App Limit)
- **Optimierung:** Bilder vor dem Einbinden mit `optipng` oder `pngquant` komprimieren
- **Anzahl:** Max. 20-30 Assets pro App (für schnelles Laden)

---

## 🎯 Nächste Schritte (Phase 1)

1. **Erstelle die Bilder** according to den Spezifikationen
2. **Speichere sie** im richtigen Verzeichnis (`assets/backgrounds/` und `assets/logos/`)
3. **Benenne sie** nach der Konvention
4. **Informiere mich** - ich baue die Auswahl-Funktionalität in die Einstellungen ein

---

## 📞 Support

Fragen zu den Anforderungen?
→ einfach fragen oder in den entsprechenden Kanälen nachfragen.