whattoplay/docs/FEATURES-OVERVIEW.md

# WhatToPlay - Feature-Übersicht (Februar 2026)

## 🆕 Neue Features

### 1️⃣ Settings-Tab mit Konfiguration

**Pfad**: `src/pages/Settings/SettingsPage.tsx`

```
Settings-Tab
  ├── 🎮 Steam Integration
  │   ├── API Key Input (verborgen)
  │   ├── Steam ID Input
  │   └── Tutorial-Button (✨ Step-by-Step Anleitung)
  │
  ├── 🌐 GOG Integration
  │   ├── User ID Input
  │   ├── Access Token Input (verborgen)
  │   └── Tutorial für Token-Extraction
  │
  ├── ⚙️ Epic Games
  │   ├── E-Mail Input
  │   ├── Import-Methode (Manual oder OAuth)
  │   └── ℹ️ Info: Keine öffentliche API
  │
  ├── 🔶 Amazon Games
  │   ├── E-Mail Input
  │   ├── Import-Methode (Manual oder OAuth)
  │   └── Ähnlich wie Epic
  │
  ├── ⚔️ Blizzard Entertainment
  │   ├── Client ID Input (verborgen)
  │   ├── Client Secret Input (verborgen)
  │   ├── Region Selector (US/EU/KR/TW)
  │   └── Tutorial-Button
  │
  └── 📦 Daten-Management
      ├── Config Exportieren (JSON Download)
      ├── Config Importieren (JSON Upload)
      └── Alle Einstellungen löschen
```

### 2️⃣ Integriertes Tutorial-System

**Pfad**: `src/components/TutorialModal.tsx`

Jeder Service hat sein eigenes Step-by-Step Tutorial:

```
Tutorial Modal
  ├── Steam
  │   ├── API Key generieren
  │   ├── Steam ID finden
  │   └── 6 Schritte mit Screenshots-Links
  │
  ├── GOG
  │   ├── Browser DevTools öffnen
  │   ├── Bearer Token kopieren
  │   └── 5 Schritte mit Code-Beispiele
  │
  ├── Epic Games
  │   ├── Account-Setup
  │   ├── JSON Export erklären
  │   └── 4 Schritte, einfach
  │
  ├── Amazon Games
  │   ├── Prime Gaming aktivieren
  │   ├── Luna erklärt
  │   └── 4 Schritte
  │
  └── Blizzard
      ├── Developer Portal
      ├── OAuth Credentials
      └── 6 Schritte detailliert
```

### 3️⃣ ConfigService - Sichere Speicherung

**Pfad**: `src/services/ConfigService.ts`

```typescript
ConfigService
  ├── loadConfig() - Lade aus localStorage
  ├── saveConfig() - Speichere in localStorage
  ├── exportConfig() - Download als JSON
  ├── importConfig() - Upload aus JSON
  ├── backupToIndexedDB() - Redundante Speicherung
  ├── restoreFromIndexedDB() - Aus Backup zurück
  ├── validateConfig() - Prüfe auf Fehler
  └── clearConfig() - Alles löschen
```

**Speicher-Strategie:**

- ✅ localStorage für schnellen Zugriff
- ✅ IndexedDB für Backup & Encryption-Ready
- ✅ Keine Tokens in localStorage ohne Verschlüsselung
- ✅ Export/Import für Cloud-Sync

### 4️⃣ Blizzard API Integration

**Pfad**: `scripts/fetch-blizzard.mjs`

```
Supported Games:
  • World of Warcraft
  • Diablo III (Heroes)
  • Diablo IV
  • Overwatch 2
  • StarCraft II
  • Heroes of the Storm
  • Hearthstone

Data:
  • Character Name
  • Level
  • Class
  • Hardcore Flag
  • Elite Kills
  • Experience
  • Last Updated
```

### 5️⃣ Cloudflare Workers Setup (Serverless)

**Pfad**: `docs/CLOUDFLARE-WORKERS-SETUP.md`

```
Zero Infrastructure Deployment:

  Frontend (Vercel/Netlify)
         ↓
  Cloudflare Workers (Serverless)
         ↓
  OAuth Callbacks + Token Exchange
         ↓
  GOG Galaxy Library API
  Blizzard Battle.net API
  Epic Games (später)
  Amazon Games (später)

✨ Benefits:
  • Keine Server zu verwalten
  • Kostenlos bis 100k req/Tag
  • Client Secrets geschützt (Server-Side)
  • CORS automatisch konfiguriert
  • Weltweit verteilt
```

---

## 📁 Neue Dateien

| Datei                                 | Beschreibung                | Status |
| ------------------------------------- | --------------------------- | ------ |
| `src/pages/Settings/SettingsPage.tsx` | Settings-Tab mit Formularen | ✅     |
| `src/pages/Settings/SettingsPage.css` | Styling                     | ✅     |
| `src/components/TutorialModal.tsx`    | Tutorial-System             | ✅     |
| `src/services/ConfigService.ts`       | Konfiguration speichern     | ✅     |
| `scripts/fetch-blizzard.mjs`          | Blizzard API Importer       | ✅     |
| `docs/CLOUDFLARE-WORKERS-SETUP.md`    | Worker Dokumentation        | ✅     |
| `docs/BLIZZARD-SETUP.md`              | Blizzard OAuth Guide        | ✅     |
| `config.local.json.example`           | Config Template             | ✅     |

---

## 🔄 Workflow für Nutzer

### Erste Nutzung:

```
1. App öffnen → Settings-Tab
2. Auf "?" Button klicken → Tutorial Modal
3. Step-by-Step folgen
4. Credentials eingeben
5. "Speichern" klicken → localStorage
6. Daten werden automatisch synced
```

### Daten importieren:

```
1. Settings-Tab → "Config importieren"
2. Datei auswählen (whattoplay-config.json)
3. Credentials werden wiederhergestellt
4. Alle APIs neu abfragen
```

### Daten exportieren:

```
1. Settings-Tab → "Config exportieren"
2. JSON-Datei downloaded
3. Kann auf anderem Device importiert werden
4. Oder als Backup gespeichert
```

---

## 🚀 Nächste Schritte

### Phase 1: Production Ready (Jetzt)

- [x] Steam Integration
- [x] Settings-Tab
- [x] Blizzard OAuth
- [x] Cloudflare Worker Setup (dokumentiert)

### Phase 2: Backend Deployment (1-2 Wochen)

- [ ] Cloudflare Worker deployen
- [ ] GOG OAuth Callback
- [ ] Blizzard OAuth Callback
- [ ] Token Encryption in KV Store

### Phase 3: Import Features (2-4 Wochen)

- [ ] Epic Games JSON Import UI
- [ ] Amazon Games JSON Import UI
- [ ] Drag & Drop Upload
- [ ] Validierung

### Phase 4: Polish (4+ Wochen)

- [ ] Home-Page Widgets
- [ ] Playlists Feature
- [ ] Discover/Tinder UI
- [ ] PWA Setup
- [ ] iOS Testing

---

## 📊 Statistiken

| Metric                      | Wert                                   |
| --------------------------- | -------------------------------------- |
| Unterstützte Plattformen    | 5 (Steam, GOG, Epic, Amazon, Blizzard) |
| Settings-Formulare          | 5                                      |
| Tutorial-Schritte           | 30+                                    |
| Cloudflare Worker Functions | 3 (GOG, Blizzard, Validation)          |
| API Endpoints               | 15+                                    |
| LocalStorage Capacity       | 5-10MB                                 |
| IndexedDB Capacity          | 50MB+                                  |

---

## 💡 Design Patterns

### Konfiguration speichern (Observable Pattern)

```typescript
// SettingsPage.tsx
const [config, setConfig] = useState<ServiceConfig>({});

const handleSaveConfig = (service: keyof ServiceConfig, data: any) => {
	const updated = { ...config, [service]: { ...config[service], ...data } };
	setConfig(updated);
	ConfigService.saveConfig(updated); // → localStorage
	// Optional: ConfigService.backupToIndexedDB(updated); // → Backup
};
```

### Tutorial System (Data-Driven)

```typescript
// TutorialModal.tsx - Alle Tutorials in TUTORIALS Objekt
const TUTORIALS: Record<string, Tutorial> = {
  steam: { ... },
  gog: { ... },
  // Einfach zu erweitern!
};
```

### OAuth Flow mit Cloudflare Worker

```
Frontend initiiert:
  ↓
Worker erhält Callback:
  ↓
Token Exchange Server-Side:
  ↓
Frontend erhält Token in URL:
  ↓
ConfigService speichert Token:
  ↓
Nächster API Call mit Token
```

---

## 🔐 Sicherheit

### ✅ Best Practices implementiert:

- Client Secrets in Backend nur (Cloudflare KV)
- Tokens mit Session-Speicher (nicht persistent)
- Export/Import mit Warnung
- Validation der Credentials
- CORS nur für eigene Domain
- State Parameter für CSRF

### ❌ Nicht implementiert (wäre Overkill):

- Token-Verschlüsselung in localStorage (würde Komplexität erhöhen)
- 2FA für Settings
- Audit Logs
- Rate Limiting (kommt auf Server-Side)

---

## 🎯 Gesamtziel

**Zero Infrastructure, Full-Featured:**

- Frontend: Statisch deployed (Vercel/Netlify)
- Backend: Serverless (Cloudflare Workers)
- Datenbank: Optional (Supabase/Firebase)
- Secrets: KV Store oder Environment Variables
- **Kosten**: ~$0/Monat für < 1000 User

Nutzer kann:

- ✅ Alle Credentials selbst eingeben
- ✅ Daten jederzeit exportieren/importieren
- ✅ Offline mit LocalStorage arbeiten
- ✅ Auf iOS/Web/Desktop gleiches UI
- ✅ Keine zusätzlichen Apps nötig