Amélioration colléction emoji + débug séléction pour combat repro

public/css/home.css

@@ -11,12 +11,45 @@ h1 {
     color: #f8b435;
 }
 
-.emoji-container {
+.section-divider {
+    border: none;
+    border-top: 3px solid #f8b435;
+    margin: 50px auto 20px;
+    width: 80%;
+}
+
+.section-break-icon {
+    text-align: center;
+    font-size: 2rem;
+    margin: -20px 0;
+    color: #f8b435;
+}
+
+.section-title {
+    margin: 40px 10px;
+    font-size: 1.8rem;
+    color: #f8f5e0;
+}
+
+.emoji-container:not(.base) {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 30px;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+.emoji-container.base {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 30px;
-    margin-bottom: 10rem;
+
+    border: 3px dashed #f8b435;
+    padding: 20px;
+    margin: 0 auto 30px auto;
+    border-radius: 15px;
+    width: fit-content;
 }
 
 .emoji-card {
@@ -43,7 +76,7 @@ h1 {
 /* Animation brillance pour rareté légendaire */
 @keyframes shine {
     0% { background-position: 0px; }
-    100% { background-position: 177px; }
+    100% { background-position: 168px; }
 }
 
 .emoji-card.gold {
@@ -54,17 +87,17 @@ h1 {
 .emoji-card.gold::before {
     content: '';
     position: absolute;
-    top: 0;
+    top: 1%;
     left: 1%;
-    width: 98%;
+    width: 97%;
-    height: 100%;
+    height: 99%;
     background: linear-gradient(
         120deg,
         rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.5) 50%,
+        rgba(255, 255, 255, 0.8) 50%,
         rgba(255, 255, 255, 0) 100%
     );
-    animation: shine 5s infinite;
+    animation: shine 3.5s infinite;
     pointer-events: none;
     z-index: -1;
 }
@@ -219,7 +252,7 @@ color: #555;
 
 #selection-status {
     font-size: 1.1rem;
-    margin-bottom: 20px;
+    margin-top: 4rem;
     font-weight: bold;
     color: #f9e8c0;
 }

public/js/home.js

@@ -64,8 +64,10 @@ document.addEventListener('DOMContentLoaded', () => {
     // Ouvre / Ferme la popup d'information
     function togglePopup(id) {
         const popup = document.getElementById('popup-' + id);
+        if (popup) {
             popup.style.display = (popup.style.display === 'block') ? 'none' : 'block';
         }
+    }
 
     // Fermer les autres popups en cliquant ailleurs
     document.addEventListener('click', function(e) {
@@ -82,7 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const sortBy = document.getElementById('sort-select').value;
         const searchTerm = document.getElementById('search-input').value.toLowerCase();
 
-        const cards = Array.from(document.querySelectorAll('.emoji-card'));
+        const cards = Array.from(document.querySelectorAll('#collection-container .emoji-card'));
 
         cards.forEach(card => {
             const color = card.dataset.color;
@@ -99,7 +101,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
 
         if (sortBy !== 'none') {
-            const container = document.querySelector('.emoji-container');
+            const container = document.getElementById('collection-container'); // ✅ corrigé
             const visibleCards = cards.filter(c => c.style.display !== 'none');
 
             visibleCards.sort((a, b) => {
@@ -115,15 +117,22 @@ document.addEventListener('DOMContentLoaded', () => {
     // Appel Fonctionnalité de popup d'information
     document.querySelectorAll('.detail-icon').forEach(icon => {
         icon.addEventListener('click', (e) => {
-            const id = icon.parentElement.dataset.id;
+            const card = icon.closest('.emoji-card');
+            const id = card?.dataset.id;
+            if (id) {
                 togglePopup(id);
-            e.stopPropagation(); // empêche le clic d’aller à la carte
+            }
+            e.stopPropagation(); // évite que ça sélectionne la carte
         });
     });
 
-    // Appel Fonctionnalité de sélection des cartes
+    // Appliquer l'écouteur à toutes les cartes (base + collection)
-    document.querySelectorAll('.emoji-card').forEach(card => {
+    document.querySelectorAll('.emoji-container').forEach(container => {
-        card.addEventListener('click', () => toggleSelection(card));
+        container.addEventListener('click', (e) => {
+            const card = e.target.closest('.emoji-card');
+            if (!card || e.target.closest('.detail-icon')) return; // Ignore si clic sur icône ℹ️
+            toggleSelection(card);
+        });
     });
 
     // Appel Fonctionnalité de combat et reproduction 

src/Controller/HomeController.php

@@ -11,7 +11,7 @@ class HomeController extends AbstractController
     #[Route('/', name: 'home')]
     public function index(): Response
     {
-        $emojis = [
+        $emojisDeBase = [
             [
                 'id' => 1,
                 'nom' => 'Bob',
@@ -44,23 +44,135 @@ class HomeController extends AbstractController
                 'vitesse' => 17.0,
                 'nbCombatGagne' => 10,
                 'rarete' => 4, // légendaire
+            ],
+            [
+                'id' => 4,
+                'nom' => 'Sophie',
+                'code' => '😎',
+                'force' => 8.0,
+                'robustesse' => 7.5,
+                'intelligence' => 9.0,
+                'vitesse' => 8.5,
+                'nbCombatGagne' => 2,
+                'rarete' => 3, // mythique
+            ]
+        ];
+
+        $emojisCrees = [
+            [
+                'id' => 6,
+                'nom' => 'Benoit',
+                'code' => '🤖',
+                'force' => 15.0,
+                'robustesse' => 12.0,
+                'intelligence' => 14.0,
+                'vitesse' => 13.0,
+                'nbCombatGagne' => 5,
+                'rarete' => 2, // épique
+            ],
+            [
+                'id' => 7,
+                'nom' => 'Eric',
+                'code' => '🌟',
+                'force' => 18.0,
+                'robustesse' => 16.0,
+                'intelligence' => 17.0,
+                'vitesse' => 19.0,
+                'nbCombatGagne' => 8,
+                'rarete' => 4, // légendaire
+            ],
+            [
+                'id' => 5,
+                'nom' => 'Alice',
+                'code' => '🥳',
+                'force' => 6.0,
+                'robustesse' => 5.0,
+                'intelligence' => 4.5,
+                'vitesse' => 6.5,
+                'nbCombatGagne' => 0,
+                'rarete' => 1, // commun
+            ],
+            [
+                'id' => 8,
+                'nom' => 'Bobette',
+                'code' => '🤩',
+                'force' => 10.0,
+                'robustesse' => 9.0,
+                'intelligence' => 11.0,
+                'vitesse' => 12.0,
+                'nbCombatGagne' => 4,
+                'rarete' => 3, // mythique
+            ],
+            [
+                'id' => 9,
+                'nom' => 'Charlie',
+                'code' => '😇',
+                'force' => 7.0,
+                'robustesse' => 6.0,
+                'intelligence' => 8.0,
+                'vitesse' => 7.5,
+                'nbCombatGagne' => 2,
+                'rarete' => 1, // commun
+            ],
+            [
+                'id' => 10,
+                'nom' => 'Diana',
+                'code' => '😈',
+                'force' => 14.0,
+                'robustesse' => 13.0,
+                'intelligence' => 15.0,
+                'vitesse' => 16.0,
+                'nbCombatGagne' => 6,
+                'rarete' => 3, // mythique
+            ],
+            [
+                'id' => 11,
+                'nom' => 'Ethan',
+                'code' => '🤯',
+                'force' => 9.0,
+                'robustesse' => 8.0,
+                'intelligence' => 10.0,
+                'vitesse' => 11.0,
+                'nbCombatGagne' => 3,
+                'rarete' => 2, // épique
+            ],
+            [
+                'id' => 12,
+                'nom' => 'Fiona',
+                'code' => '🥺',
+                'force' => 4.0,
+                'robustesse' => 3.5,
+                'intelligence' => 5.0,
+                'vitesse' => 4.5,
+                'nbCombatGagne' => 1,
+                'rarete' => 1, // commun
             ]
         ];
 
-        // Ajout de la couleur selon la rareté
+        foreach ($emojisDeBase as &$emoji) {
-        foreach ($emojis as &$emoji) {
+            $emoji['color'] = match ($emoji['rarete']) {
+                1 => 'green',
+                2 => 'purple',
+                3 => 'red',
+                4 => 'gold',
+                default => 'gray',
+            };
+        }
 
+        foreach ($emojisCrees as &$emoji) {
             $emoji['color'] = match ($emoji['rarete']) {
-                1 => 'green',     // commun
+                1 => 'green',
-                2 => 'purple',    // épique
+                2 => 'purple',
-                3 => 'red',       // mythique
+                3 => 'red',
-                4 => 'gold',      // légendaire
+                4 => 'gold',
-                default => 'gray'
+                default => 'gray',
             };
         }
 
+
         return $this->render('home/index.html.twig', [
-            'emojis' => $emojis,
+            'emojisDeBase' => $emojisDeBase,
+            'emojisCrees' => $emojisCrees,
         ]);
     }
 }

templates/home/index.html.twig

@@ -10,6 +10,38 @@
 
     <h1>🧬 Ma collection de créatures 🐾</h1>
 
+    <h2 class="section-title">🌱 Vos créatures de base</h2>
+
+    <div class="emoji-container base">
+        {% for emoji in emojisDeBase %}
+            <div class="emoji-card {{ emoji.color }}"
+                data-id="{{ emoji.id }}"
+                data-name="{{ emoji.nom }}"
+                data-color="{{ emoji.color }}"
+                data-level="{{ emoji.nbCombatGagne }}"
+                data-force="{{ emoji.force }}"
+                data-vitesse="{{ emoji.vitesse }}">
+                
+                <div class="emoji-level">Level {{ emoji.nbCombatGagne }}</div>
+                <div class="emoji">{{ emoji.code }}</div>
+                <div class="emoji-name {{ emoji.color }}">{{ emoji.nom }}</div>
+                <div class="detail-icon" data-id="{{ emoji.id }}">ℹ️</div>
+
+                <div class="popup" id="popup-{{ emoji.id }}">
+                    <strong>Stats :</strong><br>
+                    Force: {{ emoji.force }}<br>
+                    Robustesse: {{ emoji.robustesse }}<br>
+                    Intelligence: {{ emoji.intelligence }}<br>
+                    Vitesse: {{ emoji.vitesse }}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+
+    <div class="section-break-icon">🔻</div>
+
+    <h2 class="section-title">📦 Votre collection personnelle</h2>
+
     <div class="filter-bar">
         <label for="search-input">🔍 Rechercher un nom :</label>
         <input type="text" id="search-input" placeholder="ex: Bob..." />
@@ -32,18 +64,20 @@
         </select>
     </div>
 
-    <div id="selection-status">Sélectionnez 2 créatures...</div>
+    <div class="emoji-container" id="collection-container">
-
+        {% for emoji in emojisCrees %}
-    <div class="emoji-container">
+            <div class="emoji-card {{ emoji.color }}"
-        {% for emoji in emojis %}
+                data-id="{{ emoji.id }}"
-            <div class="emoji-card {{ emoji.color }}" data-id="{{ emoji.id }}" data-name="{{ emoji.nom }}" 
+                data-name="{{ emoji.nom }}"
-                                    data-color="{{ emoji.color }}" data-level="{{ emoji.nbCombatGagne }}"
+                data-color="{{ emoji.color }}"
-                                    data-force="{{ emoji.force }}" data-vitesse="{{ emoji.vitesse }}">
+                data-level="{{ emoji.nbCombatGagne }}"
+                data-force="{{ emoji.force }}"
+                data-vitesse="{{ emoji.vitesse }}">
 
                 <div class="emoji-level">Level {{ emoji.nbCombatGagne }}</div>
                 <div class="emoji">{{ emoji.code }}</div>
                 <div class="emoji-name {{ emoji.color }}">{{ emoji.nom }}</div>
-                <div class="detail-icon">ℹ️</div>
+                <div class="detail-icon" data-id="{{ emoji.id }}">ℹ️</div>
 
                 <div class="popup" id="popup-{{ emoji.id }}">
                     <strong>Stats :</strong><br>
@@ -56,11 +90,13 @@
         {% endfor %}
     </div>
 
+    <div id="selection-status">Sélectionnez 2 créatures de votre choix pour commencer ...</div>
+
     <div id="selection-visual" class="selection-visual"></div>
 
     <div class="action-buttons">
-        <button class="btn" ">⚔️ Combattre</button>
+        <button class="btn">⚔️ Combattre</button>
-        <button class="btn" ">💞 Reproduire</button>
+        <button class="btn">💞 Reproduire</button>
     </div>
 {% endblock %}