From 4baddf303b77e93a1cfbb3e3875567cb3f6ef34c Mon Sep 17 00:00:00 2001 From: "mathis.moulin" Date: Wed, 28 May 2025 15:16:27 +0200 Subject: [PATCH 1/5] Debut page Acceuil (liste des emojis) --- composer.json | 1 - docs/commandeDebugProjet.md | 48 +++++++++++++++++++ src/Controller/HomeController.php | 66 +++++++++++++++++++++++++++ templates/base.html.twig | 1 + templates/home/index.html.twig | 76 +++++++++++++++++++++++++++++++ 5 files changed, 191 insertions(+), 1 deletion(-) create mode 100644 docs/commandeDebugProjet.md create mode 100644 src/Controller/HomeController.php create mode 100644 templates/home/index.html.twig diff --git a/composer.json b/composer.json index ace294d..6f9042d 100644 --- a/composer.json +++ b/composer.json @@ -17,7 +17,6 @@ "phpstan/phpdoc-parser": "1.26", "symfony/asset": "6.1.*", "symfony/console": "6.1.*", - "symfony/doctrine-messenger": "6.1.*", "symfony/dotenv": "6.1.*", "symfony/expression-language": "6.1.*", "symfony/flex": "^2", diff --git a/docs/commandeDebugProjet.md b/docs/commandeDebugProjet.md new file mode 100644 index 0000000..7c14f92 --- /dev/null +++ b/docs/commandeDebugProjet.md @@ -0,0 +1,48 @@ +création entity : + +php bin/console make:entity Emoji + +Réinstaller orm + doctrine_bundle : + +composer require doctrine/orm doctrine/doctrine-bundle + +Recompiler l'autoload (utile si ça persiste) + +- composer dump-autoload + + Vérifie ensuite que l’entité est bien reconnue : + +- php bin/console doctrine:mapping:info +'''Found 1 mapped entity: +[OK] App\Entity\Emoji''' + + +php bin/console make:migration +php bin/console doctrine:migrations:migrate + +------- + +Récréation BDD quand pb migrations : + +php bin/console doctrine:database:drop --force +php bin/console doctrine:database:create +php bin/console doctrine:migrations:migrate + + +------- + +Solution : Forcer la mise à jour de phpstan/phpdoc-parser + +- composer require phpstan/phpdoc-parser:^1.26 + +Cree la BDD : + +''' Modification .env (pour retirer URL_BDD) + Ajout .env.local (pour ajouter URL_BDD)''' + +- symfony console doctrine:database:create + +ok j'ai creer ma BDD avec symfony console doctrine:database:create comment j'applique mon entity dans la BDD que j'avais créer précedement avec symfony console + + + diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php new file mode 100644 index 0000000..f5df842 --- /dev/null +++ b/src/Controller/HomeController.php @@ -0,0 +1,66 @@ + 1, + 'nom' => 'Bob', + 'code' => '😊', + 'force' => 12.5, + 'robustesse' => 9.3, + 'intelligence' => 7.8, + 'vitesse' => 10.0, + 'nbCombatGagne' => 3, + 'rarete' => 2, // épique + ], + [ + 'id' => 2, + 'nom' => 'John', + 'code' => '😭', + 'force' => 5.1, + 'robustesse' => 4.2, + 'intelligence' => 3.3, + 'vitesse' => 6.0, + 'nbCombatGagne' => 1, + 'rarete' => 1, // commun + ], + [ + 'id' => 3, + 'nom' => 'Rodolph', + 'code' => '😁', + 'force' => 20.0, + 'robustesse' => 15.0, + 'intelligence' => 18.0, + 'vitesse' => 17.0, + 'nbCombatGagne' => 10, + 'rarete' => 4, // légendaire + ] + ]; + + // Ajout de la couleur selon la rareté + foreach ($emojis as &$emoji) { + + $emoji['color'] = match ($emoji['rarete']) { + 1 => 'green', // commun + 2 => 'purple', // épique + 3 => 'red', // mythique + 4 => 'gold', // légendaire + default => 'gray' + }; + } + + return $this->render('home/index.html.twig', [ + 'emojis' => $emojis, + ]); + } +} diff --git a/templates/base.html.twig b/templates/base.html.twig index d4f83f7..5d567e4 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -3,6 +3,7 @@ {% block title %}Welcome!{% endblock %} + {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #} {% block stylesheets %} diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig new file mode 100644 index 0000000..a5623b1 --- /dev/null +++ b/templates/home/index.html.twig @@ -0,0 +1,76 @@ +{% extends 'base.html.twig' %} + +{% block title %}Accueil - Emojis{% endblock %} + +{% block body %} + + +
+ {% for emoji in emojis %} +
+
Level : {{ emoji.nbCombatGagne }}
+
{{ emoji.code }}
+
{{ emoji.nom }}
+
+ {% endfor %} +
+ +
+ + +
+{% endblock %} From 60b3a1a445804c475d0f5f8c891e72f2dc9a092c Mon Sep 17 00:00:00 2001 From: "mathis.moulin" Date: Thu, 29 May 2025 12:47:14 +0200 Subject: [PATCH 2/5] Maquette page d'acceuil listant les emojis v1 --- config/packages/messenger.yaml | 29 ---- public/css/home.css | 248 +++++++++++++++++++++++++++++++++ public/js/home.js | 132 ++++++++++++++++++ templates/home/index.html.twig | 117 ++++++++-------- 4 files changed, 435 insertions(+), 91 deletions(-) delete mode 100644 config/packages/messenger.yaml create mode 100644 public/css/home.css create mode 100644 public/js/home.js diff --git a/config/packages/messenger.yaml b/config/packages/messenger.yaml deleted file mode 100644 index 270f3c7..0000000 --- a/config/packages/messenger.yaml +++ /dev/null @@ -1,29 +0,0 @@ -framework: - messenger: - failure_transport: failed - - transports: - # https://symfony.com/doc/current/messenger.html#transport-configuration - async: - dsn: '%env(MESSENGER_TRANSPORT_DSN)%' - options: - use_notify: true - check_delayed_interval: 60000 - retry_strategy: - max_retries: 3 - multiplier: 2 - failed: 'doctrine://default?queue_name=failed' - # sync: 'sync://' - - default_bus: messenger.bus.default - - buses: - messenger.bus.default: [] - - routing: - Symfony\Component\Mailer\Messenger\SendEmailMessage: async - Symfony\Component\Notifier\Message\ChatMessage: async - Symfony\Component\Notifier\Message\SmsMessage: async - - # Route your messages to the transports - # 'App\Message\YourMessage': async diff --git a/public/css/home.css b/public/css/home.css new file mode 100644 index 0000000..d8e65e7 --- /dev/null +++ b/public/css/home.css @@ -0,0 +1,248 @@ +body { + background-color: #314e57; + font-family: 'Georgia', serif; + text-align: center; +} + +h1 { + font-size: 3rem; + margin-bottom: 30px; + text-shadow: 2px 2px 4px #000; + color: #f8b435; +} + +.emoji-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 30px; + margin-bottom: 10rem; +} + +.emoji-card { + background: #f2e6c9; + width: 180px; + height: 220px; + border: 4px solid #000; + border-radius: 12px; + box-shadow: 0 0 20px rgba(0,0,0,0.5); + padding: 20px; + text-align: center; + font-family: 'Georgia', serif; + position: relative; + transition: transform 0.2s ease, box-shadow 0.2s ease; + cursor: pointer; +} + +.emoji-card:hover { + transform: translateY(-8px) scale(1.03); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); + z-index: 2; +} + +/* Animation brillance pour rareté légendaire */ +@keyframes shine { + 0% { background-position: 0px; } + 100% { background-position: 177px; } +} + +.emoji-card.gold { + position: relative; + z-index: 1; +} + +.emoji-card.gold::before { + content: ''; + position: absolute; + top: 0; + left: 1%; + width: 98%; + height: 100%; + background: linear-gradient( + 120deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.5) 50%, + rgba(255, 255, 255, 0) 100% + ); + animation: shine 5s infinite; + pointer-events: none; + z-index: -1; +} + +.emoji-card > * { + position: relative; + z-index: 1; +} + +/*---------------------------*/ + +.emoji-card.gray { border-color: gray; } + +@keyframes auraGlow { + 0% { box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); } + 50% { box-shadow: 0 0 25px 8px currentColor; } + 100% { box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); } +} + +/* Applique une animation d'aura par rareté */ +.emoji-card.green { + color: darkgreen; + animation: auraGlow 3s infinite ease-in-out; +} + +.emoji-card.purple { + color: purple; + animation: auraGlow 3s infinite ease-in-out; +} + +.emoji-card.red { + color: darkred; + animation: auraGlow 3s infinite ease-in-out; +} + +.emoji-card.gold { + color: goldenrod; + animation: auraGlow 3s infinite ease-in-out; +} + + +/* Couleurs des noms selon rareté */ +.emoji-name.green { color: darkgreen; } +.emoji-name.purple { color: purple; } +.emoji-name.red { color: darkred; } +.emoji-name.gold { color: goldenrod; } +.emoji-name.gray { color: gray; } + +.emoji-card .emoji { + font-size: 50px; + margin-bottom: 10px; +} + +.emoji-name { + font-weight: bold; + font-size: 1.2rem; + margin-top: 5px; + color: purple; +} + +.emoji-level { + font-size: 1rem; + font-weight: bold; + color: #3c2f2f; + margin-bottom: 10px; +} + +.action-buttons { + display: flex; + justify-content: center; + gap: 60px; + margin-top: 20px; +} + +.btn { + background: #f2e6c9; + border: 3px solid #000; + padding: 10px 25px; + font-size: 1.2rem; + font-weight: bold; + border-radius: 8px; + cursor: pointer; + transition: transform 0.2s ease; + box-shadow: 3px 3px 0 #000; +} + +.btn:hover { + transform: scale(1.05); + background-color: #e5d6b8; +} + +.detail-icon { +position: absolute; +top: 8px; +right: 10px; +cursor: pointer; +font-size: 18px; +color: #555; +} + +.popup { + position: absolute; + top: 110%; + left: 50%; + transform: translateX(-50%); + background: #fff8e1; + color: #000; + padding: 10px; + border: 2px solid #000; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + display: none; + z-index: 10; + width: 180px; + font-size: 14px; +} + +/* Filtre et Tri*/ +.filter-bar { + margin-bottom: 30px; + color: #f8f5e0; + font-size: 1rem; +} + +.filter-bar select { + margin: 0 10px; + padding: 5px 10px; + border-radius: 6px; + border: 2px solid #000; + background: #f2e6c9; + font-family: 'Georgia', serif; +} + +/* Champs de Recherche */ +.filter-bar input[type="text"] { + padding: 5px 10px; + border-radius: 6px; + border: 2px solid #000; + background: #f2e6c9; + font-family: 'Georgia', serif; + margin-right: 10px; +} + +/* Style séléction créature pour combat / accouplement */ + +/* Etat séléctionné */ +.emoji-card.selected { + outline: 4px solid #f8b435; + outline-offset: -4px; + box-shadow: 0 0 30px 10px rgba(248, 180, 53, 0.6); +} + +#selection-status { + font-size: 1.1rem; + margin-bottom: 20px; + font-weight: bold; + color: #f9e8c0; +} + +.selection-visual { + display: flex; + justify-content: center; + align-items: center; + gap: 15px; + margin-bottom: 30px; +} + +.creature-tag { + padding: 8px 15px; + background: #f2e6c9; + border: 2px solid #000; + border-radius: 8px; + font-weight: bold; + font-size: 1.1rem; + box-shadow: 2px 2px 0 #000; +} + +.vs-text { + font-size: 1.5rem; + font-weight: bold; +} \ No newline at end of file diff --git a/public/js/home.js b/public/js/home.js new file mode 100644 index 0000000..fb2b8f2 --- /dev/null +++ b/public/js/home.js @@ -0,0 +1,132 @@ +document.addEventListener('DOMContentLoaded', () => { + // Copie tout ici + let selectedCards = []; + + function toggleSelection(card) { + const id = card.dataset.id; + + if (card.classList.contains('selected')) { + card.classList.remove('selected'); + selectedCards = selectedCards.filter(c => c.dataset.id !== id); + } else { + if (selectedCards.length < 2) { + card.classList.add('selected'); + selectedCards.push(card); + } else { + alert("Tu ne peux sélectionner que 2 créatures à la fois."); + } + } + + updateSelectionDisplay(); + } + + function updateSelectionDisplay() { + const status = document.getElementById("selection-status"); + const visual = document.getElementById("selection-visual"); + + if (selectedCards.length === 0) { + status.textContent = "Sélectionnez 2 créatures..."; + visual.innerHTML = ""; + } else if (selectedCards.length === 1) { + status.textContent = `1ère sélection : ${selectedCards[0].dataset.name}`; + visual.innerHTML = ""; + } else { + status.textContent = "2 créatures sélectionnées !"; + visual.innerHTML = ` +
${selectedCards[0].dataset.name}
+ et +
${selectedCards[1].dataset.name}
+ `; + } + } + + function handleAction(type) { + if (selectedCards.length !== 2) { + alert("Tu dois sélectionner 2 créatures."); + return; + } + + const name1 = selectedCards[0].dataset.name; + const name2 = selectedCards[1].dataset.name; + + if (type === 'combat') { + console.log(`Combat : ${name1} contre ${name2}`); + } else if (type === 'reproduction') { + console.log(`Accouplement : ${name1} et ${name2}`); + } + + // Réinitialiser après l'action + selectedCards.forEach(card => card.classList.remove('selected')); + selectedCards = []; + updateSelectionDisplay(); + } + + // Ouvre / Ferme la popup d'information + function togglePopup(id) { + const popup = document.getElementById('popup-' + id); + popup.style.display = (popup.style.display === 'block') ? 'none' : 'block'; + } + + // Fermer les autres popups en cliquant ailleurs + document.addEventListener('click', function(e) { + document.querySelectorAll('.popup').forEach(p => { + if (!p.contains(e.target) && !p.previousElementSibling.contains(e.target)) { + p.style.display = 'none'; + } + }); + }); + + // Fonction pour appliquer la recherche, les filtres et le tri + function applyFilters() { + const selectedColor = document.getElementById('rarete-filter').value; + const sortBy = document.getElementById('sort-select').value; + const searchTerm = document.getElementById('search-input').value.toLowerCase(); + + const cards = Array.from(document.querySelectorAll('.emoji-card')); + + cards.forEach(card => { + const color = card.dataset.color; + const name = card.querySelector('.emoji-name')?.textContent.toLowerCase() ?? ""; + + const matchColor = !selectedColor || color === selectedColor; + const matchName = !searchTerm || name.includes(searchTerm); + + if (matchColor && matchName) { + card.style.display = 'block'; + } else { + card.style.display = 'none'; + } + }); + + if (sortBy !== 'none') { + const container = document.querySelector('.emoji-container'); + const visibleCards = cards.filter(c => c.style.display !== 'none'); + + visibleCards.sort((a, b) => { + const aVal = parseFloat(a.dataset[sortBy]); + const bVal = parseFloat(b.dataset[sortBy]); + return bVal - aVal; + }); + + visibleCards.forEach(card => container.appendChild(card)); + } + } + + // Appel Fonctionnalité de sélection des cartes + document.querySelectorAll('.emoji-card').forEach(card => { + card.addEventListener('click', () => toggleSelection(card)); + }); + + // Appel Fonctionnalité de combat et reproduction + document.querySelectorAll('.btn').forEach(button => { + button.addEventListener('click', () => { + const type = button.textContent.includes('Combattre') ? 'combat' : 'reproduction'; + handleAction(type); + }); + }); + + // Appel Fonctionnalité de recherche et filtres + document.getElementById('search-input').addEventListener('input', applyFilters); + document.getElementById('rarete-filter').addEventListener('change', applyFilters); + document.getElementById('sort-select').addEventListener('change', applyFilters); +}); \ No newline at end of file diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig index a5623b1..9068b82 100644 --- a/templates/home/index.html.twig +++ b/templates/home/index.html.twig @@ -1,76 +1,69 @@ {% extends 'base.html.twig' %} -{% block title %}Accueil - Emojis{% endblock %} +{% block title %}Accueil - Ma collection de créatures{% endblock %} + +{% block stylesheets %} + +{% endblock %} {% block body %} - +
Level {{ emoji.nbCombatGagne }}
+
{{ emoji.code }}
+
{{ emoji.nom }}
+
ℹ️
-
- {% for emoji in emojis %} -
-
Level : {{ emoji.nbCombatGagne }}
-
{{ emoji.code }}
-
{{ emoji.nom }}
-
- {% endfor %} -
+ + + {% endfor %} + -
- - -
+
+ +
+ + +
{% endblock %} + +{% block javascripts %} + +{% endblock %} \ No newline at end of file From ecf9673e5de47e5002604a53e67da1204d47eab1 Mon Sep 17 00:00:00 2001 From: "mathis.moulin" Date: Thu, 29 May 2025 13:00:43 +0200 Subject: [PATCH 3/5] Fix bug icon info emoji --- public/js/home.js | 9 +++++++++ templates/home/index.html.twig | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/public/js/home.js b/public/js/home.js index fb2b8f2..fa7b9d6 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -112,6 +112,15 @@ 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 + }); + }); + // Appel Fonctionnalité de sélection des cartes document.querySelectorAll('.emoji-card').forEach(card => { card.addEventListener('click', () => toggleSelection(card)); diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig index 9068b82..d48c919 100644 --- a/templates/home/index.html.twig +++ b/templates/home/index.html.twig @@ -43,7 +43,7 @@
Level {{ emoji.nbCombatGagne }}
{{ emoji.code }}
{{ emoji.nom }}
-
ℹ️
+
ℹ️