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