# Architecture Cours d'Anglais Modulaire
*Système de leçons interactives HTML pour enfants de 8-9 ans*

## 🎯 Objectif
Créer une plateforme modulaire permettant de générer facilement des cours d'anglais interactifs avec différents types de jeux et contenus pédagogiques.

## 🏗️ Architecture en 3 Niveaux

### Niveau 1 : Page d'Accueil (`index.html`)
- **Titre** : "Cours d'Anglais Interactif"
- **Options** :
  - 🎮 "Créer une leçon personnalisée" → Niveau 2
  - 📊 "Statistiques" (futur)
  - ⚙️ "Paramètres" (futur)

### Niveau 2 : Sélection Type de Jeu (`game-selector.html`)
Interface avec cards cliquables pour chaque type de jeu :
- 🔨 **Whack-a-Mole** (Tape-taupe vocabulaire)
- 🧠 **Memory Game** (Jeu de mémoire)
- ❓ **Quiz Game** (Questions/Réponses)
- 🎯 **Target Game** (Viser les bonnes réponses)
- 📝 **Temp Games** (Module temporaire pour nouveaux jeux)

### Niveau 3 : Sélection Contenu/Niveau (`level-selector.html`)
Interface dynamique qui s'adapte au jeu choisi :
- 📚 **SBS Level 8** (votre contenu actuel)
- 🐱 **Animals Vocabulary**
- 🌈 **Colors & Numbers**
- 👨‍👩‍👧‍👦 **Family Members**
- 🍎 **Food & Drinks**
- 🏠 **House & Furniture**

### Niveau 4 : Jeu (`game.html`)
Page générique qui charge dynamiquement :
- Le moteur de jeu sélectionné
- Le contenu pédagogique choisi
- Interface de retour/navigation

## 📁 Structure des Fichiers

```
cours-anglais/
├── index.html                    # Accueil
├── game-selector.html            # Sélection type de jeu
├── level-selector.html           # Sélection niveau/contenu
├── game.html                     # Page de jeu générique
│
├── css/
│   ├── main.css                  # Styles généraux
│   ├── navigation.css            # Styles navigation
│   └── games.css                 # Styles jeux
│
├── js/
│   ├── core/
│   │   ├── navigation.js         # Gestion navigation 3 niveaux
│   │   ├── game-loader.js        # Chargement dynamique des jeux
│   │   └── utils.js              # Fonctions utilitaires
│   │
│   ├── games/
│   │   ├── whack-a-mole.js       # Module Whack-a-Mole
│   │   ├── memory-game.js        # Module Memory Game
│   │   ├── quiz-game.js          # Module Quiz
│   │   ├── target-game.js        # Module Target Game
│   │   └── temp-games.js         # Module temporaire
│   │
│   └── content/
│       ├── sbs-level-8.js        # Contenu SBS Level 8
│       ├── animals.js            # Vocabulaire animaux
│       ├── colors.js             # Couleurs et nombres
│       ├── family.js             # Famille
│       ├── food.js               # Nourriture
│       └── house.js              # Maison
│
├── assets/
│   ├── images/
│   ├── sounds/
│   └── icons/
│
└── config/
    └── games-config.json         # Configuration des jeux disponibles
```

## 🔧 Système de Modules

### Format des Modules de Jeu
```javascript
// Exemple: whack-a-mole.js
class WhackAMoleGame {
    constructor(content, container) {
        this.content = content;
        this.container = container;
        this.score = 0;
        this.init();
    }
    
    init() { /* Initialisation */ }
    start() { /* Démarrage */ }
    stop() { /* Arrêt */ }
    destroy() { /* Nettoyage */ }
}

// Export pour utilisation
window.GameModules = window.GameModules || {};
window.GameModules.WhackAMole = WhackAMoleGame;
```

### Format des Modules de Contenu
```javascript
// Exemple: sbs-level-8.js
window.ContentModules = window.ContentModules || {};
window.ContentModules.SBSLevel8 = {
    name: "SBS Level 8",
    description: "Vocabulaire du manuel SBS Level 8",
    vocabulary: [
        { english: "cat", french: "chat", image: "cat.jpg" },
        { english: "dog", french: "chien", image: "dog.jpg" },
        // ...
    ],
    grammar: [
        // Règles de grammaire si nécessaire
    ],
    difficulty: "intermediate"
};
```

## 🎮 Spécifications des Jeux

### Whack-a-Mole (Priorité 1)
- **Principe** : Taupes apparaissent avec mots anglais, élève doit taper les bonnes réponses
- **Variantes** : 
  - Mot anglais affiché, taper la traduction française
  - Image affichée, taper le mot anglais
  - Son joué, taper le mot correspondant
- **Paramètres** : Vitesse, nombre de taupes, durée

### Memory Game (Priorité 2)
- **Principe** : Retourner des cartes pour faire des paires mot/traduction ou mot/image
- **Variantes** : Tailles de grille (4x4, 6x6, 8x8)

### Quiz Game (Priorité 3)
- **Principe** : Questions à choix multiples ou réponses libres
- **Types** : QCM, Vrai/Faux, Compléter la phrase

### Target Game (Futur)
- **Principe** : Viser avec la souris les bonnes réponses qui bougent
- **Variantes** : Ballons, bulles, cibles

## 🛠️ Fonctionnalités Transversales

### Navigation
- Boutons "Retour" sur chaque niveau
- Breadcrumb navigation
- URLs avec paramètres pour partage/bookmark
- Raccourcis clavier (ESC = retour)

### Système de Scoring
- Points par bonne réponse
- Malus par erreur
- Bonus vitesse
- Historique des scores
- Badges/achievements

### Accessibilité
- Support clavier complet
- Textes alternatifs pour images
- Contrastes élevés
- Tailles de police ajustables

### Responsive Design
- Adaptation tablette/mobile
- Interface tactile
- Orientation portrait/paysage

## 📊 Configuration et Personnalisation

### Fichier de Configuration Globale
```json
{
    "games": {
        "whack-a-mole": {
            "enabled": true,
            "name": "Whack-a-Mole",
            "icon": "🔨",
            "description": "Tape sur les bonnes réponses !"
        },
        "memory-game": {
            "enabled": true,
            "name": "Memory Game",
            "icon": "🧠",
            "description": "Trouve les paires !"
        }
    },
    "content": {
        "sbs-level-8": {
            "enabled": true,
            "name": "SBS Level 8",
            "icon": "📚",
            "description": "Vocabulaire manuel SBS"
        }
    },
    "settings": {
        "defaultDifficulty": "easy",
        "soundEnabled": true,
        "animationsEnabled": true
    }
}
```

## 🚀 Plan de Développement

### Phase 1 (Urgent - Demain)
- [x] Architecture de base
- [ ] Navigation 3 niveaux
- [ ] Module Whack-a-Mole
- [ ] Contenu SBS Level 8
- [ ] Module temporaire avec 2-3 mini-jeux

### Phase 2 (Semaine suivante)
- [ ] Module Memory Game
- [ ] Contenu Animals
- [ ] Système de scoring
- [ ] Améliorations UI/UX

### Phase 3 (Semaines suivantes)
- [ ] Module Quiz Game
- [ ] Contenus Colors, Family, Food
- [ ] Système de statistiques
- [ ] Export/Import de contenus

### Phase 4 (Long terme)
- [ ] Module Target Game
- [ ] Éditeur de contenu intégré
- [ ] Système multi-utilisateurs
- [ ] Progression pédagogique

## 💡 Notes d'Implémentation

### URL Routing
- `index.html` → Accueil
- `index.html?page=games` → Sélection jeux
- `index.html?page=levels&game=whack-a-mole` → Sélection niveau
- `index.html?page=play&game=whack-a-mole&content=sbs-level-8` → Jeu

### Stockage Local
- Scores et progression : `localStorage`
- Préférences utilisateur : `localStorage`
- Cache des contenus : `sessionStorage`

### Performance
- Lazy loading des modules
- Préchargement des assets critiques
- Compression des images
- Minification JS/CSS en production

## 🎨 Direction Artistique

### Palette de Couleurs
- **Primaire** : Bleu (#3B82F6) - Confiance, apprentissage
- **Secondaire** : Vert (#10B981) - Succès, validation
- **Accent** : Orange (#F59E0B) - Énergie, attention
- **Erreur** : Rouge (#EF4444) - Erreurs claires
- **Neutre** : Gris (#6B7280) - Textes, backgrounds

### Style Visuel
- Design moderne et épuré
- Animations fluides et non-agressives
- Icons emoji + Font Awesome
- Typography lisible (16px minimum)
- Boutons larges et tactiles (44px minimum)