Merged in feature/MAPG-174-adjust-map-description-style (pull request #141)

MAPG-174 create separate div for description and align description vertically middle

.env.example

@@ -1,3 +1,4 @@
+APP_NAME=MapQuiz
 DEV=1
 DB_HOST=mariadb
 DB_USER=mapguesser

mail/signup-noconfirm.html

@@ -1,9 +1,9 @@
 Hi,
 <br><br>
-You recently signed up on MapGuesser with this Google account ({{EMAIL}}).
+You recently signed up on {{APP_NAME}} with this Google account ({{EMAIL}}).
 <br><br>
-Have fun on MapGuesser!
+Have fun on {{APP_NAME}}!
 <br><br>
 Regards,<br>
-MapGuesser<br>
-<a href="{{BASE_URL}}" title="MapGuesser">{{BASE_URL}}</a>
+{{APP_NAME}}<br>
+<a href="{{BASE_URL}}" title="{{APP_NAME}}">{{BASE_URL}}</a>

mail/signup.html

@@ -1,14 +1,14 @@
 Hi,
 <br><br>
-You recently signed up on MapGuesser with this email address ({{EMAIL}}). To activate your account, please click on the following link:<br>
+You recently signed up on {{APP_NAME}} with this email address ({{EMAIL}}). To activate your account, please click on the following link:<br>
 <a href="{{ACTIVATE_LINK}}" title="Account activation">{{ACTIVATE_LINK}}</a>
 <br><br>
-If you did not sign up on MapGuesser or changed your mind, no further action is required, your email address will be deleted soon.<br>
+If you did not sign up on {{APP_NAME}} or changed your mind, no further action is required, your email address will be deleted soon.<br>
 However if you want to immediately delete it, please click on the following link:<br>
 <a href="{{CANCEL_LINK}}" title="Sign up cancellation">{{CANCEL_LINK}}</a>
 <br><br>
-Have fun on MapGuesser!
+Have fun on {{APP_NAME}}!
 <br><br>
 Regards,<br>
-MapGuesser<br>
-<a href="{{BASE_URL}}" title="MapGuesser">{{BASE_URL}}</a>
+{{APP_NAME}}<br>
+<a href="{{BASE_URL}}" title="{{APP_NAME}}">{{BASE_URL}}</a>

public/static/css/mapguesser.css

@@ -84,7 +84,7 @@ hr {
 }
 
 p.small, span.small {
-    font-size: 12px;
+    font-size: 14px;
 }
 
 .justify {
@@ -148,6 +148,13 @@ button, a.button {
     line-height: 35px;
 }
 
+button.small {
+    font-size: 14px;
+    padding: 0 12px;
+    height: 32px;
+    line-height: 32px;
+}
+
 button:enabled:hover, button:enabled:focus, a.button:hover, a.button:focus {
     background-color: #29457f;
     outline: none;
@@ -336,6 +343,12 @@ div.buttonContainer>button {
     margin: 0 auto;
 }
 
+#cookiesNotice {
+    background-color: #eeeeee;
+    padding: 10px;
+    text-align: center;
+}
+
 #loading {
     position: fixed;
     width: 64px;

public/static/css/maps.css

@@ -29,17 +29,16 @@ div.mapItem>div.title>p.title {
 div.mapItem>div.imgContainer {
     width: 100%;
     padding-top: 50%;
-    background: #cccccc;
-}
-
-div.mapItem>div.imgContainer>img {
-    width: 100%;
-    margin-top: -50%
+    background-color: #cccccc;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
 div.mapItem>div.inner {
     background-color: #eeeeee;
     padding: 10px 8px;
+    box-sizing: border-box;
 }
 
 div.mapItem>div.inner>div.info {
@@ -47,6 +46,12 @@ div.mapItem>div.inner>div.info {
     grid-template-columns: auto auto;
 }
 
+div.mapItem>div.inner>div.description {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 div.mapItem>div.inner>div.info>p:nth-child(1) {
     text-align: left;
 }

src/Controller/LoginController.php

@@ -373,12 +373,11 @@ class LoginController
     {
         $mail = new Mail();
         $mail->addRecipient($email);
-        $mail->setSubject('Welcome to MapGuesser - Activate your account');
+        $mail->setSubject('Welcome to ' . $_ENV['APP_NAME'] . ' - Activate your account');
         $mail->setBodyFromTemplate('signup', [
             'EMAIL' => $email,
             'ACTIVATE_LINK' => $this->request->getBase() . '/'. \Container::$routeCollection->getRoute('signup.activate')->generateLink(['token' => $token]),
             'CANCEL_LINK' => $this->request->getBase() . '/' . \Container::$routeCollection->getRoute('signup.cancel')->generateLink(['token' => $token]),
-            'BASE_URL' => $this->request->getBase(),
         ]);
         $mail->send();
     }
@@ -387,10 +386,9 @@ class LoginController
     {
         $mail = new Mail();
         $mail->addRecipient($email);
-        $mail->setSubject('Welcome to MapGuesser');
+        $mail->setSubject('Welcome to ' . $_ENV['APP_NAME']);
         $mail->setBodyFromTemplate('signup-noconfirm', [
             'EMAIL' => $email,
-            'BASE_URL' => $this->request->getBase(),
         ]);
         $mail->send();
     }

src/Mailing/Mail.php

@@ -29,6 +29,13 @@ class Mail
     {
         $this->body = file_get_contents(ROOT . '/mail/' . $template . '.html');
 
+        $baseParameters = [
+            'APP_NAME' => $_ENV['APP_NAME'],
+            'BASE_URL' => \Container::$request->getBase(),
+        ];
+
+        $params = array_merge($baseParameters, $params);
+
         foreach ($params as $key => $param) {
             $this->body = str_replace('{{' . $key . '}}', $param, $this->body);
         }
@@ -58,8 +65,8 @@ class Mail
             $mailer->Mailer = 'mail';
         }
 
-        $mailer->setFrom($_ENV['MAIL_FROM'], 'MapGuesser');
-        $mailer->addReplyTo($_ENV['MAIL_FROM'], 'MapGuesser');
+        $mailer->setFrom($_ENV['MAIL_FROM'], $_ENV['APP_NAME']);
+        $mailer->addReplyTo($_ENV['MAIL_FROM'], $_ENV['APP_NAME']);
 
         $mailer->Sender = !empty($_ENV['MAIL_BOUNCE']) ? $_ENV['MAIL_BOUNCE'] : $_ENV['MAIL_FROM'];
         $mailer->Subject = $this->subject;

src/Routing/RouteCollection.php

@@ -45,6 +45,11 @@ class RouteCollection
     {
         $groupNumber = count($uri);
 
+        // response to HEAD request with the GET content
+        if ($method === 'head') {
+            $method = 'get';
+        }
+
         if (!isset($this->searchTable[$method][$groupNumber])) {
             return null;
         }

views/admin/map_editor.php

@@ -15,9 +15,9 @@ $jsFiles = [
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <header class="small">
     <h1>
-        <a href="/maps" title="Back to playable maps">
+        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
             <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-         --><span>MapGuesser</span>
+         --><span><?= $_ENV['APP_NAME'] ?></span>
         </a>
     </h1>
     <p class="header">

views/error/404.php

@@ -1,6 +1,6 @@
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
     <h2>404 | Page not found</h2>
-    <p>The requested URL was not found on this server. <a href="/" title="MapGuesser">Back to start.</a></p>
+    <p>The requested URL was not found on this server. <a href="/" title="<?= $_ENV['APP_NAME'] ?>">Back to start.</a></p>
 <?php require ROOT . '/views/templates/footer.php'; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/game.php

@@ -10,9 +10,9 @@ $jsFiles = [
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <header class="small">
     <h1>
-        <a href="/maps" title="Back to playable maps">
+        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
             <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-         --><span>MapGuesser</span>
+         --><span><?= $_ENV['APP_NAME'] ?></span>
         </a>
     </h1>
     <p class="header">

views/maps.php

@@ -5,7 +5,6 @@ $cssFiles = [
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
-    <h2>Playable maps</h2>
     <div id="mapContainer">
         <?php foreach ($maps as $map): ?>
             <div class="mapItem">
@@ -31,7 +30,9 @@ $cssFiles = [
                          -->~ <?= $map['area'][0] ?> <?= $map['area'][1] ?><sup>2</sup>
                         </p>
                     </div>
-                    <p class="small justify marginTop"><?= $map['description'] ?></p>
+                    <div class="description marginTop">
+                        <p class="small center"><?= $map['description'] ?></p>
+                    </div>
                 </div>
                 <?php if ($isAdmin): ?>
                     <div class="buttonContainer">
@@ -64,21 +65,80 @@ $cssFiles = [
     (function () {
         const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
 
-        var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
-        for (var i = 0; i < imgContainers.length; i++) {
-            var imgContainer = imgContainers[i];
+        var Maps = {
+            descriptionDivs: null,
 
-            var img = document.createElement('img');
+            addStaticMaps: function () {
+                var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
+                for (var i = 0; i < imgContainers.length; i++) {
+                    var imgContainer = imgContainers[i];
 
-            img.src = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
-                'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
-                'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
-                imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
-                '&key=' + GOOGLE_MAPS_JS_API_KEY;
-            img.alt = 'Map area';
+                    var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
+                        'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
+                        'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
+                        imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
+                        '&key=' + GOOGLE_MAPS_JS_API_KEY;
 
-            imgContainer.appendChild(img);
-        }
+                    imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
+                }
+            },
+
+            initializeDescriptionDivs: function () {
+                Maps.descriptionDivs = document.getElementById('mapContainer').getElementsByClassName('description');
+
+                for (var i = 0; i < Maps.descriptionDivs.length; i++) {
+                    var description = Maps.descriptionDivs[i];
+                    var boundingClientRect = description.getBoundingClientRect();
+
+                    description.defaultHeight = boundingClientRect.height;
+                }
+            },
+
+            calculateDescriptionDivHeights: function () {
+                var currentY;
+                var rows = [];
+                for (var i = 0; i < Maps.descriptionDivs.length; i++) {
+                    var description = Maps.descriptionDivs[i];
+                    var boundingClientRect = description.getBoundingClientRect();
+
+                    if (currentY !== boundingClientRect.y) {
+                        rows.push([]);
+                    }
+
+                    rows[rows.length - 1].push(description);
+
+                    currentY = boundingClientRect.y;
+                }
+
+                for (var i = 0; i < rows.length; i++) {
+                    var row = rows[i];
+
+                    var maxHeight = 0;
+                    for (var j = 0; j < row.length; j++) {
+                        var description = row[j];
+
+                        if (description.defaultHeight > maxHeight) {
+                            maxHeight = description.defaultHeight;
+                        }
+                    }
+
+                    for (var j = 0; j < row.length; j++) {
+                        var description = row[j];
+
+                        description.style.height = maxHeight + 'px';
+                    }
+                }
+            }
+        };
+
+        Maps.addStaticMaps();
+
+        Maps.initializeDescriptionDivs();
+        Maps.calculateDescriptionDivHeights();
+
+        window.onresize = function () {
+            Maps.calculateDescriptionDivHeights();
+        };
     })();
 </script>
 <?php if ($isAdmin): ?>

views/templates/footer.php

@@ -1,5 +1,5 @@
 </main>
 <footer>
-    <p><span class="bold">MapGuesser</span> <?= VERSION ?></p><!--
+    <p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
  --><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
 </footer>

views/templates/header.php

@@ -1,8 +1,8 @@
 <header>
     <h1>
-        <a href="/" title="MapGuesser">
+        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
             <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-         --><span>MapGuesser</span>
+         --><span><?= $_ENV['APP_NAME'] ?></span>
         </a>
     </h1>
     <p>

views/templates/main_footer.php

@@ -14,5 +14,30 @@
             <script src="<?= $jsFile ?>"></script>
         <?php endforeach; ?>
     <?php endif; ?>
+    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
+        <script>
+            (function () {
+                MapGuesser = {
+                    cookiesAgreed: false,
+
+                    agreeCookies: function () {
+                        if (MapGuesser.cookiesAgreed) {
+                            return;
+                        }
+
+                        var expirationDate = new Date(new Date().getTime() + 20 * 365 * 24 * 60 * 60 * 1000).toUTCString();
+                        document.cookie = 'COOKIES_CONSENT=1; expires=' + expirationDate + '; path=/';
+
+                        MapGuesser.cookiesAgreed = true;
+                        document.getElementById('cookiesNotice').style.display = 'none';
+                    }
+                };
+
+                window.onclick = function () {
+                    MapGuesser.agreeCookies();
+                };
+            })();
+        </script>
+    <?php endif; ?>
 </body>
 </html>

views/templates/main_header.php

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>MapGuesser</title>
+    <title><?= $_ENV['APP_NAME'] ?></title>
     <link href="<?= $_ENV['STATIC_ROOT'] ?>/css/mapguesser.css?rev=<?= REVISION ?>" rel="stylesheet">
     <?php if (isset($cssFiles)) : ?>
         <?php foreach ($cssFiles as $cssFile) : ?>
@@ -22,6 +22,14 @@
     <link rel="icon" type="image/png" sizes="16x16" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/16x16.png?rev=<?= REVISION ?>">
 </head>
 <body>
+    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
+        <div id="cookiesNotice">
+            <p class="small">
+                <?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking I agree, you consent to our use of cookies.
+            </p>
+            <button id="agreeCookies" class="small marginTop">I agree</button>
+        </div>
+    <?php endif; ?>
     <div id="loading">
         <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>" width="64" height="64">
     </div>

web.php

@@ -12,7 +12,7 @@ if (!empty($_ENV['DEV'])) {
 
 Container::$routeCollection = new MapGuesser\Routing\RouteCollection();
 
-Container::$routeCollection->get('index', '', [MapGuesser\Controller\HomeController::class, 'getIndex']);
+Container::$routeCollection->get('index', '', [MapGuesser\Controller\MapsController::class, 'getMaps']);
 Container::$routeCollection->group('login', function (MapGuesser\Routing\RouteCollection $routeCollection) {
     $routeCollection->get('login', '', [MapGuesser\Controller\LoginController::class, 'getLoginForm']);
     $routeCollection->post('login-action', '', [MapGuesser\Controller\LoginController::class, 'login']);
@@ -35,7 +35,7 @@ Container::$routeCollection->group('profile', function (MapGuesser\Routing\Route
     $routeCollection->get('profile', '', [MapGuesser\Controller\UserController::class, 'getProfile']);
     $routeCollection->post('profile-action', '', [MapGuesser\Controller\UserController::class, 'saveProfile']);
 });
-Container::$routeCollection->get('maps', 'maps', [MapGuesser\Controller\MapsController::class, 'getMaps']);
+//Container::$routeCollection->get('maps', 'maps', [MapGuesser\Controller\MapsController::class, 'getMaps']);
 Container::$routeCollection->group('game', function (MapGuesser\Routing\RouteCollection $routeCollection) {
     $routeCollection->get('game', '{mapId}', [MapGuesser\Controller\GameController::class, 'getGame']);
     $routeCollection->get('game-json', '{mapId}/json', [MapGuesser\Controller\GameController::class, 'getGameJson']);
@@ -49,15 +49,19 @@ Container::$routeCollection->group('admin', function (MapGuesser\Routing\RouteCo
     $routeCollection->post('admin.deleteMap', 'deleteMap/{mapId}', [MapGuesser\Controller\MapAdminController::class, 'deleteMap']);
 });
 
-Container::$sessionHandler = new MapGuesser\Session\DatabaseSessionHandler();
+if (isset($_COOKIE['COOKIES_CONSENT'])) {
+    Container::$sessionHandler = new MapGuesser\Session\DatabaseSessionHandler();
 
-session_set_save_handler(Container::$sessionHandler, true);
-session_start([
-    'gc_maxlifetime' => 604800,
-    'cookie_lifetime' => 604800,
-    'cookie_httponly' => true,
-    'cookie_samesite' => 'Lax'
-]);
+    session_set_save_handler(Container::$sessionHandler, true);
+    session_start([
+        'gc_maxlifetime' => 604800,
+        'cookie_lifetime' => 604800,
+        'cookie_httponly' => true,
+        'cookie_samesite' => 'Lax'
+    ]);
+} else {
+    $_SESSION = [];
+}
 
 Container::$request = new MapGuesser\Request\Request($_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'], $_GET, $_POST, $_SESSION);