Merged in bugfix/MAPG-138-fix-js-minifying (pull request #111)

MAPG-138 use traditional for loop for compatibility

public/static/css/maps.css

@@ -26,8 +26,15 @@ div.mapItem>div.title>p.title {
     font-size: 18px;
 }
 
-div.mapItem>img {
+div.mapItem>div.imgContainer {
     width: 100%;
+    padding-top: 50%;
+    background: #cccccc;
+}
+
+div.mapItem>div.imgContainer>img {
+    width: 100%;
+    margin-top: -50%
 }
 
 div.mapItem>div.inner {

public/static/js/mapguesser.js

@@ -43,15 +43,16 @@ var MapGuesser = {
         var buttons = document.getElementById('modalButtons');
         buttons.textContent = '';
 
-        for (extraButton of extraButtons) {
+        for (var i = 0; i < extraButtons.length; i++) {
+            var extraButton = extraButtons[i];
             var button = document.createElement(extraButton.type);
 
             if (extraButton.type === 'a') {
                 button.classList.add('button');
             }
 
-            for (className of extraButton.classNames) {
+            for (var i = 0; i < extraButton.classNames.length; i++) {
-                button.classList.add(className);
+                button.classList.add(extraButton.classNames[i]);
             }
 
             button.classList.add('marginTop');
@@ -82,8 +83,8 @@ var MapGuesser = {
     hideModal: function () {
         var modals = document.getElementsByClassName('modal');
 
-        for (modal of modals) {
+        for (var i = 0; i < modals.length; i++) {
-            modal.style.visibility = 'hidden';
+            modals[i].style.visibility = 'hidden';
         }
 
         document.getElementById('cover').style.visibility = 'hidden';

views/admin/map_editor.php

@@ -17,7 +17,7 @@ $jsFiles = [
     <div class="grid">
         <h1>
             <a href="/maps" title="Back to playable maps">
-                <img class="inline" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
+                <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
                 <span>MapGuesser</span>
             </a>
         </h1>
@@ -25,7 +25,7 @@ $jsFiles = [
             <span class="bold"><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
          --><span><!--
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-             --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
                     <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
                     <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
@@ -34,14 +34,14 @@ $jsFiles = [
          --></span><!--
          --><span><!--
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-             --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path d="M15.502 1.94a.5.5 0 0 1 0 .706a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>                    <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                 </svg>
                 <span id="edited" class="bold">0</span><!--
          --></span><!--
          --><span><!--
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-             --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.5 8a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5z"/>
                     <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                 </svg>

views/game.php

@@ -12,7 +12,7 @@ $jsFiles = [
     <div class="grid">
         <h1>
             <a href="/maps" title="Back to playable maps">
-                <img class="inline" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
+                <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
                 <span>MapGuesser</span>
             </a>
         </h1>

views/maps.php

@@ -13,7 +13,9 @@ $cssFiles = [
                 <div class="title">
                     <p class="title"><?= $map['name'] ?></p>
                 </div>
-                <img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>">
+                <div class="imgContainer">
+                    <img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>" alt="Map area">
+                </div>
                 <div class="inner">
                     <div class="info">
                         <p>

views/templates/header.php

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

views/templates/main_header.php

@@ -23,7 +23,7 @@
 </head>
 <body>
     <div id="loading">
-        <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>">
+        <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>" width="64" height="64">
     </div>
     <div id="cover"></div>
     <div id="modal" class="modal">