🎮 2048 Game - Livewire Component

Un composant Livewire pour intégrer le célèbre jeu 2048 dans ton application Laravel. Simple, élégant et prêt à l'emploi.

---

🌟 Fonctionnalités

Fonctionnalité	Description
Logique complète	Fusion des tuiles, mouvements dans 4 directions, détection de victoire/défaite.
Gestion des scores	Score actuel et meilleur score (stocké en session).
Design fidèle	Style inspiré du jeu original avec Tailwind CSS.
Responsive	Adapté aux mobiles et desktop.
Accessible	Utilisation d'attributs aria-* pour une meilleure accessibilité.
Recommencer	Bouton pour réinitialiser la partie à tout moment.

---

📦 Installation

1. Prérequis

• Laravel 12+
• Livewire 3+
• PHP 8.1+

2. Installer Livewire

composer require livewire/livewire

3. Créer le composant

php artisan make:livewire Game2048

4. Copier le code

• Placez le code du composant dans app/Livewire/Game2048.php.
• Placez la vue dans resources/views/livewire/game2048.blade.php.

5. Utiliser le composant

<livewire:game2048 />

---

🎮 Comment jouer ?

• Objectif : Atteindre la tuile 2048 en fusionnant des tuiles de même valeur.
• Contrôles : Utilise les flèches du clavier (↑, ↓, ←, →) pour déplacer les tuiles.
• Fusion : Deux tuiles de même valeur fusionnent en une seule tuile de valeur doublée.
• Victoire : on gagnes en atteignant 2048 ! On peux continuer à jouer pour essayer de battre son meilleur score.
• Défaite : Le jeu se termine quand il n'y a plus de mouvements possibles.

---

🎨 Aperçu

2048 Game Preview:

---

🛠 Personnalisation

1. Changer les couleurs des tuiles

Modifiez le tableau $tileColors dans la vue Blade pour adapter les couleurs à ton design.

2. Changer la taille de la grille

Pour modifier la taille de la grille (ex: 5x5), ajustez :

• La taille du tableau dans initializeGame.
• La logique des mouvements.
• Le CSS pour les tuiles.

3. Ajouter des animations

Utilisez Alpine.js ou des classes Tailwind comme transition-all pour des animations fluides.

---

📌 Structure du projet

app/
└── Livewire/
    └── Game2048.php          # Logique du jeu

resources/
└── views/
    └── livewire/
        └── game2048.blade.php # Vue du jeu

---

💡 Exemple d'utilisation

Intégration basique

<div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold mb-4">Jeu 2048</h1>
    <livewire:game2048 />
</div>

Intégration avec un titre personnalisé

<div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold mb-4 text-center">Mon Jeu 2048</h1>
    <div class="max-w-lg mx-auto">
        <livewire:game2048 />
    </div>
</div>

---

📝 Notes

• Session : Le meilleur score est stocké en session (high_score).
• Performances : Optimisé pour éviter les calculs inutiles.
• Compatibilité : Fonctionne avec Laravel 12+ et Livewire 3+.

---

🚀 Améliorations possibles

• Sauvegarde du jeu : Utiliser localStorage ou une base de données pour sauvegarder l'état du jeu.
• Mode sombre : Ajouter un thème sombre pour le jeu.
• Statistiques : Afficher des statistiques (nombre de parties, temps de jeu, etc.).
• Classement : Intégrer un système de classement entre les joueurs.
• Animations avancées : Ajouter des transitions CSS pour les mouvements et fusions.
• Meilleur responsive pour mobile