New feature: Highlight resonators of selected portal

This commit is contained in:
Xelio 2013-02-16 00:01:59 +08:00
parent 6a5759f06c
commit c127bf0b6d
3 changed files with 68 additions and 10 deletions

View File

@ -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) {
// doesnt 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

View File

@ -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('');
}

10
main.js
View File

@ -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