Modif jeu

2 years ago · 3ffc62373e
parent 85c314b9e2
commit 3ffc62373e
3 changed files with 19 additions and 9 deletions
--- 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', [
--- 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;
+    display: grid;
-    flex-wrap: wrap;
+    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;
+    width: 100%;
-    height: 100px;
+    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;
 }
--- a/Project/php/templates/memory.html
+++ b/Project/php/templates/memory.html
@ -9,7 +9,7 @@
 <body>
 <div id="memory-game">
    {% for word in wordShuffle %}
-    <div class="card" data-word="{{ word }}">
+    <div class="card center-text" data-word="{{ word }}">
        <span>{{ word }}</span>
    </div>
    {% endfor %}