Détails visuels

php
Antoine JOURDAIN 1 year ago
parent dd1450e417
commit b2b4503719

@ -15,7 +15,8 @@ class VisitorController
try{ try{
$idVoc = Validation::filter_int($match['id'] ?? null); $idVoc = Validation::filter_int($match['id'] ?? null);
$wordList = (new \gateway\TranslationGateway)->findByIdVoc($idVoc); $wordList = (new \gateway\TranslationGateway())->findByIdVoc($idVoc);
$name = ((new \gateway\VocabularyListGateway())->findById($idVoc))->getName();
$wordShuffle = array(); $wordShuffle = array();
shuffle($wordList); shuffle($wordList);
@ -35,6 +36,7 @@ class VisitorController
echo $twig->render('memory.html', [ echo $twig->render('memory.html', [
'wordShuffle' => $wordShuffle, 'wordShuffle' => $wordShuffle,
'pairs' => json_encode($pairs), 'pairs' => json_encode($pairs),
'name' => $name
]); ]);
} }

@ -3,11 +3,17 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 90vh; height: 90vh;
background-color: #f0f0f0; background-color: #acc2c2;
margin: 2vh 15vh; margin: 2vh 15vh;
overflow: hidden; overflow: hidden;
} }
h1{
font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Varela Round", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
text-align: center;
font-size: 5vh;
}
#memory-game { #memory-game {
display: grid; display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));

@ -1,6 +1,6 @@
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
background-color: #f4f4f4; background-color: #acc2c2;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<div> <div>
<h1>Memory Game : {{ nameVoc }}</h1> <h1><u>Memory Game:</u> <i>{{ name }}</i></h1>
<div id="memory-game"> <div id="memory-game">
{% for word in wordShuffle %} {% for word in wordShuffle %}
<div class="card center-text flipped" data-word="{{ word }}"> <div class="card center-text flipped" data-word="{{ word }}">

Loading…
Cancel
Save