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

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)

• Steam Integration
• Settings-Tab
• Blizzard OAuth
• 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)

// 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)

// 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