diff --git a/public/css/home.css b/public/css/home.css
index d8e65e7..33e7935 100644
--- 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;
}
diff --git a/public/js/home.js b/public/js/home.js
index fa7b9d6..0bb1623 100644
--- 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
diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php
index f5df842..c760e76 100644
--- 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,
]);
}
}
diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig
index d48c919..a28ae63 100644
--- a/templates/home/index.html.twig
+++ b/templates/home/index.html.twig
@@ -10,6 +10,38 @@
🧬 Ma collection de créatures 🐾
+ 🌱 Vos créatures de base
+
+
+ {% for emoji in emojisDeBase %}
+
+
+
Level {{ emoji.nbCombatGagne }}
+
{{ emoji.code }}
+
{{ emoji.nom }}
+
ℹ️
+
+
+
+ {% endfor %}
+
🔻
+
+ 📦 Votre collection personnelle
+
@@ -32,18 +64,20 @@
- Sélectionnez 2 créatures...
-
-
- {% for emoji in emojis %}
-
+
+ {% for emoji in emojisCrees %}
+
Level {{ emoji.nbCombatGagne }}
{{ emoji.code }}
{{ emoji.nom }}
-
ℹ️
+
ℹ️
+
Sélectionnez 2 créatures de votre choix pour commencer ...
+
-
-
+
+
{% endblock %}