managarten/games/arcade/CLAUDE.md

Arcade - CLAUDE.md

AI-powered browser games platform mit 22+ Spielen und KI-Spielgenerierung.

Projektstruktur

games/arcade/
├── apps/
│   ├── web/              # SvelteKit Web-App (@arcade/web)
│   │   ├── src/
│   │   │   ├── routes/   # SvelteKit-Routen
│   │   │   │   ├── (app)/          # App-Routen mit PillNavigation
│   │   │   │   │   ├── play/[slug] # Spiel im iframe
│   │   │   │   │   ├── create/     # AI Game Generator
│   │   │   │   │   ├── community/  # Community-Spiele
│   │   │   │   │   ├── stats/      # Spieler-Statistiken
│   │   │   │   │   └── play-generated/ # Generierte Spiele
│   │   │   │   └── (auth)/         # Login/Register
│   │   │   └── lib/
│   │   │       ├── components/     # Svelte 5 Komponenten
│   │   │       ├── data/           # Local-first Store, Game-Katalog
│   │   │       ├── stores/         # Theme, Auth, Navigation
│   │   │       ├── services/       # Game-Kommunikation (postMessage)
│   │   │       └── i18n/           # DE + EN Übersetzungen
│   │   └── static/
│   │       ├── games/              # 22 HTML-Spiele
│   │       └── screenshots/        # Game-Thumbnails
│   ├── web-astro/        # Alte Astro-App (Referenz, zum Löschen)
│   └── backend/          # NestJS API (@arcade/backend)
│       └── src/
│           ├── game-generator/   # AI-Spielgenerierung (Gemini, Claude, GPT-4)
│           ├── game-submission/  # Community-Einreichungen (GitHub API)
│           └── health/
└── package.json          # Root (arcade)

Tech Stack

Aspekt	Technologie
Frontend	SvelteKit 2 + Svelte 5 (Runes)
Styling	Tailwind CSS 4 + @manacore/shared-tailwind
Auth	@manacore/shared-auth (SSO)
PWA	@vite-pwa/sveltekit + @manacore/shared-pwa
State	@manacore/local-store (Dexie.js + sync)
i18n	svelte-i18n (DE + EN)
UI	@manacore/shared-ui (PillNav, AuthGate, etc.)
Theming	@manacore/shared-theme (multi-theme)
Backend	NestJS (AI-Generierung, Community)

Entwicklung

# Alles starten (Web + Backend)
pnpm arcade:dev

# Nur Web (SvelteKit)
pnpm dev:arcade:web

# Nur Backend (NestJS)
pnpm dev:arcade:backend

# Web + Backend zusammen
pnpm dev:arcade:app

Ports:

• Web: http://localhost:5210
• Backend: http://localhost:3011

Local-First Daten

Stats und generierte Spiele werden in IndexedDB gespeichert (Dexie.js) mit optionalem Sync:

Collections:

• gameStats — Highscores, Spielzeit, Spiele pro Game
• generatedGames — Mit KI erstellte Spiele (HTML, Prompt, Modell)
• favorites — Favorisierte Spiele

Dateien:

• src/lib/data/local-store.ts — Dexie-Store Definition
• src/lib/data/queries.ts — Reactive Queries (useLiveQuery)
• src/lib/data/games.ts — Statischer Spielekatalog (21 Spiele)

API Endpoints

Endpoint	Method	Beschreibung
/api/health	GET	Health Check
/api/games/generate	POST	AI-Spielgenerierung
/api/games/submit	POST	Community-Einreichung

POST /api/games/generate

{
  "description": "Ein Snake-Spiel im Neon-Stil",
  "mode": "create",
  "model": "gemini-2.0-flash",
  "originalPrompt": "...",
  "currentCode": "..."
}

Unterstützte Modelle:

Modell	Provider	Beschreibung
gemini-2.0-flash	Google	Schnell & günstig (Standard)
gemini-2.5-flash	Google	Schnell & gut
gemini-2.5-pro	Google	Höchste Qualität
claude-3.5-haiku	Anthropic	Schnell & präzise
claude-3.5-sonnet	Anthropic	Beste Code-Qualität
gpt-4o-mini	Azure OpenAI	Ausgewogen
gpt-4o	Azure OpenAI	Sehr gut

Environment Variables

MANA_GAMES_BACKEND_PORT=3011
MANA_GAMES_GOOGLE_GENAI_API_KEY=your_key
MANA_GAMES_ANTHROPIC_API_KEY=your_key
MANA_GAMES_AZURE_OPENAI_ENDPOINT=https://your-endpoint.openai.azure.com
MANA_GAMES_AZURE_OPENAI_API_KEY=your_key
MANA_GAMES_AZURE_OPENAI_DEPLOYMENT=gpt-4o
MANA_GAMES_GITHUB_TOKEN=your_token
MANA_GAMES_GITHUB_OWNER=tillschneider
MANA_GAMES_GITHUB_REPO=arcade

Spiel hinzufügen

1. HTML-Datei in apps/web/static/games/spiel_name.html
2. Screenshot in apps/web/static/screenshots/spiel-name.jpg
3. Registrieren in apps/web/src/lib/data/games.ts

Spiel-postMessage Integration

// Beim Laden
window.parent.postMessage({ type: 'GAME_LOADED', gameId: 'spiel-slug' }, '*');

// Bei Score-Update
window.parent.postMessage({
  type: 'GAME_EVENT', gameId: 'spiel-slug',
  event: 'SCORE_UPDATE', data: { score: 123 }
}, '*');

// Bei Game Over
window.parent.postMessage({
  type: 'GAME_EVENT', gameId: 'spiel-slug',
  event: 'GAME_OVER', data: { score: 123 }
}, '*');

Spielekatalog

21 Spiele in folgenden Genres: Arcade, Puzzle, Tower Defense, Idle/Incremental, Jump 'n' Run, Action, Strategie