Hierachie familliale emoji

public/css/home.css

@@ -4,6 +4,13 @@ body {
     text-align: center;
 }
 
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow-x: hidden;
+}
+
 h1 {
     font-size: 3rem;
     margin-bottom: 30px;
@@ -189,10 +196,16 @@ h1 {
     background-color: #e5d6b8;
 }
 
-.detail-icon {
+
+.btn-logout {
+    width: 238px;
+    height: 50px;
+}
+
+.detail-icon-hierarchy {
 position: absolute;
 top: 8px;
-right: 10px;
+left: 10px;
 cursor: pointer;
 font-size: 18px;
 color: #555;
@@ -215,6 +228,112 @@ color: #555;
     font-size: 14px;
 }
 
+/* Partie Hierachie*/
+.hierarchy-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: none; /* sera activé par JS */
+    z-index: 1000;
+}
+
+.hierarchy-overlay {
+    position: fixed; /* ← Important ! */
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,0.6);
+    z-index: 1001;
+}
+
+.hierarchy-content {
+    position: fixed; /* ← Pour rester centré par rapport au viewport */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    padding: 20px;
+    border-radius: 12px;
+    z-index: 1002;
+    box-shadow: 0 0 20px rgba(0,0,0,0.5);
+    max-width: 90%;
+    width: 500px;
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    font-size: 30px;
+    cursor: pointer;
+}
+
+.hierarchy-graph {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+        "parent1 arrows parent2"
+        ".       child   .";
+    gap: 10px 30px;
+    align-items: center;
+    justify-items: center;
+    margin-top: 30px;
+} 
+
+.child-block {
+    grid-area: child;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.parent-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.parent-block .emoji {
+    font-size: 40px;
+    margin-bottom: 5px;
+}
+
+.parent-block .name {
+    font-size: 14px;
+    color: #444;
+    font-style: italic;
+}
+
+.arrows {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.arrow {
+    font-size: 24px;
+    margin: 10px 0;
+}
+
+.child {
+    grid-area: child;
+    font-size: 50px;
+    padding: 10px;
+}
+
+.connector {
+    grid-column: 2;
+    font-size: 30px;
+    color: #444;
+}
+
 /* Filtre et Tri*/
 .filter-bar {
     margin-bottom: 30px;

public/js/home.js

@@ -110,6 +110,63 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    // Ouvre / Ferme la popup de hierachie de famille
+    async function toggleHierachiPopup(id) {
+
+        try {
+            const response = await fetch(`/emojis/${id}/getParents/`, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json'
+                }
+            });
+
+            if (!response.ok) throw new Error("Erreur serveur : " + response.status);
+
+            const data = await response.json();
+
+            // Injection dynamique dans la popup
+            const parent1El = document.getElementById(`parent1-${id}`);
+            if (data.codeParent1 && data.codeParent1.includes('vercel')) {
+                parent1El.innerHTML = `<img src="${data.codeParent1}" alt="Parent 1" width="48" height="48">`;
+            } else {
+                parent1El.innerText = data.codeParent1 || '❓';
+            }
+
+            const parent2El = document.getElementById(`parent2-${id}`);
+            if (data.codeParent2 && data.codeParent2.includes('vercel')) {
+                parent2El.innerHTML = `<img src="${data.codeParent2}" alt="Parent 2" width="48" height="48">`;
+            } else {
+                parent2El.innerText = data.codeParent2 || '❓';
+            }
+
+            const childEl = document.getElementById(`child-${id}`);
+            if (data.codeEnfant && data.codeEnfant.includes('vercel')) {
+                childEl.innerHTML = `<img src="${data.codeEnfant}" alt="Emoji fusionné" width="64" height="64">`;
+            } else {
+                childEl.innerText = data.codeEnfant || '❓';
+            }
+
+            document.getElementById(`name-parent1-${id}`).innerText = data.nameParent1 || 'inconnu';
+            document.getElementById(`name-parent2-${id}`).innerText = data.nameParent2 || 'inconnu';
+            document.getElementById(`name-child-${id}`).innerText = data.nameEnfant || 'inconnu';
+            console.log("Parents récupérés :", data);
+
+            // Affichage plein écran
+            const popup = document.getElementById(`popup-hiera-${id}`);
+            if (popup) popup.style.display = 'block';
+
+        } catch (error) {
+            console.error("Erreur lors de la récupération des parents :", error);
+            alert("Une erreur est survenue lors de l'affichage de la hiérarchie.");
+        }
+    }
+
+    function closeHierarchyPopup(id) {
+        const popup = document.getElementById(`popup-hiera-${id}`);
+        if (popup) popup.style.display = 'none';
+    }
+
     // Fermer les autres popups en cliquant ailleurs
     document.addEventListener('click', function(e) {
         document.querySelectorAll('.popup').forEach(p => {
@@ -117,6 +174,16 @@ document.addEventListener('DOMContentLoaded', () => {
                 p.style.display = 'none';
             }
         });
+
+        // Partie pour fermer la popup de hiérarchie
+        document.querySelectorAll('.close-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const id = btn.dataset.id; // On récupère l'id depuis l'attribut data-id
+                const popup = document.getElementById(`popup-hiera-${id}`);
+                if (popup) popup.style.display = 'none';
+                e.stopPropagation(); // Empêche la propagation du clic
+            });
+        });
     });
 
     // Fonction pour appliquer la recherche, les filtres et le tri
@@ -168,6 +235,18 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    // Appel Fonctionnalité de popup de hierachie de famille
+    document.querySelectorAll('.detail-icon-hierarchy').forEach(icon => {
+        icon.addEventListener('click', (e) => {
+            const card = icon.closest('.emoji-card');
+            const id = card?.dataset.id;
+            if (id) {
+                toggleHierachiPopup(id);
+            }
+            e.stopPropagation(); // évite que ça sélectionne la carte
+        });
+    });
+
     // Appliquer l'écouteur à toutes les cartes (base + collection)
     document.querySelectorAll('.emoji-container').forEach(container => {
         container.addEventListener('click', (e) => {

src/Controller/EmojiController.php

@@ -254,4 +254,38 @@ class EmojiController extends AbstractController
         $vic = $this->fightEmoji($e,$e2);
         echo $vic->getName();
     }
+
+    #[Route('/{emojiID}/getParents/', name: 'get_parents_emoji', methods: ['GET'])]
+    public function getParentsEmoji(int $emojiID, EmojiRepository $emojiRepository): JsonResponse {
+        $emoji = $emojiRepository->find($emojiID);
+
+        if (!$emoji) {
+            return new JsonResponse(['error' => 'Emoji not found'], 404);
+        }
+
+        $codeParent1 = null;
+        $codeParent2 = null;
+        $nameParent1 = 'inconnu';
+        $nameParent2 = 'inconnu';
+
+
+        if ($emoji->getParent1()) {
+            $codeParent1 = $emoji->getParent1()->getCode();
+            $nameParent1 = $emoji->getParent1()->getName();
+        }
+        if ($emoji->getParent2()) {
+            $codeParent2 = $emoji->getParent2()->getCode();
+            $nameParent2 = $emoji->getParent2()->getName();
+        }
+
+        
+        return new JsonResponse([
+            'codeParent1' => $codeParent1,
+            'nameParent1' => $nameParent1,
+            'codeParent2' => $codeParent2,
+            'nameParent2' => $nameParent2,
+            'codeEnfant' => $emoji->getCode(),
+            'nameEnfant' => $emoji->getName(),
+        ]);
+    }
 }

src/Controller/HomeController.php

@@ -59,6 +59,17 @@ class HomeController extends AbstractController
         ];
 
         $emojisCrees = [
+            [
+                'id' => 5,
+                'nom' => 'Alice',
+                'code' => '🥳',
+                'force' => 6.0,
+                'robustesse' => 5.0,
+                'intelligence' => 4.5,
+                'vitesse' => 6.5,
+                'nbCombatGagne' => 0,
+                'rarete' => 2, // rare
+            ],
             [
                 'id' => 6,
                 'nom' => 'Benoit',
@@ -81,17 +92,6 @@ class HomeController extends AbstractController
                 'nbCombatGagne' => 8,
                 'rarete' => 5, // légendaire
             ],
-            [
-                'id' => 5,
-                'nom' => 'Alice',
-                'code' => '🥳',
-                'force' => 6.0,
-                'robustesse' => 5.0,
-                'intelligence' => 4.5,
-                'vitesse' => 6.5,
-                'nbCombatGagne' => 0,
-                'rarete' => 2, // rare
-            ],
             [
                 'id' => 8,
                 'nom' => 'Bobette',

templates/home/index.html.twig

@@ -3,13 +3,13 @@
 {% block title %}Accueil - Ma collection de créatures{% endblock %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" href="{{ asset('css/home.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/home.css?v=1.3') }}">
 {% endblock %}
 
 {% block body %}
     {% if app.user %}
         <div class="logout-container">
-            Connecté en tant que <strong>{{ app.user.username }}</strong>
+            <span style="margin-right: 20px; text-decoration: underline">Connecté en tant que <strong>{{ app.user.username }}</strong></span>
             <form action="{{ path('app_logout') }}" method="post" style="display: inline;">
                 <button type="submit" class="btn btn-logout">🚪 Se déconnecter</button>
             </form>
@@ -34,6 +34,7 @@
                 <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="detail-icon-hierarchy" data-id="{{ emoji.id }}">👨‍👩‍👧‍👦</div>
 
                 <div class="popup" id="popup-{{ emoji.id }}">
                     <strong>Stats :</strong><br>
@@ -44,6 +45,36 @@
                 </div>
             </div>
         {% endfor %}
+
+        {% for emoji in emojisDeBase %}
+            <div class="hierarchy-modal" id="popup-hiera-{{ emoji.id }}">
+                <div class="hierarchy-overlay" data-id="{{ emoji.id }}"></div>
+                <div class="hierarchy-content">
+                    <span class="close-btn" data-id="{{ emoji.id }}">&times;</span>
+                    <div class="hierarchy-graph">
+                        <div class="parent-block parent1">
+                            <div class="emoji" id="parent1-{{ emoji.id }}"></div>
+                            <div class="name" id="name-parent1-{{ emoji.id }}"></div>
+                        </div>
+
+                        <div class="arrows">
+                            <div class="arrow">⬇️</div>
+                        </div>
+
+                        <div class="parent-block parent2">
+                            <div class="emoji" id="parent2-{{ emoji.id }}"></div>
+                            <div class="name" id="name-parent2-{{ emoji.id }}"></div>
+                        </div>
+
+                        <div class="child-block">
+                            <div class="child" id="child-{{ emoji.id }}"></div>
+                            <div class="name" id="name-child-{{ emoji.id }}"></div>
+                        </div>
+                        
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
     </div>
 
     <div class="section-break-icon">🔻</div>
@@ -86,6 +117,7 @@
                 <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="detail-icon-hierarchy" data-id="{{ emoji.id }}">👨‍👩‍👧‍👦</div>
 
                 <div class="popup" id="popup-{{ emoji.id }}">
                     <strong>Stats :</strong><br>
@@ -96,6 +128,36 @@
                 </div>
             </div>
         {% endfor %}
+
+        {% for emoji in emojisCrees %}
+            <div class="hierarchy-modal" id="popup-hiera-{{ emoji.id }}">
+                <div class="hierarchy-overlay" data-id="{{ emoji.id }}"></div>
+                <div class="hierarchy-content">
+                    <span class="close-btn" data-id="{{ emoji.id }}">&times;</span>
+                    <div class="hierarchy-graph">
+                        <div class="parent-block parent1">
+                            <div class="emoji" id="parent1-{{ emoji.id }}"></div>
+                            <div class="name" id="name-parent1-{{ emoji.id }}"></div>
+                        </div>
+
+                        <div class="arrows">
+                            <div class="arrow">⬇️</div>
+                        </div>
+
+                        <div class="parent-block parent2">
+                            <div class="emoji" id="parent2-{{ emoji.id }}"></div>
+                            <div class="name" id="name-parent2-{{ emoji.id }}"></div>
+                        </div>
+
+                        <div class="child-block">
+                            <div class="child" id="child-{{ emoji.id }}"></div>
+                            <div class="name" id="name-child-{{ emoji.id }}"></div>
+                        </div>
+                        
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
     </div>
 
     <div id="pagination" class="pagination-bar"></div>
@@ -111,5 +173,5 @@
 {% endblock %}
 
 {% block javascripts %}
-    <script src="{{ asset('js/home.js?v=1.3') }}"></script>
+    <script src="{{ asset('js/home.js?v=1.2') }}"></script>
 {% endblock %}