cleo.eiras
/
EvoLyte
1
2
Fork 0
Code Issues 18 Pull Requests Packages Projects 1 Releases Wiki Activity

Merge remote-tracking branch 'origin/mathis' into cleo

Browse Source
cleo
Cleo EIRAS 4 weeks ago
parent 1bb4c71528 ecf9673e5d
commit a12876480e
8 changed files with 573 additions and 30 deletions
Show Stats Download Patch File Download Diff File

1
composer.json
Unescape View File

@ -17,7 +17,6 @@
"phpstan/phpdoc-parser": "^1.14",
"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",

29
config/packages/messenger.yaml
Unescape View File

@ -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

48
docs/commandeDebugProjet.md
Unescape View File

@ -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

248
public/css/home.css
Unescape View File

@ -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;
}

141
public/js/home.js
Unescape View File

@ -0,0 +1,141 @@
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 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));
});
// 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);
});

66
src/Controller/HomeController.php
Unescape View File

@ -0,0 +1,66 @@
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class HomeController extends AbstractController
{
#[Route('/', name: 'home')]
public function index(): Response
{
$emojis = [
[
'id' => 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,
]);
}
}

1
templates/base.html.twig
Unescape View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% block stylesheets %}

69
templates/home/index.html.twig
Unescape View File

@ -0,0 +1,69 @@
{% extends 'base.html.twig' %}
{% block title %}Accueil - Ma collection de créatures{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/home.css') }}">
{% endblock %}
{% block body %}
<h1>🧬 Ma collection de créatures 🐾</h1>
<div class="filter-bar">
<label for="search-input">🔍 Rechercher un nom :</label>
<input type="text" id="search-input" placeholder="ex: Bob..." />
<label for="rarete-filter">Filtrer par rareté :</label>
<select id="rarete-filter">
<option value="">Toutes</option>
<option value="green">Communes</option>
<option value="purple">Épiques</option>
<option value="red">Mythiques</option>
<option value="gold">Légendaires</option>
</select>
<label for="sort-select">Trier par :</label>
<select id="sort-select">
<option value="none">--</option>
<option value="level">Level</option>
<option value="force">Force</option>
<option value="vitesse">Vitesse</option>
</select>
</div>
<div id="selection-status">Sélectionnez 2 créatures...</div>
<div class="emoji-container">
{% for emoji in emojis %}
<div class="emoji-card {{ emoji.color }}" data-id="{{ emoji.id }}" data-name="{{ emoji.nom }}"
data-color="{{ emoji.color }}" data-level="{{ emoji.nbCombatGagne }}"
data-force="{{ emoji.force }}" data-vitesse="{{ emoji.vitesse }}">
<div class="emoji-level">Level {{ emoji.nbCombatGagne }}</div>
<div class="emoji">{{ emoji.code }}</div>
<div class="emoji-name {{ emoji.color }}">{{ emoji.nom }}</div>
<div class="detail-icon">ℹ️</div>
<div class="popup" id="popup-{{ emoji.id }}">
<strong>Stats :</strong><br>
Force: {{ emoji.force }}<br>
Robustesse: {{ emoji.robustesse }}<br>
Intelligence: {{ emoji.intelligence }}<br>
Vitesse: {{ emoji.vitesse }}
</div>
</div>
{% endfor %}
</div>
<div id="selection-visual" class="selection-visual"></div>
<div class="action-buttons">
<button class="btn" ">⚔️ Combattre</button>
<button class="btn" ">💞 Reproduire</button>
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('js/home.js') }}"></script>
{% endblock %}
Write Preview
Loading…
Cancel
Save