diff --git a/Project/php/controller/AbsController.php b/Project/php/controller/AbsController.php index 5ee5dd2..a1c6e27 100644 --- a/Project/php/controller/AbsController.php +++ b/Project/php/controller/AbsController.php @@ -68,14 +68,18 @@ abstract class AbsController $wordList = (new \gateway\TranslationGateway)->findByIdVoc($idVoc); $wordShuffle = array(); + shuffle($wordList); $pairs = []; - for ($i = 0; $i != count($wordList); $i += 1) { + $maxWords = 28; + + for ($i = 0; $i < min(count($wordList), $maxWords / 2); $i++) { $wordShuffle[] = $word1 = $wordList[$i]->getWord1(); $wordShuffle[] = $word2 = $wordList[$i]->getWord2(); $pairs[] = [$word1, $word2]; } + shuffle($wordShuffle); echo $twig->render('memory.html', [ diff --git a/Project/php/css/memory.css b/Project/php/css/memory.css index 4de1b9c..3287863 100644 --- a/Project/php/css/memory.css +++ b/Project/php/css/memory.css @@ -3,19 +3,21 @@ body { justify-content: center; align-items: center; height: 100vh; - margin: 0; background-color: #f0f0f0; + margin-left: 15vh; + margin-right: 15vh; } #memory-game { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(4, 140px); /* Hauteur fixe pour chaque carte, ajustez si nécessaire */ gap: 10px; } .card { - width: 100px; - height: 100px; + width: 100%; + height: 100%; background-color: #fff; border: 2px solid #ccc; border-radius: 8px; @@ -28,10 +30,14 @@ body { } .card.flipped { - background-color: #f0f0f0; /* Couleur de fond lorsqu'une carte est retournée */ + background-color: #f0f0f0; } .card.found { - background-color: #8aff8a; /* Couleur de fond lorsqu'une paire est trouvée */ + background-color: #8aff8a; cursor: default; +} + +.center-text { + text-align: center; } \ No newline at end of file diff --git a/Project/php/templates/memory.html b/Project/php/templates/memory.html index 25e24e4..6cb9535 100644 --- a/Project/php/templates/memory.html +++ b/Project/php/templates/memory.html @@ -9,7 +9,7 @@
{% for word in wordShuffle %} -
+
{{ word }}
{% endfor %}