diff --git a/public/css/home.css b/public/css/home.css index f0e0550..0cf54c7 100644 --- a/public/css/home.css +++ b/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; diff --git a/public/js/home.js b/public/js/home.js index 9822eca..69af8ea 100644 --- a/public/js/home.js +++ b/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 = `Parent 1`; + } else { + parent1El.innerText = data.codeParent1 || '❓'; + } + + const parent2El = document.getElementById(`parent2-${id}`); + if (data.codeParent2 && data.codeParent2.includes('vercel')) { + parent2El.innerHTML = `Parent 2`; + } else { + parent2El.innerText = data.codeParent2 || '❓'; + } + + const childEl = document.getElementById(`child-${id}`); + if (data.codeEnfant && data.codeEnfant.includes('vercel')) { + childEl.innerHTML = `Emoji fusionné`; + } 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) => { diff --git a/src/Controller/EmojiController.php b/src/Controller/EmojiController.php index 059ddb6..fe7ea79 100644 --- a/src/Controller/EmojiController.php +++ b/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(), + ]); + } } diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php index 87f291d..6bf371f 100644 --- a/src/Controller/HomeController.php +++ b/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', diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig index 056f8d5..503dd00 100644 --- a/templates/home/index.html.twig +++ b/templates/home/index.html.twig @@ -3,13 +3,13 @@ {% block title %}Accueil - Ma collection de créatures{% endblock %} {% block stylesheets %} - + {% endblock %} {% block body %} {% if app.user %}
- Connecté en tant que {{ app.user.username }} + Connecté en tant que {{ app.user.username }}
@@ -34,6 +34,7 @@
{{ emoji.code }}
{{ emoji.nom }}
ℹ️
+
👨‍👩‍👧‍👦
{% endfor %} + + {% for emoji in emojisDeBase %} + + {% endfor %}
🔻
@@ -86,6 +117,7 @@
{{ emoji.code }}
{{ emoji.nom }}
ℹ️
+
👨‍👩‍👧‍👦
{% endfor %} + + {% for emoji in emojisCrees %} + + {% endfor %} @@ -111,5 +173,5 @@ {% endblock %} {% block javascripts %} - + {% endblock %} \ No newline at end of file