Merge pull request 'Feature In-Game Compass' (#27) from feature/in-game-compass into develop

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/27
Reviewed-by: Pőcze Bence <bence@pocze.ch>

public/static/css/map_editor.css

@@ -1,4 +1,4 @@
-.map {
+#map {
     position: absolute;
     top: 0;
     left: 0;
@@ -7,13 +7,6 @@
     z-index: 1;
 }
 
-#mapSelection img {
-    display: inline;
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.15em;
-}
-
 /* modify the cursor for the Leaflet map */
 .leaflet-container {
     cursor: crosshair;
@@ -72,9 +65,6 @@
     #placeControl {
         top: calc(50% + 10px);
     }
-    .hideOnMobile {
-        display: none;
-    }
 }
 
 @media screen and (min-width: 1000px), (max-height: 599px) {

public/static/img/compass.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <polygon id="needleNorth" points="50,0 33,50 66,50" style="fill:red;stroke:black;stroke-width:1" />
+  <polygon id="needleSouth" points="50,100 33,50 66,50" style="fill:white;stroke:black;stroke-width:1" />
+  Sorry, your browser does not support inline SVG.
+</svg>

public/static/img/map.svg

@@ -1,4 +0,0 @@
-<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
-<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z"/>
-</svg>

public/static/img/street-view-cover.svg

@@ -1,5 +0,0 @@
-<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
-<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 16 16">
-  <path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z"/>
-  <path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z"/>
-</svg>

public/static/js/game.js

@@ -387,6 +387,10 @@
             document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
 
             Game.loadPano(Game.panoId, Game.pov);
+
+            // update the compass
+            const heading = Game.panorama.getPov().heading;
+            document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
         },
 
         handleErrorResponse: function (error) {
@@ -863,6 +867,9 @@
 
     Game.panorama.addListener('pov_changed', function () {
         Game.rewriteGoogleLink();
+
+        const heading = Game.panorama.getPov().heading;
+        document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
     });
 
     if (COOKIES_CONSENT) {
@@ -950,4 +957,8 @@
     document.getElementById('returnToStart').onclick = function () {
         Game.loadPano(Game.panoId, Game.pov);
     }
+
+    document.getElementById('compassContainer').onclick = function () {
+        Game.panorama.setPov({ heading: 0, pitch: Game.panorama.getPov().pitch });
+    }
 })();

public/static/js/map_editor.js

@@ -7,6 +7,7 @@
             description: null
         },
         map: null,
+        markers: null,
         panorama: null,
         selectedMarker: null,
         added: {},
@@ -117,13 +118,16 @@
             MapEditor.resetSelected();
             MapEditor.selectedMarker = marker;
 
-            MapEditor.map.resize();
+            MapEditor.map.invalidateSize(true);
             MapEditor.map.panTo(marker.getLatLng());
 
             MapEditor.panorama.setVisible(false);
 
             if (marker.placeId) {
-                MapEditor.map.changeMarkerIcon(marker, MapEditor.map.iconCollection.iconBlue);
+                MapEditor.markers.removeLayer(MapEditor.selectedMarker);
+                MapEditor.map.addLayer(MapEditor.selectedMarker);
+                marker.setIcon(IconCollection.iconBlue);
+                marker.setZIndexOffset(2000);
 
                 document.getElementById('deleteButton').style.display = 'block';
 
@@ -161,13 +165,13 @@
             var placeId = MapEditor.selectedMarker.placeId
 
             if (places[placeId].id && !del) {
-                MapEditor.map.changeMarkerIcon(
+                MapEditor.map.removeLayer(MapEditor.selectedMarker);
-                    MapEditor.selectedMarker,
+                MapEditor.markers.addLayer(MapEditor.selectedMarker);
-                    places[placeId].noPano ? MapEditor.map.iconCollection.iconRed : MapEditor.map.iconCollection.iconGreen
+                MapEditor.selectedMarker.setIcon(places[placeId].noPano ? IconCollection.iconRed : IconCollection.iconGreen);
-                );
+                MapEditor.selectedMarker.setZIndexOffset(1000);
             } else {
                 delete places[placeId];
-                MapEditor.map.removeMarker(MapEditor.selectedMarker);
+                MapEditor.map.removeLayer(MapEditor.selectedMarker);
             }
 
             document.getElementById('deleteButton').style.display = 'none';
@@ -219,7 +223,7 @@
             MapEditor.resetSelected(del);
             MapEditor.selectedMarker = null;
 
-            MapEditor.map.resize();
+            MapEditor.map.invalidateSize(true);
         },
 
         deletePlace: function () {
@@ -235,7 +239,6 @@
 
             delete MapEditor.added[placeId];
             delete MapEditor.edited[placeId];
-            delete places[placeId];
 
             document.getElementById('added').innerHTML = String(Object.keys(MapEditor.added).length);
             document.getElementById('edited').innerHTML = String(Object.keys(MapEditor.edited).length);
@@ -307,9 +310,42 @@
                 var placeId = addedPlaces[i].id;
                 places[tempId].id = placeId;
             }
+        },
+
+        // TODO: check whether marker is already existing on the map for the coordinates
+        //       or alternatively block saving for matching coordinates
+        placeMarker: function (latlng) {
+            var marker = L.marker(latlng, {
+                icon: IconCollection.iconBlue,
+                zIndexOffset: 2000
+            })
+                .addTo(MapEditor.map)
+                .on('click', function () {
+                    MapEditor.select(this);
+                });
+
+            MapEditor.select(marker);
         }
     };
 
+    var IconCollection = {
+        iconGreen: L.icon({
+            iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
+            iconSize: [24, 32],
+            iconAnchor: [12, 32]
+        }),
+        iconRed: L.icon({
+            iconUrl: STATIC_ROOT + '/img/markers/marker-red.svg?rev=' + REVISION,
+            iconSize: [24, 32],
+            iconAnchor: [12, 32]
+        }),
+        iconBlue: L.icon({
+            iconUrl: STATIC_ROOT + '/img/markers/marker-blue.svg?rev=' + REVISION,
+            iconSize: [24, 32],
+            iconAnchor: [12, 32]
+        }),
+    };
+
     var Util = {
         getHighResData: function () {
             if (window.devicePixelRatio >= 4) {
@@ -348,41 +384,12 @@
         }
     };
 
-    var LMapWrapper = {
+    MapEditor.map = L.map('map', {
-        map: null,
-        markers: null,
-        divId: null,
-        iconCollection: {
-            iconGreen: L.icon({
-                iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
-                iconSize: [24, 32],
-                iconAnchor: [12, 32]
-            }),
-            iconRed: L.icon({
-                iconUrl: STATIC_ROOT + '/img/markers/marker-red.svg?rev=' + REVISION,
-                iconSize: [24, 32],
-                iconAnchor: [12, 32]
-            }),
-            iconBlue: L.icon({
-                iconUrl: STATIC_ROOT + '/img/markers/marker-blue.svg?rev=' + REVISION,
-                iconSize: [24, 32],
-                iconAnchor: [12, 32]
-            })
-        },
-
-        init: function (divId, places) {
-            document.getElementById(divId).style.display = "block";
-
-            if (!LMapWrapper.map) {
-                LMapWrapper.divId = divId;
-                LMapWrapper.map = L.map(LMapWrapper.divId, {
-                    center: { lat: 0., lng: 0. },
-                    zoom: 2,
         zoomControl: false
     });
 
-                LMapWrapper.map.on('click', function (e) {
+    MapEditor.map.on('click', function (e) {
-                    LMapWrapper.placeMarker(e.latlng);
+        MapEditor.placeMarker(e.latlng);
     });
 
     var highResData = Util.getHighResData();
@@ -395,30 +402,13 @@
         zoomOffset: highResData.zoomOffset,
         minZoom: highResData.minZoom,
         maxZoom: highResData.maxZoom
-                }).addTo(LMapWrapper.map);
+    }).addTo(MapEditor.map);
 
-                if (mapId) {
+    MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
-                    LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
-                }
-            }
 
-            LMapWrapper.loadMarkers(places);
+    MapEditor.markers = L.markerClusterGroup({
-
-            document.getElementById('streetViewCoverSelector').disabled = true;
-        },
-
-        hide: function () {
-            document.getElementById(LMapWrapper.divId).style.display = 'none';
-        },
-
-        loadMarkers: function (places) {
-            if (!LMapWrapper.markers) {
-                LMapWrapper.markers = L.markerClusterGroup({
         maxClusterRadius: 50
     });
-            } else {
-                LMapWrapper.markers.clearLayers();
-            }
 
     for (var placeId in places) {
         if (!places.hasOwnProperty(placeId)) {
@@ -428,210 +418,18 @@
         var place = places[placeId];
 
         var marker = L.marker({ lat: place.lat, lng: place.lng }, {
-                    icon: place.noPano ? LMapWrapper.iconCollection.iconRed : LMapWrapper.iconCollection.iconGreen,
+            icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen,
             zIndexOffset: 1000
         })
-                    .addTo(LMapWrapper.markers)
+            .addTo(MapEditor.markers)
             .on('click', function () {
                 MapEditor.select(this);
             });
 
-                marker.placeId = placeId;
+        marker.placeId = place.id;
     }
 
-            LMapWrapper.map.addLayer(LMapWrapper.markers);
+    MapEditor.map.addLayer(MapEditor.markers);
-        },
-
-        // TODO: check whether marker is already existing on the map for the coordinates
-        //       or alternatively block saving for matching coordinates
-        placeMarker: function (latLng) {
-            var marker = L.marker(latLng, {
-                icon: LMapWrapper.iconCollection.iconBlue,
-                zIndexOffset: 2000
-            })
-                .addTo(LMapWrapper.markers)
-                .on('click', function () {
-                    MapEditor.select(this);
-                });
-
-            MapEditor.select(marker);
-        },
-
-        panTo: function (latLng) {
-            LMapWrapper.map.panTo(latLng);
-        },
-
-        resize: function () {
-            LMapWrapper.map.invalidateSize(true);
-        },
-
-        changeMarkerIcon: function (marker, icon) {
-            marker.setIcon(icon);
-            marker.setZIndexOffset(2000);
-        },
-
-        removeMarker: function (marker) {
-            LMapWrapper.markers.removeLayer(marker);
-        },
-
-        toggleStreetViewCover: function () { }
-    };
-
-    var GMapWrapper = {
-        map: null,
-        markers: null,
-        divId: null,
-        streetViewCover: null,
-        streetViewCoverOn: false,
-        iconCollection: {
-            iconGreen: {
-                url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
-                scaledSize: new google.maps.Size(24, 32), // scaled size
-                origin: new google.maps.Point(0, 0), // origin
-                anchor: new google.maps.Point(12, 32) // anchor
-            },
-            iconRed: {
-                url: STATIC_ROOT + '/img/markers/marker-red.svg?rev' + REVISION,
-                scaledSize: new google.maps.Size(24, 32), // scaled size
-                origin: new google.maps.Point(0, 0), // origin
-                anchor: new google.maps.Point(12, 32) // anchor
-            },
-            iconBlue: {
-                url: STATIC_ROOT + '/img/markers/marker-blue.svg?rev' + REVISION,
-                scaledSize: new google.maps.Size(24, 32), // scaled size
-                origin: new google.maps.Point(0, 0), // origin
-                anchor: new google.maps.Point(12, 32) // anchor
-            }
-        },
-
-        init: function (divId, places) {
-            document.getElementById(divId).style.display = "block";
-
-            if (!GMapWrapper.map) {
-                GMapWrapper.divId = divId;
-                GMapWrapper.map = new google.maps.Map(document.getElementById(GMapWrapper.divId), {
-                    center: { lat: 0., lng: 0. },
-                    zoom: 2,
-                    fullscreenControl: false,
-                    zoomControl: true,
-                    zoomControlOptions: {
-                        position: google.maps.ControlPosition.LEFT_BOTTOM
-                    },
-                    draggableCursor: 'crosshair'
-                });
-
-                GMapWrapper.streetViewCover = new google.maps.StreetViewCoverageLayer();
-
-                GMapWrapper.map.addListener('click', function (mapsMouseEvent) {
-                    GMapWrapper.placeMarker({
-                        lat: mapsMouseEvent.latLng.lat(),
-                        lng: mapsMouseEvent.latLng.lng()
-                    });
-                });
-
-                if (mapId) {
-                    GMapWrapper.map.fitBounds({ south: mapBounds.south, west: mapBounds.west, north: mapBounds.north, east: mapBounds.east });
-                }
-            }
-
-            GMapWrapper.loadMarkers(places);
-
-            document.getElementById('streetViewCoverSelector').disabled = false;
-        },
-
-        hide: function () {
-            document.getElementById(GMapWrapper.divId).style.display = 'none';
-        },
-
-        loadMarkers: function (places) {
-            if (!GMapWrapper.markers) {
-                GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], {
-                    imagePath: STATIC_ROOT + '/img/markers/m',
-                    imageExtension: 'png?rev' + REVISION
-                });
-            } else {
-                GMapWrapper.markers.clearMarkers();
-            }
-
-            for (var placeId in places) {
-                if (!places.hasOwnProperty(placeId)) {
-                    continue;
-                }
-
-                var place = places[placeId];
-
-                var marker = new google.maps.Marker({
-                    position: {
-                        lat: place.lat,
-                        lng: place.lng
-                    },
-                    icon: place.noPano ? GMapWrapper.iconCollection.iconRed : GMapWrapper.iconCollection.iconGreen
-                });
-
-                marker.getLatLng = function () { return { lat: this.getPosition().lat(), lng: this.getPosition().lng() } };
-                marker.setLatLng = function (coords) { this.setPosition(coords) };
-
-                marker.addListener('click', function () {
-                    MapEditor.select(this);
-                });
-
-                marker.placeId = placeId;
-
-                GMapWrapper.markers.addMarker(marker);
-            }
-        },
-
-        // TODO: check whether marker is already existing on the map for the coordinates
-        //       or alternatively block saving for matching coordinates
-        placeMarker: function (latLng) {
-            var marker = new google.maps.Marker({
-                map: GMapWrapper.map,
-                position: latLng,
-                icon: GMapWrapper.iconCollection.iconBlue,
-            });
-
-            marker.getLatLng = function () { return { lat: this.getPosition().lat(), lng: this.getPosition().lng() } };
-            marker.setLatLng = function (coords) { this.setPosition(coords) };
-
-            marker.addListener('click', function () {
-                MapEditor.select(this);
-            });
-
-            GMapWrapper.markers.addMarker(marker);
-
-            MapEditor.select(marker);
-        },
-
-        panTo: function (latLng) {
-            GMapWrapper.map.panTo(latLng);
-        },
-
-        resize: function () {
-            google.maps.event.trigger(GMapWrapper.map, 'resize');
-        },
-
-        changeMarkerIcon: function (marker, icon) {
-            marker.setIcon(icon);
-        },
-
-        removeMarker: function (marker) {
-            GMapWrapper.markers.removeMarker(marker);
-        },
-
-        toggleStreetViewCover: function () {
-            if (GMapWrapper.streetViewCoverOn) {
-                GMapWrapper.streetViewCover.setMap(null);
-                GMapWrapper.streetViewCoverOn = false;
-            } else {
-                GMapWrapper.streetViewCover.setMap(GMapWrapper.map);
-                GMapWrapper.streetViewCoverOn = true;
-            }
-        }
-    };
-
-    // initialize content of #map with google maps
-    MapEditor.map = GMapWrapper;
-    MapEditor.map.init('gmap', places);
 
     MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
         // switch off fullscreenControl because positioning doesn't work
@@ -680,7 +478,7 @@
         var coordinates = Util.extractCoordinates(coordinatesStr);
 
         if (coordinates.valid) {
-            MapEditor.map.placeMarker(coordinates.latlng);
+            MapEditor.placeMarker(coordinates.latlng);
         }
     };
 
@@ -693,7 +491,7 @@
             jumpButton.disabled = false;
 
             if (e.key == 'Enter') {
-                MapEditor.map.placeMarker(coordinates.latlng);
+                MapEditor.placeMarker(coordinates.latlng);
             }
         }
         else {
@@ -701,21 +499,4 @@
         }
     };
 
-    document.getElementById('mapSelector').onclick = function () {
-        MapEditor.closePlace();
-        MapEditor.map.hide();
-
-        if (MapEditor.map === GMapWrapper) {
-            MapEditor.map = LMapWrapper;
-            MapEditor.map.init('lmap', places);
-        } else {
-            MapEditor.map = GMapWrapper;
-            MapEditor.map.init('gmap', places);
-        }
-    }
-
-    document.getElementById('streetViewCoverSelector').onclick = function () {
-        MapEditor.map.toggleStreetViewCover();
-    }
-
 })();

views/admin/map_editor.php

@@ -6,24 +6,13 @@
 @js(node_modules/leaflet/dist/leaflet.js)
 @js(node_modules/leaflet.markercluster/dist/leaflet.markercluster.js)
 @js(https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>)
-@js(https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js)
 @js(js/map_editor.js)
 
 @extends(templates/layout_full)
 
 @section(subheader) 
            <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
-        --><span class="inline hideOnMobile" id="mapSelection">
+        --><span>
-                <button id="mapSelector">
-                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" />
-                </button>
-           </span><!--
-        --><span class="inline hideOnMobile" id="mapSelection">
-        <button id="streetViewCoverSelector">
-                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/street-view-cover.svg?rev=<?= REVISION ?>" alt="Street View Conver" />
-                </button>
-           </span><!--
-        --><span class="inline hideOnMobile">
                <input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
                <button id="jumpButton" disabled >Jump</button>
            </span><!--
@@ -68,10 +57,7 @@
 @endsection
 
 @section(main)
-    <div id="map" class="map">
+    <div id="map"></div>
-        <div id="lmap" class="map"></div>
-        <div id="gmap" class="map"></div>
-    </div>
     <div id="panorama"></div>
     <div id="noPano">
         <p class="bold">No panorama is available for this location.</p>

views/game.php

@@ -60,6 +60,14 @@
         </div>
     </div>
     <div id="navigation">
+        <div id="compassContainer" class="navigationItem">
+            <div>
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+            </div>
+            <div>
+                <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
+            </div>
+        </div>
         <div id="returnToStart" class="navigationItem">
             <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />