# TODO List - Développement Technique

## 🚨 URGENT - DEMAIN

### Core Navigation System
- [ ] Create index.html with 3-level navigation
- [ ] Implement URL routing with params (?page=games&game=whack&content=sbs8)
- [ ] Build game-selector.html with clickable cards
- [ ] Build level-selector.html with dynamic content loading
- [ ] Create game.html generic page with dynamic module loading

### Game Modules
- [ ] Refactor existing whack-a-mole.js into proper module format
- [ ] Refactor existing fill-the-blank.js into proper module format
- [ ] Implement game loader system (js/core/game-loader.js)
- [ ] Create base GameEngine class for inheritance

### Content System
- [ ] Convert sbs-level-8.js to new unified format
- [ ] Implement content loader system
- [ ] Create content validation functions
- [ ] Add error handling for missing content

### New Games (Pick 3-4)
- [ ] simon-says.js - digital "Touch the X" game
- [ ] speed-categories.js - rapid category clicking
- [ ] true-false.js - rapid true/false with images
- [ ] memory-pairs.js - classic memory game
- [ ] sound-match.js - audio to image matching
- [ ] catch-words.js - flying words to catch

---

## 📚 CONTENT EXPANSION

### Lesson Introduction Module
- [ ] Create lesson-intro.js for vocabulary presentation
- [ ] Add context presentation before games
- [ ] Implement guided repetition system
- [ ] Add audio playback for pronunciation

### Additional Content Modules
- [ ] animals.js vocabulary set
- [ ] colors.js vocabulary set  
- [ ] family-extended.js more family vocabulary
- [ ] actions.js verbs and actions

---

## 🔧 TECHNICAL IMPROVEMENTS

### Core System
- [ ] navigation.js - handle URL routing and back buttons
- [ ] utils.js - shared utility functions
- [ ] audio-manager.js - handle sound loading/playing
- [ ] progress-tracker.js - basic score tracking

### Game Engine Enhancements
- [ ] Standardize game initialization pattern
- [ ] Add game state management (start/pause/stop/reset)
- [ ] Implement scoring system interface
- [ ] Add game configuration loading

### Performance & UX
- [ ] Lazy loading for game modules
- [ ] Preload critical assets
- [ ] Add loading states and spinners
- [ ] Implement keyboard shortcuts (ESC = back)

---

## 🎯 MODULAR ARCHITECTURE

### File Structure Implementation
```
├── index.html
├── css/
│   ├── main.css
│   ├── games.css
│   └── navigation.css
├── js/
│   ├── core/
│   │   ├── navigation.js
│   │   ├── game-loader.js
│   │   ├── content-loader.js
│   │   └── utils.js
│   ├── games/
│   │   ├── base-game.js
│   │   ├── whack-a-mole.js
│   │   ├── fill-blank.js
│   │   ├── simon-says.js
│   │   ├── speed-categories.js
│   │   └── temp-games.js
│   └── content/
│       ├── sbs-level-8.js
│       ├── animals.js
│       └── colors.js
```

### Module Standards
- [ ] Define base game class interface
- [ ] Standardize content module format
- [ ] Create module registration system
- [ ] Implement dependency loading

---

## 🌟 FUTURE TECHNICAL FEATURES

### Advanced Game Types
- [ ] drag-drop.js - sentence building
- [ ] story-builder.js - narrative construction
- [ ] voice-game.js - speech recognition
- [ ] drawing-game.js - character tracing

### Content Management
- [ ] JSON-based content configuration
- [ ] Content validation schemas
- [ ] Dynamic content generation helpers
- [ ] Content import/export utilities

### System Extensions
- [ ] Plugin architecture for third-party games
- [ ] API for external content sources
- [ ] Offline caching system
- [ ] Multi-language UI support

---

## 🚀 CHINESE VERSION PREP

### Architecture Adaptation
- [ ] Extend content format for Chinese specifics
- [ ] Add tone support in audio system
- [ ] Implement character stroke order
- [ ] Add pinyin display system

### Chinese-Specific Games
- [ ] stroke-order.js - character writing
- [ ] tone-practice.js - tone recognition
- [ ] radical-builder.js - character composition
- [ ] pinyin-typing.js - romanization practice

---

## 🤖 AI INTEGRATION PREP

### API Integration Points
- [ ] content-generator.js - AI content creation
- [ ] response-validator.js - AI answer checking
- [ ] difficulty-adapter.js - AI difficulty adjustment
- [ ] feedback-generator.js - AI personalized feedback

### Data Collection
- [ ] User interaction logging
- [ ] Performance metrics collection
- [ ] Error pattern tracking
- [ ] Learning progress data structure