parent
4baddf303b
commit
60b3a1a445
@ -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
|
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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 = `
|
||||||
|
<div class="creature-tag">${selectedCards[0].dataset.name}</div>
|
||||||
|
<span class="vs-text"> et </span>
|
||||||
|
<div class="creature-tag">${selectedCards[1].dataset.name}</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
Loading…
Reference in new issue