Ajout 2 ligne émoji + pagination

public/css/home.css

@@ -278,4 +278,37 @@ color: #555;
 .vs-text {
     font-size: 1.5rem;
     font-weight: bold;
+}
+
+/* Pagination */
+
+.pagination-bar {
+    margin: 4rem 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    color: #f8f5e0;
+    font-family: 'Georgia', serif;
+}
+
+.pagination-bar button {
+    background: none;
+    border: none;
+    font-size: 1.1rem;
+    color: #f8f5e0; 
+    cursor: pointer;
+    padding: 5px 10px;
+    border-radius: 50%;
+    transition: background 0.2s ease;
+}
+
+.pagination-bar button.active {
+    background: #333;
+    color: white;
+    font-weight: bold;
+}
+
+.pagination-bar button:hover:not(.active) {
+    color: #f8b435;
 }

public/js/home.js

@@ -111,6 +111,7 @@ document.addEventListener('DOMContentLoaded', () => {
             });
 
             visibleCards.forEach(card => container.appendChild(card));
+            paginateCards();
         }
     }
 
@@ -147,4 +148,66 @@ document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('search-input').addEventListener('input', applyFilters);
     document.getElementById('rarete-filter').addEventListener('change', applyFilters);
     document.getElementById('sort-select').addEventListener('change', applyFilters);
+
+    /***** Partie Pagination ******/
+
+    const ITEMS_PER_PAGE = 10;
+    let currentPage = 1;
+
+    function paginateCards() {
+        const allCards = Array.from(document.querySelectorAll('#collection-container .emoji-card'));
+        const container = document.getElementById('collection-container');
+        const totalPages = Math.ceil(allCards.length / ITEMS_PER_PAGE);
+
+        // Masquer toutes les cartes
+        allCards.forEach(card => card.style.display = 'none');
+
+        // Afficher uniquement les cartes de la page courante
+        const start = (currentPage - 1) * ITEMS_PER_PAGE;
+        const end = start + ITEMS_PER_PAGE;
+
+        allCards.slice(start, end).forEach(card => card.style.display = 'block');
+
+        renderPagination(totalPages);
+    }
+
+    function renderPagination(totalPages) {
+        const pagination = document.getElementById('pagination');
+        pagination.innerHTML = '';
+
+        const addBtn = (text, page = null, isActive = false, disabled = false) => {
+            const btn = document.createElement('button');
+            btn.textContent = text;
+            if (isActive) btn.classList.add('active');
+            if (disabled) btn.disabled = true;
+            if (page !== null) {
+                btn.addEventListener('click', () => {
+                    currentPage = page;
+                    paginateCards();
+                });
+            }
+            pagination.appendChild(btn);
+        };
+
+        addBtn('Précédent', currentPage - 1, false, currentPage === 1);
+
+        for (let i = 1; i <= totalPages; i++) {
+            if (
+                i === 1 ||
+                i === totalPages ||
+                (i >= currentPage - 1 && i <= currentPage + 1)
+            ) {
+                addBtn(i, i, i === currentPage);
+            } else if (
+                i === 2 && currentPage > 3 ||
+                i === totalPages - 1 && currentPage < totalPages - 2
+            ) {
+                addBtn('...');
+            }
+        }
+
+        addBtn('Suivant', currentPage + 1, false, currentPage === totalPages);
+    }
+
+    paginateCards();
 });

src/Controller/HomeController.php

@@ -146,7 +146,40 @@ class HomeController extends AbstractController
                 'vitesse' => 4.5,
                 'nbCombatGagne' => 1,
                 'rarete' => 1, // commun
-            ]
+            ],
+            [
+                'id' => 13,
+                'nom' => 'George',
+                'code' => '😜',
+                'force' => 11.0,
+                'robustesse' => 10.0,
+                'intelligence' => 12.0,
+                'vitesse' => 13.5,
+                'nbCombatGagne' => 2,
+                'rarete' => 2, // épique
+            ],
+            [
+                'id' => 14,
+                'nom' => 'Hannah',
+                'code' => '😏',
+                'force' => 3.0,
+                'robustesse' => 2.5,
+                'intelligence' => 4.0,
+                'vitesse' => 3.5,
+                'nbCombatGagne' => 0,
+                'rarete' => 1, // commun
+            ],
+            [
+                'id' => 15,
+                'nom' => 'Ian',
+                'code' => '😬',
+                'force' => 17.0,
+                'robustesse' => 14.0,
+                'intelligence' => 16.0,
+                'vitesse' => 18.0,
+                'nbCombatGagne' => 7,
+                'rarete' => 4, // légendaire
+            ],
         ];
 
         foreach ($emojisDeBase as &$emoji) {

templates/home/index.html.twig

@@ -21,7 +21,7 @@
                 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>
@@ -90,6 +90,8 @@
         {% endfor %}
     </div>
 
+    <div id="pagination" class="pagination-bar"></div>
+
     <div id="selection-status">Sélectionnez 2 créatures de votre choix pour commencer ...</div>
 
     <div id="selection-visual" class="selection-visual"></div>