# Puissance 4 (Connect Four) — Guide du Joueur

Un jeu de Puissance 4 complet développé avec HTML5, CSS3 et JavaScript vanilla (architecture MVC).

## 🎮 Démarrage Rapide

1. Ouvrez `index.html` dans n'importe quel navigateur moderne
2. Choisissez votre mode de jeu : **2 Joueurs** ou **Contre l'Ordinateur**
3. Cliquez sur une colonne pour déposer votre jeton
4. Le premier à aligner 4 jetons gagne !

Aucune installation requise — le jeu fonctionne entièrement dans le navigateur.

## 🕹️ Modes de Jeu

### 👥 Mode Deux Joueurs
Deux joueurs humains s'affrontent à tour de rôle. Le Joueur 1 utilise les jetons **jaunes**, le Joueur 2 les jetons **rouges**. Idéal pour jouer avec un ami sur le même écran.

### 🤖 Mode Contre l'Ordinateur
Vous (jaune) affrontez l'IA (rouge). L'ordinateur utilise un moteur stratégique avancé basé sur :
- **Algorithme Minimax** avec élagage alpha-beta (profondeur 6)
- **Contrôle de la colonne centrale** — elle offre le plus de possibilités d'alignements
- **Création de doubles menaces** — deux lignes de 3 jetons simultanées que l'adversaire ne peut pas bloquer
- **Blocage de l'adversaire** — anticipation et blocage des menaces adverses
- **Stratégie pair/impair** — contrôle du remplissage des lignes pour forcer des positions favorables

> **Note :** Le Puissance 4 a été mathématiquement résolu en 1988. Avec un jeu parfait, le premier joueur (colonne centrale) gagne à tous les coups. Cette IA approxime le jeu parfait à une profondeur de 6 — un défi solide pour la plupart des joueurs.

## 📐 Règles Officielles

| Règle | Détail |
|-------|--------|
| **Plateau** | Grille verticale de 7 colonnes × 6 rangées |
| **Joueurs** | 2 joueurs, 21 jetons chacun (42 emplacements au total) |
| **Tours** | Les joueurs glissent un jeton à tour de rôle |
| **Gravité** | Le jeton tombe à la position la plus basse disponible dans la colonne |
| **Victoire** | Le premier à aligner 4 jetons (horizontal, vertical ou diagonal) gagne immédiatement |
| **Match nul** | Si le plateau est plein sans vainqueur, la partie est nulle |
| **Premier coup** | Le Joueur 1 (Jaune) commence toujours |

## 🎨 Design

- **Interface Dark mode** — agréable pour les yeux
- **Grille bleue** avec jetons jaunes et rouges (couleurs classiques du Puissance 4)
- **Aperçu du jeton** — visualisez où votre jeton va atterrir avant de cliquer
- **Animation de chute** — les jetons tombent avec un rebond satisfaisant
- **Animation de victoire** — les jetons gagnants pulsent pour célébrer
- **Design responsive** — fonctionne sur desktop et tablette

## 🗣️ Langues

Le jeu supporte :
- 🇫🇷 **Français** (par défaut)
- 🇬🇧 **English**

Changez de langue via le sélecteur en haut à droite. La préférence est sauvegardée dans votre navigateur.

## 🧱 Architecture

Le code suit le patron **MVC (Modèle-Vue-Contrôleur)** pour une séparation claire des responsabilités :

```
js/
├── model.js       ← État du jeu, règles, détection de victoire (logique pure)
├── view.js        ← Rendu DOM, animations, interface utilisateur
├── controller.js  ← Flux de jeu, gestion des événements, orchestration IA
├── ai.js          ← Adversaire IA (minimax + heuristiques stratégiques)
├── i18n.js        ← Internationalisation (support multi-langues)
└── app.js         ← Point d'entrée, démarre la triade MVC
```

Tout le code est écrit en **anglais** avec des **commentaires JSDoc détaillés**.

## 🧪 Tests

Les tests unitaires sont dans `tests/game.test.js`. Lancez-les avec :

```bash
node tests/game.test.js
```

Les tests couvrent :
- Création et clonage du plateau
- Dépôt de pièces avec gravité
- Détection de colonne/plateau plein
- Détection de victoire (horizontal, vertical, les deux diagonales)
- Détection de match nul
- Coups immédiats de l'IA (gagner, bloquer)
- Préférence de l'IA pour la colonne centrale
- Simulation de dépôts

## 🔧 Notes Techniques

- **Zéro dépendance** — JavaScript vanilla pur, aucun framework
- **Modules ES** — syntaxe moderne import/export
- **Propriétés CSS personnalisées** — tokens de design pour un thème facile
- **Accessible** — labels ARIA, compatible clavier
- **Prêt à évoluer** — la structure MVC facilite l'ajout de fonctionnalités

## 📊 Structure du Projet

```
puissance4/
├── index.html          # Page principale du jeu
├── css/
│   └── style.css       # Styles dark mode + animations
├── js/
│   ├── app.js          # Point d'entrée
│   ├── model.js        # Logique du jeu (M)
│   ├── view.js         # Rendu UI (V)
│   ├── controller.js   # Orchestration (C)
│   ├── ai.js           # Adversaire IA
│   └── i18n.js         # Traductions
├── tests/
│   └── game.test.js    # Tests unitaires
├── README.md           # Ce fichier (version anglaise)
└── README_FR.md        # Version française
```

## 🏆 Conseils Stratégiques

1. **Contrôlez la colonne centrale** — elle participe au plus grand nombre de lignes gagnantes
2. **Créez des doubles menaces** — préparez deux lignes de 3 jetons simultanément
3. **Bloquez l'adversaire** — surveillez constamment ce que votre adversaire construit
4. **Utilisez la parité** — le joueur qui contrôle le bas d'une colonne contrôle quand elle est jouée