Merged in bugfix/MAPG-28-rewrite-missiong-static-asset-paths (pull request #104)

MAPG-28 fix static asset paths (add STATIC_ROOT and REVISION)

.env.example

@@ -7,3 +7,4 @@ GOOGLE_MAPS_SERVER_API_KEY=your_google_maps_server_api_key
 GOOGLE_MAPS_JS_API_KEY=your_google_maps_js_api_key
 LEAFLET_TILESERVER_URL=a_leaflet_compatible_tileserver_url
 LEAFLET_TILESERVER_ATTRIBUTION=attribution_to_be_shown_for_tiles
+STATIC_ROOT=/static

main.php

@@ -3,6 +3,9 @@
 require 'vendor/autoload.php';
 
 const ROOT = __DIR__;
+const VERSION = '';
+const REVISION = '';
+const REVISION_DATE = '';
 
 $dotenv = Dotenv\Dotenv::createImmutable(ROOT);
 $dotenv->load();

public/static/css/mapguesser.css

@@ -285,7 +285,7 @@ div.buttonContainer>button {
 }
 
 #loading {
-    position: absolute;
+    position: fixed;
     width: 64px;
     height: 64px;
     top: 50%;

public/static/js/game.js

@@ -229,7 +229,7 @@
                 clickable: true,
                 draggable: false,
                 icon: {
-                    url: '/static/img/markers/marker-green.svg',
+                    url: STATIC_ROOT + '/img/markers/marker-green.svg?rev=' + REVISION,
                     size: new google.maps.Size(24, 32),
                     scaledSize: new google.maps.Size(24, 32),
                     anchor: new google.maps.Point(12, 32)
@@ -248,7 +248,7 @@
                 clickable: false,
                 draggable: false,
                 icon: {
-                    url: '/static/img/markers/marker-gray-empty.svg',
+                    url: STATIC_ROOT + '/img/markers/marker-gray-empty.svg?rev=' + REVISION,
                     size: new google.maps.Size(24, 32),
                     scaledSize: new google.maps.Size(24, 32),
                     anchor: new google.maps.Point(12, 32),
@@ -319,7 +319,7 @@
                 var round = Game.rounds[i];
 
                 round.realMarker.setIcon({
-                    url: '/static/img/markers/marker-green-empty.svg',
+                    url: STATIC_ROOT + '/img/markers/marker-green-empty.svg?rev=' + REVISION,
                     size: new google.maps.Size(24, 32),
                     scaledSize: new google.maps.Size(24, 32),
                     anchor: new google.maps.Point(12, 32),
@@ -411,7 +411,7 @@
             clickable: false,
             draggable: true,
             icon: {
-                url: '/static/img/markers/marker-gray-empty.svg',
+                url: STATIC_ROOT + '/img/markers/marker-gray-empty.svg?rev=' + REVISION,
                 size: new google.maps.Size(24, 32),
                 scaledSize: new google.maps.Size(24, 32),
                 anchor: new google.maps.Point(12, 32),

public/static/js/map_editor.js

@@ -7,6 +7,7 @@
             description: null
         },
         map: null,
+        markers: null,
         panorama: null,
         selectedMarker: null,
         added: {},
@@ -129,6 +130,8 @@
             MapEditor.panorama.setVisible(false);
 
             if (marker.placeId) {
+                MapEditor.markers.removeLayer(MapEditor.selectedMarker);
+                MapEditor.map.addLayer(MapEditor.selectedMarker);
                 marker.setIcon(IconCollection.iconBlue);
                 marker.setZIndexOffset(2000);
 
@@ -168,6 +171,8 @@
             var placeId = MapEditor.selectedMarker.placeId
 
             if (places[placeId].id && !del) {
+                MapEditor.map.removeLayer(MapEditor.selectedMarker);
+                MapEditor.markers.addLayer(MapEditor.selectedMarker);
                 MapEditor.selectedMarker.setIcon(places[placeId].noPano ? IconCollection.iconRed : IconCollection.iconGreen);
                 MapEditor.selectedMarker.setZIndexOffset(1000);
             } else {
@@ -322,17 +327,17 @@
 
     var IconCollection = {
         iconGreen: L.icon({
-            iconUrl: '/static/img/markers/marker-green.svg',
+            iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
             iconSize: [24, 32],
             iconAnchor: [12, 32]
         }),
         iconRed: L.icon({
-            iconUrl: '/static/img/markers/marker-red.svg',
+            iconUrl: STATIC_ROOT + '/img/markers/marker-red.svg?rev=' + REVISION,
             iconSize: [24, 32],
             iconAnchor: [12, 32]
         }),
         iconBlue: L.icon({
-            iconUrl: '/static/img/markers/marker-blue.svg',
+            iconUrl: STATIC_ROOT + '/img/markers/marker-blue.svg?rev=' + REVISION,
             iconSize: [24, 32],
             iconAnchor: [12, 32]
         }),
@@ -381,6 +386,10 @@
 
     MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
 
+    MapEditor.markers = L.markerClusterGroup({
+        maxClusterRadius: 50
+    });
+
     for (var placeId in places) {
         if (!places.hasOwnProperty(placeId)) {
             continue;
@@ -392,7 +401,7 @@
             icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen,
             zIndexOffset: 1000
         })
-            .addTo(MapEditor.map)
+            .addTo(MapEditor.markers)
             .on('click', function () {
                 MapEditor.select(this);
             });
@@ -400,6 +409,8 @@
         marker.placeId = place.id;
     }
 
+    MapEditor.map.addLayer(MapEditor.markers);
+
     MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
         // switch off fullscreenControl because positioning doesn't work
         fullscreenControl: false,

public/static/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "leaflet": "^1.6.0"
+    "leaflet": "^1.6.0",
+    "leaflet.markercluster": "^1.4.1"
   }
 }

public/static/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+leaflet.markercluster@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5"
+  integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==
+
 leaflet@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"

scripts/deploy-to-multiple-worktrees.py

@@ -74,8 +74,7 @@ def updateAppInWorktree(worktreePath):
     subprocess.call([worktreePath + "/scripts/update.sh"], cwd=worktreePath)
 
 def updateAppVersionInWorktree(worktreePath):
-    pass
-    #subprocess.call([worktreePath + "/scripts/update-version.sh"], cwd=worktreePath)
+    subprocess.call([worktreePath + "/scripts/update-version.sh"], cwd=worktreePath)
 
 worktrees = getDataForWorktrees()
 
@@ -111,10 +110,6 @@ if developmentWorktree.revision != developmentWorktree.newRevision:
 elif developmentWorktree.version != developmentWorktree.newVersion:
     print("-> DEVELOPMENT " + developmentWorktree.path + "'s version info will be UPDATED")
 
-    checkoutWorktree(developmentWorktree.path, developmentWorktree.branch)
-
-    print(developmentWorktree.path + " is checked out to " + developmentWorktree.branch)
-
     updateAppVersionInWorktree(developmentWorktree.path)
 
     print("MapGuesser version is updated in " + developmentWorktree.path)

scripts/gitHooks/prepare-commit-msg

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+BRANCH_NAME=$(git symbolic-ref --short HEAD)
+BRANCH_PATTERN="^(bugfix|feature|hotfix)\/([A-Z]+-[0-9]+).*"
+
+if [[ "${BRANCH_NAME}" =~ $BRANCH_PATTERN ]]; then
+    TICKET_ID=$(echo $BRANCH_NAME | sed -E "s@$BRANCH_PATTERN@\\2@")
+
+    COMMIT_MESSAGE=$(head -n 1 $1)
+    COMMIT_MESSAGE_REGEX="^$TICKET_ID .*"
+
+    if [[ ! "${COMMIT_MESSAGE}" =~ $COMMIT_MESSAGE_REGEX ]]; then
+        sed -i.bak -e "1s/^/$TICKET_ID /" $1
+    fi
+fi

scripts/update-version.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+ROOT_DIR=$(dirname $(readlink -f "$0"))/..
+
+. ${ROOT_DIR}/.env
+
+cd ${ROOT_DIR}
+
+echo "Updating version info..."
+
+VERSION=$(git describe --tags --always --match "Release_*" HEAD)
+REVISION=$(git rev-parse --short HEAD)
+REVISION_DATE=$(git show -s --format=%aI HEAD)
+
+sed -i -E "s/const VERSION = '(.*)';/const VERSION = '${VERSION}';/" main.php
+sed -i -E "s/const REVISION = '(.*)';/const REVISION = '${REVISION}';/" main.php
+sed -i -E "s/const REVISION_DATE = '(.*)';/const REVISION_DATE = '${REVISION_DATE}';/" main.php

views/admin/map_editor.php

@@ -1,10 +1,23 @@
-<?php $cssFiles = ['/static/node_modules/leaflet/dist/leaflet.css', '/static/css/map_editor.css']; ?>
+<?php
+$cssFiles = [
+    'node_modules/leaflet/dist/leaflet.css',
+    'css/map_editor.css',
+    'node_modules/leaflet.markercluster/dist/MarkerCluster.css',
+    'node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css'
+];
+$jsFiles = [
+    'node_modules/leaflet/dist/leaflet.js',
+    'node_modules/leaflet.markercluster/dist/leaflet.markercluster.js',
+    'https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'],
+    'js/map_editor.js',
+];
+?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <div class="header small">
     <div class="grid">
         <h1>
             <a href="/maps" title="Back to playable maps">
-                <img class="inline" src="/static/img/icon.svg">
+                <img class="inline" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
                 <span>MapGuesser</span>
             </a>
         </h1>
@@ -67,7 +80,4 @@
     var mapBounds = <?= json_encode($bounds) ?>;
     var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>;
 </script>
-<script src="/static/node_modules/leaflet/dist/leaflet.js"></script>
-<script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
-<script src="/static/js/map_editor.js"></script>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/game.php

@@ -1,10 +1,18 @@
-<?php $cssFiles = ['/static/css/game.css']; ?>
+<?php
+$cssFiles = [
+    'css/game.css'
+];
+$jsFiles = [
+    'https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'],
+    'js/game.js',
+];
+?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <div class="header small">
     <div class="grid">
         <h1>
             <a href="/maps" title="Back to playable maps">
-                <img class="inline" src="/static/img/icon.svg">
+                <img class="inline" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
                 <span>MapGuesser</span>
             </a>
         </h1>
@@ -53,6 +61,4 @@
     var mapId = <?= $mapId ?>;
     var mapBounds = <?= json_encode($bounds) ?>;
 </script>
-<script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
-<script src="/static/js/game.js"></script>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/login.php

@@ -1,3 +1,8 @@
+<?php
+$jsFiles = [
+    'js/login.js',
+];
+?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
 <div class="main">
@@ -13,5 +18,4 @@
         </form>
     </div>
 </div>
-<script src="/static/js/login.js"></script>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/maps.php

@@ -1,4 +1,8 @@
-<?php $cssFiles = ['/static/css/maps.css']; ?>
+<?php
+$cssFiles = [
+    'css/maps.css'
+];
+?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
 <div class="main">

views/templates/header.php

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

views/templates/main_footer.php

@@ -1,3 +1,17 @@
+    <script>
+        const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
+        const REVISION = '<?= REVISION ?>';
+    </script>
+    <?php if (isset($jsFiles)) : ?>
+        <?php foreach ($jsFiles as $jsFile) : ?>
+            <?php
+            if (!preg_match('/^http(s)?/', $jsFile)) {
+                $jsFile = $_ENV['STATIC_ROOT'] .  '/' . $jsFile . '?rev=' . REVISION;
+            }
+            ?>
+            <script src="<?= $jsFile ?>"></script>
+        <?php endforeach; ?>
+    <?php endif; ?>
     <script>
         (function () {
             var anchors = document.getElementsByTagName('a');

views/templates/main_header.php

@@ -4,19 +4,24 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>MapGuesser</title>
-    <link href="/static/css/mapguesser.css" rel="stylesheet">
+    <link href="<?= $_ENV['STATIC_ROOT'] ?>/css/mapguesser.css?rev=<?= REVISION ?>" rel="stylesheet">
     <?php if (isset($cssFiles)) : ?>
         <?php foreach ($cssFiles as $cssFile) : ?>
+            <?php
+            if (!preg_match('/^http(s)?/', $cssFile)) {
+                $cssFile = $_ENV['STATIC_ROOT'] .  '/' . $cssFile . '?rev=' . REVISION;
+            }
+            ?>
             <link href="<?= $cssFile ?>" rel="stylesheet">
         <?php endforeach; ?>
     <?php endif; ?>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
-    <link rel="icon" type="image/png" sizes="192x192" href="/static/img/favicon/192x192.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="/static/img/favicon/96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon/32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon/16x16.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/192x192.png?rev=<?= REVISION ?>">
+    <link rel="icon" type="image/png" sizes="96x96" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/96x96.png?rev=<?= REVISION ?>">
+    <link rel="icon" type="image/png" sizes="32x32" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/32x32.png?rev=<?= REVISION ?>">
+    <link rel="icon" type="image/png" sizes="16x16" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/16x16.png?rev=<?= REVISION ?>">
 </head>
 <body>
     <div id="loading">
-        <img src="/static/img/loading.svg">
+        <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>">
     </div>