WhoPixels Major Refactor, Storage Animations & Picture Hardening

Feature-reicher Tag über drei Projekte hinweg mit 7 Commits und knapp 5.000 hinzugefügten Zeilen: WhoPixels-Spiel komplett refactored (21 Verbesserungen), Storage mit Drag-Animationen und Integration Tests ausgebaut, Picture-Backend gehärtet.

• ✅ WhoPixels — Monolithische RPGScene (1210 Zeilen) in 8 Module aufgeteilt
• ✅ WhoPixels — 21 Verbesserungen: Sound, Persistenz, Mobile, i18n, Security, 26 NPCs
• ✅ Storage — Drag & Drop Animationen, Integration Tests, Dockerfile-Optimierung
• ✅ Picture — Dead Stores entfernt, Type-Check repariert, Testabdeckung +1064 Zeilen
• ✅ Phaser — Von 3.55.2 auf 3.80.1 migriert inkl. Particle-API-Breaking-Change

1. WhoPixels — Kompletter Refactor (21/21 Verbesserungen)

Das WhoPixels-Spiel (games/whopixels/) wurde systematisch überarbeitet. Aus einer einzigen 1210-Zeilen-Datei (RPGScene.js) entstand eine saubere, modulare Architektur:

Neue Dateistruktur

js/
├── config/
│   ├── constants.js      # GAME_CONFIG — alle Magic Numbers zentralisiert
│   └── i18n.js           # Übersetzungssystem (DE/EN)
├── managers/
│   ├── WorldManager.js   # Welt-Generierung, Terrain, Hindernisse
│   ├── PlayerManager.js  # Spieler, Bewegung, Custom-Avatar-Support
│   ├── NPCManager.js     # NPC-Spawning, Interaktion, Enthüllung
│   ├── ChatUI.js         # Chat-Interface, API-Kommunikation
│   ├── StorageManager.js # LocalStorage-Persistenz, Statistiken
│   ├── SoundManager.js   # Web Audio API Synthesizer-Sounds
│   └── TouchControls.js  # Virtueller Joystick + Interact-Button
└── scenes/
    ├── RPGScene.js       # 82 Zeilen — nur noch Orchestrator
    ├── GameScene.js      # Pixel-Editor mit Avatar-Export
    ├── MainMenuScene.js  # Stats, Sprach-Umschalter
    └── BootScene.js      # Textur-Generierung + Avatar-Laden

Architektur & Code-Qualität

Gameplay-Features

Persistenz — StorageManager speichert entdeckte NPCs, Guess-Counter, Statistiken und Serien in LocalStorage. Fortschritt bleibt über Sessions erhalten.

Sound — SoundManager nutzt die Web Audio API für programmatische Sounds (kein Laden externer Dateien):

playReveal() {
    const notes = [523, 659, 784, 1047]; // C5, E5, G5, C6 — Fanfare
    notes.forEach((freq, i) => {
        setTimeout(() => this._playTone(freq, 0.3, 'triangle', 0.25), i * 150);
    });
}

26 NPCs statt 10 — in drei Kategorien:

• Erfinder (1–10): da Vinci, Tesla, Curie, Edison, Lovelace, Archimedes, Gutenberg, Hopper, Bell, Lamarr
• Wissenschaftler (11–18): Einstein, Newton, Darwin, Galilei, Franklin, Hawking, Humboldt, Meitner
• Künstler & Denker (19–26): Mozart, Kahlo, Shakespeare, Cleopatra, Beethoven, Konfuzius, Hypatia, Kopernikus

Pixel-Editor Integration — Spieler können im Pixel-Editor einen 16×16 Avatar malen, als custom_avatar speichern und als Spieler-Sprite im RPG verwenden.

Mobile & UX

Touch-Controls — TouchControls erkennt automatisch Touch-Geräte und zeigt:

• Virtueller Joystick (links) für Bewegung
• Interact-Button (rechts) für NPC-Gespräche

Tutorial — Interaktives Overlay beim ersten Spielstart mit angepassten Hinweisen (Desktop vs. Mobile).

Chat-UI — Typing-Indicator mit animierten Punkten, Chat-Historie (letzte 4 Nachrichten), bessere visuelle Struktur.

Animations-Feedback — Schwebendes ? über NPCs in Interaktions-Reichweite mit Sinus-Animation.

Server-Hardening

┌─────────────────────────────────────────────────────────┐
│                    server.js (vorher)                     │
│  ❌ CORS: Access-Control-Allow-Origin: *                 │
│  ❌ Kein Rate Limiting                                   │
│  ❌ Kein Input-Sanitization                              │
│  ❌ Kein Timeout                                         │
│  ❌ Unbegrenzte Conversation History                     │
│  ❌ Kein Path-Traversal-Schutz                           │
└─────────────────────────────────────────────────────────┘
                          ▼
┌─────────────────────────────────────────────────────────┐
│                    server.js (nachher)                    │
│  ✅ CORS: Konfigurierbare ALLOWED_ORIGINS               │
│  ✅ Rate Limiting: 30 req/min pro IP                     │
│  ✅ Input-Sanitization: 2000 Zeichen, Control Chars      │
│  ✅ 15s AbortController Timeout                          │
│  ✅ Max 20 Conversation-Einträge                         │
│  ✅ Path-Traversal-Prevention                            │
│  ✅ 50KB Body-Size-Limit                                 │
│  ✅ Typ-Validierung aller Request-Felder                 │
└─────────────────────────────────────────────────────────┘

i18n-Framework

Einfaches Übersetzungssystem mit I18N.t('key', {params}):

I18N.t('youRevealed', { name: 'Tesla' });
// DE: "Du hast Tesla entlarvt!"
// EN: "You revealed Tesla!"

Sprach-Umschalter im Hauptmenü, Sprache wird in LocalStorage gespeichert.

Phaser 3.55.2 → 3.80.1

Breaking Change bei der Particle-API migriert:

// Vorher (3.55 — ParticleEmitterManager)
const particles = this.add.particles('particle');
const emitter = particles.createEmitter({ ... });

// Nachher (3.80 — direkter ParticleEmitter)
this._emitter = this.add.particles(0, 0, 'particle', {
    emitting: false, ...config
});

2. Storage — Animationen & Integration Tests

Drag & Drop Animationen

FileCards und FolderCards haben jetzt visuelle Feedback-Animationen beim Drag & Drop:

• Scale-Animation beim Aufnehmen
• Transparenz-Änderung während des Ziehens
• Smooth-Return-Animation beim Loslassen

Integration Tests

+676 Zeilen neue Integration Tests in client-integration.test.ts — decken die gesamte API-Client-Schicht ab.

Dockerfile-Optimierung

Storage-Backend-Dockerfile wurde optimiert für schnellere Builds und kleinere Images.

Audit Score

Storage Audit Score: 75 → 78 nach Animationen und Integration Tests.

3. Picture — Backend-Hardening

Dead Stores entfernt

12 ungenutzte Svelte Store-Dateien gelöscht (1.315 Zeilen entfernt):

• archive.svelte.ts, boards.svelte.ts, canvas.svelte.ts
• contextMenu.svelte.ts, explore.svelte.ts, generate.svelte.ts
• images.svelte.ts, models.svelte.ts, sidebar.svelte.ts
• tags.svelte.ts, ui.svelte.ts, view.svelte.ts

Test Coverage

+1.064 Zeilen neue Tests für generate.service.spec.ts — umfassende Testabdeckung für den Bildgenerierungs-Service.

PWA & API

• PWA-Support hinzugefügt
• API-Timeouts konfiguriert
• Batch-Fix für parallele Generierungen
• Credit- und History-Endpoints erweitert

4. Infrastruktur

GlitchTip Health Check — wget durch python3 ersetzt, da wget nicht im Container-Image vorhanden ist.

Zusammenfassung

Nächste Schritte

1. WhoPixels — Multiplayer-Modus oder Leaderboard mit Backend-Anbindung
2. Storage — Audit Score weiter Richtung 85+ pushen
3. Picture — PWA testen und auf Produktion deployen
4. Allgemein — App-Onboarding-Wizards für die restlichen Apps aktivieren