Avancement Memory

Manque le js pour flip les cartes, dire qu'il a gagné, etc.
1 year ago · c3ab480257
parent c73cc60d80
commit c3ab480257
4 changed files with 79 additions and 5 deletions
--- a/Project/php/controller/AbsController.php
+++ b/Project/php/controller/AbsController.php
@ -60,19 +60,32 @@ abstract class AbsController
        }
    }

-    public function memory(): void{
+    public static function memory($match): void{
        global $twig;

        try{
-            $idVoc = Validation::filter_int($_GET['id'] ?? null);
+            $idVoc = Validation::filter_int($match['params']['id'] ?? null);
            $wordList = (new \gateway\TranslationGateway)->findByIdVoc($idVoc);
+            $wordShuffle = array();
+
+            $pairs = [];
+            for ($i = 0; $i != count($wordList); $i += 1) {
+                $wordShuffle[] = $word1 = $wordList[$i]->getWord1();
+                $wordShuffle[] = $word2 = $wordList[$i]->getWord2();
+
+                $pairs[] = [$word1, $word2];
+            }
+
+            shuffle($wordShuffle);
+
+            echo $twig->render('memory.html', [
+                'wordShuffle' => $wordShuffle,
+                'pairs' => $pairs,
+            ]);

        }
        catch (Exception $e){
            throw new Exception("Erreur");
        }
-
-
-        echo $twig->render('memory.html');
    }
 }
--- a/Project/php/controller/FrontController.php
+++ b/Project/php/controller/FrontController.php
@ -40,6 +40,10 @@ class FrontController
                        $this->home();
                        break;

+                    case 'memory':
+                        AbsController::memory($match);
+                        break;
+
                    case 'login':
                        $this->login();
                        break;
@ -93,6 +97,7 @@ class FrontController
    public function home(): void {
        global $twig;
        echo $twig->render('home.html');
+        var_dump($_SESSION['roles']);
    }

    public function login(): void {
--- a/Project/php/css/memory.css
+++ b/Project/php/css/memory.css
@ -0,0 +1,37 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+#memory-game {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.card {
+    width: 100px;
+    height: 100px;
+    background-color: #fff;
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.card.flipped {
+    background-color: #f0f0f0; /* Couleur de fond lorsqu'une carte est retournée */
+}
+
+.card.found {
+    background-color: #8aff8a; /* Couleur de fond lorsqu'une paire est trouvée */
+    cursor: default;
+}
--- a/Project/php/templates/memory.html
+++ b/Project/php/templates/memory.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Game</title>
+    <link rel="stylesheet" href="../css/memory.css">
+</head>
+<body>
+<div id="memory-game">
+    {% for word in wordShuffle %}
+    <div class="card" data-word="{{ word }}">
+        <span>{{ word }}</span>
+    </div>
+    {% endfor %}
+</div>
+
+</body>
+</html>