diff --git a/code/map_data.js b/code/map_data.js index 598a12b9..2aa41259 100644 --- a/code/map_data.js +++ b/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 diff --git a/code/portal_detail_display.js b/code/portal_detail_display.js index e7727d16..de183820 100644 --- a/code/portal_detail_display.js +++ b/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(''); } diff --git a/main.js b/main.js index 2b2fb881..8cbc74dd 100644 --- a/main.js +++ b/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