# HTML Chess Game - Implementation Swarm Prompt
## ๐ฏ Mission
Implementiere ein vollstรคndiges HTML-Schachspiel basierend auf der umfassenden Planungsdokumentation im `/docs` Verzeichnis.
## ๐ Kontext
Ein Planungs-Swarm hat bereits eine komplette, produktionsreife Spezifikation erstellt mit:
- โ
Vollstรคndiger Architektur (MVC + Event-System)
- โ
120+ Test Cases spezifiziert
- โ
Code-Templates und Beispielen
- โ
Schritt-fรผr-Schritt-Implementierungsguide
- โ
100+ Code-Snippets und Patterns
- โ
Kompletter API-Dokumentation
## ๐ Deine Aufgabe
Implementiere das Schachspiel in **4-5 Wochen** (100-125 Stunden) mit folgenden Phasen:
### Phase 1: MVP Core (Wochen 1-2)
- Board-Rendering (DOM-basiert mit CSS Grid)
- Alle 6 Figuren-Typen mit korrekter Bewegungslogik
- Drag-and-Drop + Tap-to-Move (mobile-first)
- Zugvalidierung mit allen Schachregeln
- Check/Checkmate/Stalemate-Erkennung
### Phase 2: Enhanced UX (Wochen 3-4)
- CSS-Animationen fรผr Zรผge
- Sound-Effekte
- Zughistorie mit Undo/Redo
- Save/Load via localStorage
- PGN/FEN Import/Export
### Phase 3: AI Opponent (Optional - Wochen 5-6)
- Minimax-Algorithmus mit Alpha-Beta-Pruning
- 5 Schwierigkeitsstufen
- Web Worker fรผr Performance
- Optional: Stockfish.js Integration
## ๐ Dokumentation (SEHR WICHTIG - LIES DIESE ZUERST!)
### Start hier:
1. **`/docs/HANDOFF_CHECKLIST.md`** โญ - Komplette Roadmap und Quick Start
2. **`/docs/IMPLEMENTATION_GUIDE.md`** ๐ - Schritt-fรผr-Schritt-Anleitung
3. **`/docs/API_REFERENCE.md`** ๐ - Alle Class/Method-Signaturen
### Wรคhrend der Implementierung:
- **`/docs/CHESS_RULES.md`** โ๏ธ - Vollstรคndige Schachregeln (Castling, En Passant, etc.)
- **`/docs/DEVELOPER_GUIDE.md`** ๐ ๏ธ - Testing, Debugging, Best Practices
- **`/docs/architecture/`** ๐๏ธ - System-Design, Komponenten, Datenmodelle
- **`/docs/implementation/code-templates/`** ๐ป - Copy-paste fertige Templates
- **`/docs/implementation/examples/`** ๐ - Vollstรคndige Implementierungsbeispiele
- **`/docs/testing/`** ๐งช - Test-Strategie und alle Test Cases
- **`/docs/diagrams/ARCHITECTURE.md`** ๐จ - 16 visuelle Diagramme
## ๐ฏ Erfolgs-Kriterien
Das Projekt ist erfolgreich, wenn:
โ
**Funktional:**
- Alle FIDE-Schachregeln korrekt implementiert
- Alle Spezialfรคlle funktionieren (Castling, En Passant, Promotion, Rochade)
- Check, Checkmate, Stalemate korrekt erkannt
- Zwei-Spieler-Modus funktioniert vollstรคndig
โ
**Qualitรคt:**
- 90%+ Test Coverage (Jest + Playwright)
- Alle 120+ Test Cases aus `/docs/testing/test-specifications.md` bestehen
- Keine Eslint/TypeScript-Fehler
- WCAG 2.1 Level AA Accessibility
โ
**Performance:**
- Ladezeit <2 Sekunden (Desktop)
- 60 FPS Rendering
- Bundle-Grรถรe <150KB (gzipped)
- Mobile responsive (320px - 2560px)
โ
**Code-Qualitรคt:**
- Folgt `/docs/implementation/coding-standards.md`
- JSDoc fรผr alle รถffentlichen Methoden
- Clean Code (SRP, DRY, KISS)
- Kommentare fรผr komplexe Schachlogik
## ๐๏ธ Empfohlene Dateistruktur
```
chess-game/
โโโ index.html
โโโ css/
โ โโโ board.css
โ โโโ pieces.css
โ โโโ game-controls.css
โโโ js/
โ โโโ models/
โ โ โโโ Board.js
โ โ โโโ Piece.js
โ โ โโโ pieces/
โ โ โ โโโ Pawn.js
โ โ โ โโโ Knight.js
โ โ โ โโโ Bishop.js
โ โ โ โโโ Rook.js
โ โ โ โโโ Queen.js
โ โ โ โโโ King.js
โ โ โโโ GameState.js
โ โโโ controllers/
โ โ โโโ GameController.js
โ โ โโโ MoveController.js
โ โโโ views/
โ โ โโโ BoardView.js
โ โ โโโ UIManager.js
โ โโโ engine/
โ โ โโโ MoveValidator.js
โ โ โโโ RuleEngine.js
โ โ โโโ CheckDetector.js
โ โ โโโ SpecialMoves.js
โ โโโ ai/
โ โ โโโ AIPlayer.js
โ โ โโโ Minimax.js
โ โ โโโ Evaluator.js
โ โโโ utils/
โ โโโ Constants.js
โ โโโ Helpers.js
โ โโโ EventBus.js
โ โโโ FENParser.js
โ โโโ PGNParser.js
โโโ assets/
โ โโโ pieces/ (SVG icons)
โ โโโ sounds/
โโโ tests/
โโโ unit/
โโโ integration/
โโโ e2e/
```
## ๐ง Technologie-Stack (aus Planung empfohlen)
**Core:**
- Vanilla JavaScript ES6+ (KEIN Framework nรถtig)
- HTML5 + CSS3 (CSS Grid fรผr Board)
- DOM-basiertes Rendering (NICHT Canvas)
**Optional Libraries:**
- chess.js (fรผr Game Logic Validation)
- chessboard.js (fรผr Board Rendering)
- Stockfish.js (fรผr weltklasse AI)
**Build Tools:**
- Babel (ES6+ Transpilation)
- Webpack/Vite (Bundling)
- Jest (Unit/Integration Tests)
- Playwright (E2E Tests)
**Development:**
- ESLint + Prettier
- Husky (Pre-commit Hooks)
- Lighthouse CI (Performance)
## ๐ Implementierungsreihenfolge (wichtig!)
Folge exakt dieser Reihenfolge aus `/docs/IMPLEMENTATION_GUIDE.md`:
**Tag 1-2: Setup & Board**
1. Projekt-Setup (package.json, build tools)
2. Board-Klasse (8x8 Gitter, Koordinaten)
3. BoardView-Klasse (CSS Grid Rendering)
**Tag 3-5: Pieces**
4. Base Piece-Klasse
5. Alle 6 Piece-Typen (Pawn, Knight, Bishop, Rook, Queen, King)
6. Movement-Logik fรผr jede Figur
**Tag 6-8: Move Validation**
7. MoveValidator (Legal moves)
8. RuleEngine (Schachregeln)
9. CheckDetector (King in check)
**Tag 9-12: Game Logic**
10. GameController (Spielfluss)
11. SpecialMoves (Castling, En Passant, Promotion)
12. Checkmate/Stalemate Detection
**Tag 13-15: UI**
13. Drag-and-Drop
14. Tap-to-Move (Mobile)
15. Visual Feedback (highlights, animations)
**Tag 16-20: Polish**
16. Game History + Undo/Redo
17. Save/Load + PGN/FEN
18. Sound Effects + Animations
19. Comprehensive Testing
20. Performance Optimization
**Tag 21-25 (Optional): AI**
21. Minimax Algorithm
22. Alpha-Beta Pruning
23. Position Evaluation
24. Difficulty Levels
25. Web Worker Integration
## โ ๏ธ Kritische Implementierungs-Hinweise
### Hรคufige Fallstricke (aus `/docs/IMPLEMENTATION_GUIDE.md`):
1. **En Passant:** Muss im selben Zug nach Pawn-Doppelschritt mรถglich sein
2. **Castling:** 5 Bedingungen mรผssen erfรผllt sein (King/Rook unmoved, kein Check, freie Felder, etc.)
3. **Checkmate vs. Stalemate:** King in check + keine legalen Zรผge = Checkmate; King NICHT in check + keine legalen Zรผge = Stalemate
4. **Pawn Promotion:** Automatisch beim Erreichen der gegnerischen Grundreihe
5. **Zugvalidierung:** IMMER prรผfen ob eigener King in Check nach Zug (illegal!)
6. **FEN Parsing:** Validierung und Error Handling essentiell
### Performance-Optimierungen:
- Bitboards fรผr schnelle Position-Checks (optional)
- Move caching fรผr AI
- RequestAnimationFrame fรผr Animationen
- Lazy loading fรผr Assets
- Virtual scrolling fรผr lange Zughistorie
## ๐งช Testing-Anforderungen
Implementiere Tests fรผr:
### Unit Tests (70% der Tests)
- Jede Piece-Bewegung einzeln
- MoveValidator Edge Cases
- FEN/PGN Parser
- Check Detection
- Special Moves
### Integration Tests (20%)
- Game Flow (Start โ Zรผge โ Checkmate)
- UI Interaktionen
- Save/Load Functionality
### E2E Tests (10%)
- Komplette Spiele
- Famous Games Replay (Immortal Game, Opera Game)
- Browser Compatibility
**Test Coverage Minimum:** 90% (siehe `/docs/testing/quality-criteria.md`)
## ๐จ UI/UX Requirements
- **Desktop:** Drag-and-Drop primรคr
- **Mobile:** Tap-to-Move primรคr (Tap Piece โ Tap Destination)
- **Responsive:** 320px - 2560px
- **Accessibility:** Keyboard Navigation, Screen Reader Support, ARIA Labels
- **Visual Feedback:**
- Highlight legal moves when piece selected
- Animation for piece movement
- Check indicator for King
- Last move highlight
## ๐ Monitoring & Deployment
- Bundle size report
- Lighthouse performance score >90
- Deploy to GitHub Pages / Netlify / Vercel
- Cross-browser testing (Chrome, Firefox, Safari, Edge)
## ๐จ WICHTIG: Bevor du startest!
1. โ
Lies ZUERST `/docs/HANDOFF_CHECKLIST.md` (30 Minuten)
2. โ
Studiere `/docs/IMPLEMENTATION_GUIDE.md` Phase 1 (1 Stunde)
3. โ
Reviewe Code-Templates in `/docs/implementation/code-templates/`
4. โ
Verstehe Schachregeln aus `/docs/CHESS_RULES.md`
5. โ
Setup Entwicklungsumgebung via `/docs/DEVELOPER_GUIDE.md`
**Total prep time:** ~2-3 Stunden
**Dann:** START CODING! ๐
## ๐ Support & Fragen
**BEVOR du fragst, checke:**
1. Implementation steps? โ `/docs/IMPLEMENTATION_GUIDE.md`
2. Method signatures? โ `/docs/API_REFERENCE.md`
3. Chess rules? โ `/docs/CHESS_RULES.md`
4. Debugging? โ `/docs/DEVELOPER_GUIDE.md`
5. Timeline? โ `/docs/HANDOFF_CHECKLIST.md`
6. Architecture? โ `/docs/diagrams/ARCHITECTURE.md`
## ๐ Definition of Done
Ein Feature ist "Done" wenn:
- โ
Code geschrieben
- โ
Tests geschrieben (90%+ coverage)
- โ
Tests bestehen (grรผn)
- โ
Code reviewed
- โ
Dokumentiert (JSDoc)
- โ
Performance OK (<100ms fรผr moves)
- โ
Accessibility geprรผft
- โ
Cross-browser getestet
## ๐ฏ Final Deliverables
Am Ende der Implementierung:
1. โ
Funktionierendes Schachspiel (alle Features)
2. โ
Comprehensive Test Suite (90%+ coverage)
3. โ
Production Build (<150KB gzipped)
4. โ
Deployment (Live URL)
5. โ
README mit Setup/Usage
6. โ
Performance Report (Lighthouse >90)
7. โ
Browser Compatibility Matrix
8. โ
Source Code (GitHub)
## ๐ Timeline & Milestones
- **Week 1:** MVP Core (playable 2-player chess)
- **Week 2:** MVP Complete + Tests
- **Week 3:** UX Enhancement (animations, history, save/load)
- **Week 4:** Polish + Deployment
- **Week 5 (Optional):** AI Opponent
**Total:** 4-5 weeks
---
## ๐ Ready? Start hier:
1. Clone/Setup Project
2. Read `/docs/HANDOFF_CHECKLIST.md`
3. Follow `/docs/IMPLEMENTATION_GUIDE.md` step-by-step
4. Reference `/docs/API_REFERENCE.md` for specs
5. Build, test, deploy!
**Die Planung ist komplett. Alle Antworten sind in `/docs`. Viel Erfolg!** โ๏ธ
---
**Version:** 1.0
**Created:** 2025-01-22
**Planning Swarm:** Hive Mind Collective Intelligence (8 agents)
**Implementation Swarm:** TBD (You!)