Merge pull request #2860 from ProjectSidewalk/1316-observed-area

1316 observed area
ProjectSidewalk · Nov 11, 2022 · 2100aad · 2100aad
2 parents 79b81dc + 76c48d4
commit 2100aad
Show file tree

Hide file tree

Showing 18 changed files with 278 additions and 61 deletions.
diff --git a/app/views/audit.scala.html b/app/views/audit.scala.html
@@ -423,9 +423,14 @@ <h2 id="total-mission-reward" style="display:none"></h2>
                     <div id="context-menu-vertical-connector"></div>
                 </div>
             </div>
-            <div id="google-maps-holder">
-                <div id="google-maps" class="google-maps-pane"></div>
-                <div id="google-maps-overlay" class="google-maps-pane">@Messages("audit.right.ui.red.line")</div>
+            <div id="minimap-holder">
+                <div id="minimap" class="minimap-pane"></div>
+                <div id="minimap-overlay" class="minimap-pane"></div>
+                <div id="minimap-message" class="minimap-pane"></div>
+                <canvas id="minimap-fog-of-war-canvas" class="minimap-pane" height="200" width="200"></canvas>
+                <canvas id="minimap-fov-canvas" class="minimap-pane" height="200" width="200"></canvas>
+                <canvas id="minimap-progress-circle-canvas" class="minimap-pane" height="200" width="200"></canvas>
+                <div id="minimap-percent-observed" class="minimap-pane"></div>
             </div>
             <div id="compass-message-holder" class="animated white-background-75">
                 <span id="compass-message"></span>

diff --git a/conf/messages.en b/conf/messages.en
@@ -144,7 +144,6 @@ audit.right.ui.overall.stats = Overall Stats
 audit.right.ui.current.neighborhood = Current Neighborhood
 audit.right.ui.distance = kilometers
 audit.right.ui.current.mission = Current Mission
-audit.right.ui.red.line = Follow the red line
 
 audit.center.ui.passable = Passable
 audit.center.ui.not.passable = Not Passable

diff --git a/conf/messages.es b/conf/messages.es
@@ -144,7 +144,6 @@ audit.right.ui.overall.stats = Estadísticas generales
 audit.right.ui.current.neighborhood = Colonia actual
 audit.right.ui.distance = kilómetros
 audit.right.ui.current.mission = Misión actual
-audit.right.ui.red.line = Sigue la línea roja
 
 audit.center.ui.passable = Transitable
 audit.center.ui.not.passable = No es transitable

diff --git a/conf/messages.nl b/conf/messages.nl
@@ -144,7 +144,6 @@ audit.right.ui.overall.stats = Algemene statistieken
 audit.right.ui.current.neighborhood = Huidige Wijk
 audit.right.ui.distance = kilometer
 audit.right.ui.current.mission = Huidige Missie
-audit.right.ui.red.line = Volg de rode lijn
 
 audit.center.ui.passable = Begaanbaar
 audit.center.ui.not.passable = Niet Begaanbaar

diff --git a/public/javascripts/SVLabel/css/svl-map.css b/public/javascripts/SVLabel/css/svl-map.css
@@ -1,25 +1,44 @@
-#google-maps-holder {
+#minimap-holder {
     position: absolute;
     left: 735px;
-    top: 393px;
+    top: 403px;
     width: 200px;
-    height: 210px;
+    height: 200px;
 }
 
-.google-maps-pane {
+.minimap-pane {
     border: 0 solid black;
     position: absolute;
     left: 0;
     top:0;
     width: 200px;
-    height: 210px;
+    height: 200px;
 }
 
-#google-maps-overlay {
-    color: #888;
+#minimap-overlay {
+    z-index: 2;
+}
+
+#minimap-message {
     font-size: 12px;
     z-index: 1;
+    width: 150px;
+    padding-left: 3px;
+}
+
+#minimap-fog-of-war-canvas, #minimap-fov-canvas {
+    opacity: 0.3;
+}
+
+#minimap-progress-circle-canvas {
+    opacity: 0.6;
+}
 
+#minimap-percent-observed {
+    font-size: 11px;
+    text-align: center;
+    padding-left: 161px;
+    padding-top: 12px;
 }
 
 .gm-svpc {

diff --git a/public/javascripts/SVLabel/src/SVLabel/Main.js b/public/javascripts/SVLabel/src/SVLabel/Main.js
@@ -110,6 +110,8 @@ function Main (params) {
         }
         svl.taskModel._taskContainer = svl.taskContainer;
 
+        svl.observedArea = new ObservedArea(svl.ui.minimap);
+
         // Mission
         svl.missionContainer = new MissionContainer(svl.statusFieldMission, svl.missionModel);
         svl.missionProgress = new MissionProgress(svl, svl.gameEffectModel, svl.missionModel, svl.modalModel,
@@ -299,7 +301,7 @@ function Main (params) {
     }
 
     function startTheMission(mission, neighborhood) {
-        document.getElementById("google-maps-holder").style.backgroundColor = "#e5e3df";
+        svl.ui.minimap.holder.css('backgroundColor', '#e5e3df');
         if(params.init !== "noInit") {
             // Popup the message explaining the goal of the current mission.
             if (svl.missionContainer.isTheFirstMission()) {
@@ -404,9 +406,14 @@ function Main (params) {
         svl.ui.map.pano = $("div#pano");
         svl.ui.map.viewControlLayer = $("div#view-control-layer");
         svl.ui.map.modeSwitchWalk = $("#mode-switch-button-walk");
-        svl.ui.googleMaps = {};
-        svl.ui.googleMaps.holder = $("#google-maps-holder");
-        svl.ui.googleMaps.overlay = $("#google-maps-overlay");
+        svl.ui.minimap = {};
+        svl.ui.minimap.holder = $("#minimap-holder");
+        svl.ui.minimap.overlay = $("#minimap-overlay");
+        svl.ui.minimap.message = $("#minimap-message");
+        svl.ui.minimap.fogOfWar = $("#minimap-fog-of-war-canvas");
+        svl.ui.minimap.fov = $("#minimap-fov-canvas");
+        svl.ui.minimap.progressCircle = $("#minimap-progress-circle-canvas");
+        svl.ui.minimap.percentObserved = $("#minimap-percent-observed");
         svl.ui.dateHolder = $("#svl-panorama-date-holder");
 
         // Status holder

diff --git a/public/javascripts/SVLabel/src/SVLabel/data/Form.js b/public/javascripts/SVLabel/src/SVLabel/data/Form.js
@@ -202,7 +202,7 @@ function Form (labelContainer, missionModel, missionContainer, navigationModel,
             missionContainer.setTasksMissionsOffset(oldOffset + currTaskDist);
         }
 
-        task.eraseFromGoogleMaps();
+        task.eraseFromMinimap();
         self.skipSubmit(data, task);
 
         // If the jump was clicked in the middle of the beforeJumpTask,

diff --git a/public/javascripts/SVLabel/src/SVLabel/label/Label.js b/public/javascripts/SVLabel/src/SVLabel/label/Label.js
@@ -105,7 +105,7 @@ function Label (svl, pathIn, params) {
             path.setBelongsTo(self);
 
             if (param && param.labelType && typeof google !== "undefined" && google && google.maps) {
-                googleMarker = createGoogleMapsMarker(param.labelType);
+                googleMarker = createMinimapMarker(param.labelType);
                 googleMarker.setMap(svl.map.getMap());
             }
     }
@@ -175,13 +175,13 @@ function Label (svl, pathIn, params) {
      * https://developers.google.com/maps/documentation/javascript/examples/marker-remove
      * @returns {google.maps.Marker}
      */
-    function createGoogleMapsMarker (labelType) {
+    function createMinimapMarker (labelType) {
         if (typeof google !== "undefined") {
             var latlng = toLatLng();
             var googleLatLng = new google.maps.LatLng(latlng.lat, latlng.lng);
 
             var imagePaths = util.misc.getIconImagePaths(),
-                url = imagePaths[labelType].googleMapsIconImagePath;
+                url = imagePaths[labelType].minimapIconImagePath;
 
             return new google.maps.Marker({
                 position: googleLatLng,

diff --git a/public/javascripts/SVLabel/src/SVLabel/navigation/MapService.js b/public/javascripts/SVLabel/src/SVLabel/navigation/MapService.js
@@ -56,7 +56,7 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
         panoramaOptions,
         STREETVIEW_MAX_DISTANCE = 50,
         END_OF_STREET_THRESHOLD = 25, // Distance from the endpoint of the street when we consider it complete (meters).
-        googleMapsPaneBlinkInterval,
+        minimapPaneBlinkInterval,
         moveDelay = 800; //delayed move
     //Move delay exists because too quick navigation causes rendering issues/black screens with no panos
     //No current solution to check that pano view is completely loaded before navigating
@@ -124,7 +124,7 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
         disableDefaultUI: true
     };
 
-    var mapCanvas = document.getElementById("google-maps");
+    var mapCanvas = document.getElementById("minimap");
     map = typeof google != "undefined" ? new google.maps.Map(mapCanvas, mapOptions) : null;
 
     // Styling google map.
@@ -223,6 +223,7 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
             google.maps.event.addListener(svl.panorama, "position_changed", handlerPositionUpdate);
             google.maps.event.addListener(svl.panorama, "pano_changed", handlerPanoramaChange);
             google.maps.event.addListenerOnce(svl.panorama, "pano_changed", switchToExploreMode);
+            google.maps.event.addListener(svl.panorama, "zoom_changed", handlerZoomChange);
         }
 
         // Connect the map view and panorama view.
@@ -369,19 +370,19 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
     /**
      * Blink google maps pane.
      */
-    function blinkGoogleMaps() {
-        stopBlinkingGoogleMaps();
-        googleMapsPaneBlinkInterval = window.setInterval(function () {
-            svl.ui.googleMaps.overlay.toggleClass("highlight-50");
+    function blinkMinimap() {
+        stopBlinkingMinimap();
+        minimapPaneBlinkInterval = window.setInterval(function () {
+            svl.ui.minimap.overlay.toggleClass("highlight-50");
         }, 500);
     }
 
-    function hideGoogleMaps() {
-        svl.ui.googleMaps.holder.hide();
+    function hideMinimap() {
+        svl.ui.minimap.holder.hide();
     }
 
     svl.neighborhoodModel.on("Neighborhood:completed", function() {
-        hideGoogleMaps();
+        hideMinimap();
     });
 
     /**
@@ -812,6 +813,9 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
                     _endTheCurrentTask(task, currentMission);
                 }
             }
+            if ("observedArea" in svl) {
+                svl.observedArea.panoChanged();
+            }
             svl.missionModel.updateMissionProgress(currentMission, neighborhood);
         }
 
@@ -839,11 +843,22 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
         povChange["status"] = false;
 
         if ("compass" in svl) { svl.compass.update(); }
+        if ("observedArea" in svl) { svl.observedArea.update(); }
+
         svl.tracker.push("POV_Changed");
     }
 
     /**
-     * Callback that is fired with the mouse down event on the view control layer (where you control street view angle).
+     * Callback for zoom update.
+     */
+     function handlerZoomChange () {
+        if ("observedArea" in svl) { svl.observedArea.update(); }
+
+        svl.tracker.push("Zoom_Changed");
+    }
+
+    /**
+     * Callback that is fired with the mousedown event on the view control layer (where you control street view angle).
      * @param e
      */
     function handlerViewControlLayerMouseDown(e) {
@@ -1004,7 +1019,7 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
             bottomLinks[5].remove(); // Remove mini map copyright text (duplicate of GSV).
             bottomLinks[7].remove(); // Remove mini map terms of use link (duplicate of GSV).
             uiMap.viewControlLayer.append($(bottomLinks[1]).parent().parent());
-            svl.ui.googleMaps.overlay.append($(bottomLinks[8]).parent().parent());
+            svl.ui.minimap.overlay.append($(bottomLinks[8]).parent().parent());
         }
 
         // Bring the layer with arrows forward.
@@ -1115,9 +1130,9 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
         return this;
     }
 
-    function stopBlinkingGoogleMaps() {
-        window.clearInterval(googleMapsPaneBlinkInterval);
-        svl.ui.googleMaps.overlay.removeClass("highlight-50");
+    function stopBlinkingMinimap() {
+        window.clearInterval(minimapPaneBlinkInterval);
+        svl.ui.minimap.overlay.removeClass("highlight-50");
     }
 
     function updateCanvas() {
@@ -1465,8 +1480,8 @@ function MapService (canvas, neighborhoodModel, uiMap, params) {
         return moveDelay;
     }
 
-    self.blinkGoogleMaps = blinkGoogleMaps;
-    self.stopBlinkingGoogleMaps = stopBlinkingGoogleMaps;
+    self.blinkMinimap = blinkMinimap;
+    self.stopBlinkingMinimap = stopBlinkingMinimap;
     self.disablePanning = disablePanning;
     self.disableWalking = disableWalking;
     self.enablePanning = enablePanning;