🎮 Puissance 4 - Jeu en React TypeScript

Un jeu de Puissance 4 moderne avec IA intelligente et mode multijoueur en réseau, développé avec React, TypeScript et Tailwind CSS.

✨ Fonctionnalités

• 🎯 Trois modes de jeu :

  • vs IA (avec algorithme minimax optimisé)
  • vs Joueur local
  • Mode réseau multijoueur (Socket.io)

• 🤖 IA performante :

  • Algorithme Minimax avec élagage alpha-bêta
  • Heuristique avancée pour l'évaluation des positions
  • Profondeur de recherche configurable

• 🎨 Interface moderne :

  • Design responsive avec Tailwind CSS
  • Animations fluides et effets visuels
  • Interface hyperludique et intuitive

• 🌐 Mode réseau :

  • Matchmaking automatique
  • Synchronisation temps réel
  • Gestion des déconnexions

🚀 Installation et Lancement

Prérequis

• Node.js (version 16 ou supérieure)
• npm ou yarn

Installation des dépendances

npm install

Lancement du jeu

# Terminal 1 - Application React
npm start

# Terminal 2 - Serveur Socket.io (pour le mode réseau)
npm run server

L'application sera accessible sur http://localhost:3000 Le serveur réseau sera disponible sur http://localhost:3001

🎮 Comment jouer

1. Sélectionnez un mode de jeu :

   • vs IA : Jouez contre l'intelligence artificielle
   • vs Joueur : Mode local pour deux joueurs
   • Réseau : Trouvez un adversaire en ligne

2. Règles du jeu :

   • Cliquez sur une colonne pour y placer votre pion
   • Le premier à aligner 4 pions (horizontal, vertical ou diagonal) gagne
   • Les pions tombent toujours au plus bas niveau disponible

3. Contrôles :

   • Nouvelle Partie : Recommencer une partie
   • Reset : Retour au menu principal

🧠 Intelligence Artificielle

L'IA utilise un algorithme Minimax avec élagage alpha-bêta pour optimiser les performances. Elle évalue les positions selon plusieurs critères :

• Alignements : Bonus pour les alignements de 2, 3 et 4 pions
• Position centrale : Privilégie les colonnes centrales
• Hauteur : Préfère les positions basses
• Blocage : Empêche l'adversaire de gagner

🛠️ Architecture Technique

Structure du projet

src/
├── components/          # Composants React
│   ├── Game.tsx        # Composant principal
│   ├── GameBoard.tsx   # Plateau de jeu
│   ├── GamePiece.tsx  # Pièces individuelles
│   ├── GameControls.tsx # Contrôles du jeu
│   └── GameStatus.tsx  # Statut de la partie
├── hooks/              # Hooks personnalisés
│   └── useNetworkGame.ts # Gestion du mode réseau
├── types/              # Types TypeScript
│   └── Game.ts        # Types du jeu
├── utils/              # Logique métier
│   ├── GameLogic.ts   # Logique du jeu
│   └── AI.ts          # Intelligence artificielle
└── server/             # Serveur Socket.io
    └── index.js       # Serveur réseau

Technologies utilisées

• React 18 avec TypeScript
• Tailwind CSS pour le styling
• Socket.io pour le mode réseau
• Algorithme Minimax pour l'IA

🎯 Fonctionnalités avancées

Animations

• Animation de chute des pions
• Effets de pulsation pour le dernier coup
• Transitions fluides entre les états

Responsive Design

• Interface adaptative pour mobile et desktop
• Grille responsive qui s'adapte à la taille d'écran

Mode Réseau

• Matchmaking automatique
• Synchronisation temps réel des coups
• Gestion des déconnexions et reconnexions

🔧 Configuration

Personnalisation de l'IA

Vous pouvez modifier les paramètres de l'IA dans src/utils/AI.ts :

• DEPTH : Profondeur de recherche (défaut: 4)
• WIN_SCORE : Score pour la victoire (défaut: 1000)
• LOSE_SCORE : Score pour la défaite (défaut: -1000)

Personnalisation du style

Le design peut être modifié via les classes Tailwind dans les composants ou en ajustant tailwind.config.js.

🚀 Déploiement

Build de production

npm run build

Déploiement du serveur

Le serveur Socket.io peut être déployé sur des plateformes comme Heroku, Vercel ou DigitalOcean.

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à :

• Signaler des bugs
• Proposer de nouvelles fonctionnalités
• Améliorer l'IA
• Optimiser les performances

📝 Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

---

Amusez-vous bien ! 🎉