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

5 days ago · c040ee4a6f
parent ecf9673e5d
commit c040ee4a6f
4 changed files with 227 additions and 37 deletions
--- a/public/css/home.css
+++ b/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%;
-    height: 100%;
+    width: 97%;
+    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;
 }
--- a/public/js/home.js
+++ b/public/js/home.js
@ -64,7 +64,9 @@ document.addEventListener('DOMContentLoaded', () => {
    // Ouvre / Ferme la popup d'information
    function togglePopup(id) {
        const popup = document.getElementById('popup-' + id);
-        popup.style.display = (popup.style.display === 'block') ? 'none' : 'block';
+        if (popup) {
+            popup.style.display = (popup.style.display === 'block') ? 'none' : 'block';
+        }
    }

    // Fermer les autres popups en cliquant ailleurs
@ -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;
-            togglePopup(id);
-            e.stopPropagation(); // empêche le clic d’aller à la carte
+            const card = icon.closest('.emoji-card');
+            const id = card?.dataset.id;
+            if (id) {
+                togglePopup(id);
+            }
+            e.stopPropagation(); // évite que ça sélectionne la carte
        });
    });

-    // Appel Fonctionnalité de sélection des cartes
-    document.querySelectorAll('.emoji-card').forEach(card => {
-        card.addEventListener('click', () => toggleSelection(card));
+    // Appliquer l'écouteur à toutes les cartes (base + collection)
+    document.querySelectorAll('.emoji-container').forEach(container => {
+        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 
--- a/src/Controller/HomeController.php
+++ b/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 ($emojis as &$emoji) {
+        foreach ($emojisDeBase 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
-                2 => 'purple',    // épique
-                3 => 'red',       // mythique
-                4 => 'gold',      // légendaire
-                default => 'gray'
+                1 => 'green',
+                2 => 'purple',
+                3 => 'red',
+                4 => 'gold',
+                default => 'gray',
            };
        }

+
        return $this->render('home/index.html.twig', [
-            'emojis' => $emojis,
+            'emojisDeBase' => $emojisDeBase,
+            'emojisCrees' => $emojisCrees,
        ]);
    }
 }
--- a/templates/home/index.html.twig
+++ b/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">
-        {% for emoji in emojis %}
-            <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-container" id="collection-container">
+        {% for emoji in emojisCrees %}
+            <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">ℹ️</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" ">💞 Reproduire</button>
+        <button class="btn">⚔️ Combattre</button>
+        <button class="btn">💞 Reproduire</button>
    </div>
 {% endblock %}