diff --git a/apps/manacore/apps/landing/src/content/devlog/2026-03-21-whopixels-refactor-storage-picture.md b/apps/manacore/apps/landing/src/content/devlog/2026-03-21-whopixels-refactor-storage-picture.md new file mode 100644 index 000000000..310ed3142 --- /dev/null +++ b/apps/manacore/apps/landing/src/content/devlog/2026-03-21-whopixels-refactor-storage-picture.md @@ -0,0 +1,241 @@ +--- +title: 'WhoPixels Major Refactor, Storage Animations & Picture Hardening' +description: 'WhoPixels-Spiel komplett überarbeitet mit 21 Verbesserungen (Architektur, Gameplay, Security, i18n), Storage mit Animationen und Integration Tests erweitert, Picture Backend gehärtet.' +date: 2026-03-21 +author: 'Till Schneider' +category: 'feature' +tags: + [ + 'whopixels', + 'phaser', + 'game-dev', + 'refactoring', + 'storage', + 'picture', + 'security', + 'i18n', + 'mobile', + 'animations', + ] +featured: true +commits: 7 +readTime: 8 +stats: + filesChanged: 67 + linesAdded: 4949 + linesRemoved: 2880 +contributors: + - name: 'Till Schneider' + handle: 'Till-JS' + commits: 7 +workingHours: + start: '2026-03-21T10:00' + end: '2026-03-21T18:00' +--- + +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 + +| Vorher | Nachher | +| -------------------------------- | --------------------------------------- | +| 1 Datei, 1210 Zeilen | 12 Dateien, modulare Manager | +| Magic Numbers überall | `GAME_CONFIG` Objekt mit ~60 Konstanten | +| Kein Type-Safety | JSDoc-Typen + `jsconfig.json` | +| Doppelter Code (`createTestNPC`) | Konsolidiert in `spawnNewNPC()` | + +### 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): + +```javascript +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})`: + +```javascript +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: + +```javascript +// 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 + +| Bereich | Commits | Dateien | +/- | +| ---------- | ------- | -------------------- | ------------------- | +| WhoPixels | 2 | 18 neue + 7 geändert | +3.576 / -1.462 | +| Storage | 2 | 6 | +741 / -73 | +| Picture | 2 | 22 | +1.298 / -1.354 | +| Infra | 1 | 1 | +1 / -1 | +| **Gesamt** | **7** | **67** | **+4.949 / -2.880** | + +## 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