New feature: Highlight resonators of selected portal

code/map_data.js

@@ -281,8 +281,10 @@ window.renderPortal = function(ent) {
     window.portals[this.options.guid] = this;
     // handles the case where a selected portal gets removed from the
     // map by hiding all portals with said level
-    if(window.selectedPortal != this.options.guid)
+    if(window.selectedPortal != this.options.guid) {
+      window.resonatorsResetStyle(this.options.guid);
       window.portalResetColor(this);
+    }
   });
 
   p.on('click',    function() { window.renderPortalDetails(ent[0]); });
@@ -338,11 +340,11 @@ window.renderResonators = function(ent, portalLayer) {
 
     // the resonator
     var reso =  L.circleMarker(Rlatlng, {
-        radius: 3,
+        radius: ent[0] == selectedPortal ? RADIUS_SELECTED_PORTAL_RESONATOR: RADIUS_NON_SELECTED_PORTAL_RESONATOR,
         // #AAAAAA outline seems easier to see the fill opacity
-        color: '#AAAAAA',
+        color: ent[0] == selectedPortal ? COLOR_SELECTED_PORTAL_RESONATOR : COLOR_NON_SELECTED_PORTAL_RESONATOR,
         opacity: 1,
-        weight: 1,
+        weight: ent[0] == selectedPortal ? WEIGHT_SELECTED_PORTAL_RESONATOR : WEIGHT_NON_SELECTED_PORTAL_RESONATOR,
         fillColor: COLORS_LVL[rdata.level],
         fillOpacity: rdata.energyTotal/RESO_NRG[rdata.level],
         clickable: false,
@@ -351,9 +353,9 @@ window.renderResonators = function(ent, portalLayer) {
 
     // line connecting reso to portal
     var conn = L.polyline([portalLatLng, Rlatlng], {
-        weight: 2,
+        weight: ent[0] == selectedPortal ? WEIGHT_SELECTED_PORTAL_RESONATOR_LINE : WEIGHT_NON_SELECTED_PORTAL_RESONATOR_LINE,
         color: '#FFA000',
-        opacity: 0.25,
+        opacity: ent[0] == selectedPortal ? OPACITY_SELECTED_PORTAL_RESONATOR_LINE : OPACITY_NON_SELECTED_PORTAL_RESONATOR_LINE,
         dashArray: '0,10,8,4,8,4,8,4,8,4,8,4,8,4,8,4,8,4,8,4',
         fill: false,
         clickable: false});
@@ -373,7 +375,10 @@ window.renderResonators = function(ent, portalLayer) {
     // doesn’t matter to which element these are bound since Leaflet
     // will add/remove all elements of the LayerGroup at once.
     reso.on('remove', function() { delete window.resonators[this.options.guid]; });
-    reso.on('add',    function() { window.resonators[this.options.guid] = r; });
+    reso.on('add',    function() { 
+      if(window.resonators[this.options.guid]) throw('duplicate resonator detected');
+      window.resonators[this.options.guid] = r; 
+    });
 
     r.addTo(portalsLayers[parseInt(portalLevel)]);
     reRendered = true;
@@ -402,6 +407,42 @@ window.isSameResonator = function(oldRes, newRes) {
 
 window.portalResetColor = function(portal) {
   portal.setStyle({color:  COLORS[getTeam(portal.options.details)]});
+  resonatorsResetStyle(portal.options.guid);
+}
+
+window.resonatorsResetStyle = function(portalGuid) {
+  for(var i = 0; i < 8; i++) {
+    resonatorLayerGroup = resonators[portalResonatorGuid(portalGuid, i)];
+    //console.log('reset:'+i+','+resonatorLayerGroup);
+    if(!resonatorLayerGroup) continue;
+    resonatorLayerGroup.eachLayer(function(layer) {
+      if (layer.options.guid) {
+        layer.setStyle({color: COLOR_NON_SELECTED_PORTAL_RESONATOR});
+        layer.setStyle({radius: RADIUS_NON_SELECTED_PORTAL_RESONATOR});
+        layer.setStyle({weight: WEIGHT_NON_SELECTED_PORTAL_RESONATOR});
+      } else {
+        layer.setStyle({opacity: OPACITY_NON_SELECTED_PORTAL_RESONATOR_LINE});
+        layer.setStyle({weight: WEIGHT_NON_SELECTED_PORTAL_RESONATOR_LINE});
+      }
+    });
+  }
+}
+
+window.resonatorsSetSelectStyle = function(portalGuid) {
+  for(var i = 0; i < 8; i++) {
+    resonatorLayerGroup = resonators[portalResonatorGuid(portalGuid, i)];
+    if(!resonatorLayerGroup) continue;
+    resonatorLayerGroup.eachLayer(function(layer) {
+      if (layer.options.guid) {
+        layer.bringToFront().setStyle({color: COLOR_SELECTED_PORTAL_RESONATOR});
+        layer.setStyle({radius: RADIUS_SELECTED_PORTAL_RESONATOR});
+        layer.setStyle({weight: WEIGHT_SELECTED_PORTAL_RESONATOR});
+      } else {
+        layer.bringToFront().setStyle({opacity: OPACITY_SELECTED_PORTAL_RESONATOR_LINE});
+        layer.setStyle({weight: WEIGHT_SELECTED_PORTAL_RESONATOR_LINE});
+      }
+    });
+  }
 }
 
 // renders a link on the map from the given entity

code/portal_detail_display.js

@@ -109,12 +109,17 @@ window.setPortalIndicators = function(d) {
 window.selectPortal = function(guid) {
   var update = selectedPortal === guid;
   var oldPortal = portals[selectedPortal];
-  if(!update && oldPortal) portalResetColor(oldPortal);
+  if(!update && oldPortal) {
+    resonatorsResetStyle(oldPortal.options.guid);
+    portalResetColor(oldPortal);
+  }
 
   selectedPortal = guid;
 
-  if(portals[guid])
+  if(portals[guid]) {
+    resonatorsSetSelectStyle(guid);
     portals[guid].bringToFront().setStyle({color: COLOR_SELECTED_PORTAL});
+  }
 
   return update;
 }
@@ -122,8 +127,10 @@ window.selectPortal = function(guid) {
 
 window.unselectOldPortal = function() {
   var oldPortal = portals[selectedPortal];
-  if(oldPortal)
+  if(oldPortal) {
+    resonatorsResetStyle(oldPortal.options.guid);
     oldPortal.setStyle({color: oldPortal.options.fillColor});
+  }
   selectedPortal = null;
   $('#portaldetails').html('');
 }

main.js

@@ -146,6 +146,16 @@ window.COLORS = ['#FFCE00', '#0088FF', '#03FE03']; // none, res, enl
 window.COLORS_LVL = ['#000', '#FECE5A', '#FFA630', '#FF7315', '#E40000', '#FD2992', '#EB26CD', '#C124E0', '#9627F4'];
 window.COLORS_MOD = {VERY_RARE: '#F78AF6', RARE: '#AD8AFF', COMMON: '#84FBBD'};
 
+window.COLOR_SELECTED_PORTAL_RESONATOR = '#FFFFFF';
+window.COLOR_NON_SELECTED_PORTAL_RESONATOR = '#AAAAAA';
+window.OPACITY_SELECTED_PORTAL_RESONATOR_LINE = 0.7;
+window.OPACITY_NON_SELECTED_PORTAL_RESONATOR_LINE = 0.25;
+window.RADIUS_SELECTED_PORTAL_RESONATOR = 4;
+window.RADIUS_NON_SELECTED_PORTAL_RESONATOR = 3;
+window.WEIGHT_SELECTED_PORTAL_RESONATOR_LINE = 3;
+window.WEIGHT_NON_SELECTED_PORTAL_RESONATOR_LINE = 2;
+window.WEIGHT_SELECTED_PORTAL_RESONATOR = 2;
+window.WEIGHT_NON_SELECTED_PORTAL_RESONATOR = 1;
 
 // circles around a selected portal that show from where you can hack
 // it and how far the portal reaches (i.e. how far links may be made