Merged in feature/MAPG-169-make-map-boxes-height-identical (pull request #138)

Feature/MAPG-169 make map boxes height identical

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;
+    background-color: #cccccc;
-}
+    background-position: center;
-
+    background-repeat: no-repeat;
-div.mapItem>div.imgContainer>img {
+    background-size: cover;
-    width: 100%;
-    margin-top: -50%
 }
 
 div.mapItem>div.inner {
     background-color: #eeeeee;
     padding: 10px 8px;
+    box-sizing: border-box;
 }
 
 div.mapItem>div.inner>div.info {

views/admin/map_editor.php

@@ -15,7 +15,7 @@ $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><?= $_ENV['APP_NAME'] ?></span>
         </a>

views/game.php

@@ -10,7 +10,7 @@ $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><?= $_ENV['APP_NAME'] ?></span>
         </a>

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">
@@ -64,21 +63,80 @@ $cssFiles = [
     (function () {
         const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
 
+        var Maps = {
+            innerDivs: null,
+
+            addStaticMaps: function () {
                 var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
                 for (var i = 0; i < imgContainers.length; i++) {
                     var imgContainer = imgContainers[i];
 
-            var img = document.createElement('img');
+                    var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
-
-            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';
 
-            imgContainer.appendChild(img);
+                    imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
                 }
+            },
+
+            initializeInnerDivs: function () {
+                Maps.innerDivs = document.getElementById('mapContainer').getElementsByClassName('inner');
+
+                for (var i = 0; i < Maps.innerDivs.length; i++) {
+                    var inner = Maps.innerDivs[i];
+                    var boundingClientRect = inner.getBoundingClientRect();
+
+                    inner.defaultHeight = boundingClientRect.height;
+                }
+            },
+
+            calculateInnerDivHeights: function () {
+                var currentY;
+                var rows = [];
+                for (var i = 0; i < Maps.innerDivs.length; i++) {
+                    var inner = Maps.innerDivs[i];
+                    var boundingClientRect = inner.getBoundingClientRect();
+
+                    if (currentY !== boundingClientRect.y) {
+                        rows.push([]);
+                    }
+
+                    rows[rows.length - 1].push(inner);
+
+                    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 inner = row[j];
+
+                        if (inner.defaultHeight > maxHeight) {
+                            maxHeight = inner.defaultHeight;
+                        }
+                    }
+
+                    for (var j = 0; j < row.length; j++) {
+                        var inner = row[j];
+
+                        inner.style.height = maxHeight + 'px';
+                    }
+                }
+            }
+        };
+
+        Maps.addStaticMaps();
+
+        Maps.initializeInnerDivs();
+        Maps.calculateInnerDivHeights();
+
+        window.onresize = function () {
+            Maps.calculateInnerDivHeights();
+        };
     })();
 </script>
 <?php if ($isAdmin): ?>

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']);