From c127bf0b6dbd971d9fb568679d88c7063e5167b1 Mon Sep 17 00:00:00 2001 From: Xelio Date: Sat, 16 Feb 2013 00:01:59 +0800 Subject: [PATCH 1/6] New feature: Highlight resonators of selected portal --- code/map_data.js | 55 ++++++++++++++++++++++++++++++----- code/portal_detail_display.js | 13 +++++++-- main.js | 10 +++++++ 3 files changed, 68 insertions(+), 10 deletions(-) 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 From 1ed2ee8e8c94aeb3dc8160d2d24e875e4b8328e9 Mon Sep 17 00:00:00 2001 From: Xelio Date: Sat, 16 Feb 2013 00:34:02 +0800 Subject: [PATCH 2/6] Performance tuning Merge multiple setStyle into one command --- code/map_data.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/code/map_data.js b/code/map_data.js index 2aa41259..d0b7476a 100644 --- a/code/map_data.js +++ b/code/map_data.js @@ -417,12 +417,12 @@ window.resonatorsResetStyle = function(portalGuid) { 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}); + layer.setStyle({color: COLOR_NON_SELECTED_PORTAL_RESONATOR, + radius: RADIUS_NON_SELECTED_PORTAL_RESONATOR, + 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}); + layer.setStyle({opacity: OPACITY_NON_SELECTED_PORTAL_RESONATOR_LINE, + weight: WEIGHT_NON_SELECTED_PORTAL_RESONATOR_LINE}); } }); } @@ -434,12 +434,12 @@ window.resonatorsSetSelectStyle = function(portalGuid) { 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}); + layer.bringToFront().setStyle({color: COLOR_SELECTED_PORTAL_RESONATOR, + radius: RADIUS_SELECTED_PORTAL_RESONATOR, + weight: WEIGHT_SELECTED_PORTAL_RESONATOR}); } else { - layer.bringToFront().setStyle({opacity: OPACITY_SELECTED_PORTAL_RESONATOR_LINE}); - layer.setStyle({weight: WEIGHT_SELECTED_PORTAL_RESONATOR_LINE}); + layer.bringToFront().setStyle({opacity: OPACITY_SELECTED_PORTAL_RESONATOR_LINE, + weight: WEIGHT_SELECTED_PORTAL_RESONATOR_LINE}); } }); } From eab812fbf6a9e644891ef68e9a64856a94217d11 Mon Sep 17 00:00:00 2001 From: Xelio Date: Sat, 16 Feb 2013 01:16:20 +0800 Subject: [PATCH 3/6] Code restructure --- code/map_data.js | 40 ++++++++++++++++------------------- code/portal_detail_display.js | 10 ++------- main.js | 15 +++++-------- 3 files changed, 25 insertions(+), 40 deletions(-) diff --git a/code/map_data.js b/code/map_data.js index d0b7476a..bf852af0 100644 --- a/code/map_data.js +++ b/code/map_data.js @@ -339,26 +339,25 @@ window.renderResonators = function(ent, portalLayer) { var resoGuid = portalResonatorGuid(ent[0], i); // the resonator - var reso = L.circleMarker(Rlatlng, { - radius: ent[0] == selectedPortal ? RADIUS_SELECTED_PORTAL_RESONATOR: RADIUS_NON_SELECTED_PORTAL_RESONATOR, - // #AAAAAA outline seems easier to see the fill opacity - color: ent[0] == selectedPortal ? COLOR_SELECTED_PORTAL_RESONATOR : COLOR_NON_SELECTED_PORTAL_RESONATOR, + var resoProperty = $.extend({ opacity: 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, - guid: resoGuid // need this here as well for add/remove events - }); + guid: resoGuid + }, ent[0] == selectedPortal ? OPTIONS_RESONATOR_SELECTED : OPTIONS_RESONATOR_NON_SELECTED); + + var reso = L.circleMarker(Rlatlng, resoProperty); // line connecting reso to portal - var conn = L.polyline([portalLatLng, Rlatlng], { - weight: ent[0] == selectedPortal ? WEIGHT_SELECTED_PORTAL_RESONATOR_LINE : WEIGHT_NON_SELECTED_PORTAL_RESONATOR_LINE, + var connProperty = $.extend({ color: '#FFA000', - 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}); + clickable: false + }, ent[0] == selectedPortal ? OPTIONS_RESONATOR_LINE_SELECTED : OPTIONS_RESONATOR_LINE_NON_SELECTED); + + var conn = L.polyline([portalLatLng, Rlatlng], connProperty); // put both in one group, so they can be handled by the same logic. @@ -413,16 +412,14 @@ window.portalResetColor = function(portal) { 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, - radius: RADIUS_NON_SELECTED_PORTAL_RESONATOR, - weight: WEIGHT_NON_SELECTED_PORTAL_RESONATOR}); + // Resonator + layer.setStyle(OPTIONS_RESONATOR_NON_SELECTED); } else { - layer.setStyle({opacity: OPACITY_NON_SELECTED_PORTAL_RESONATOR_LINE, - weight: WEIGHT_NON_SELECTED_PORTAL_RESONATOR_LINE}); + // Resonator line + layer.setStyle(OPTIONS_RESONATOR_LINE_NON_SELECTED); } }); } @@ -434,12 +431,11 @@ window.resonatorsSetSelectStyle = function(portalGuid) { if(!resonatorLayerGroup) continue; resonatorLayerGroup.eachLayer(function(layer) { if (layer.options.guid) { - layer.bringToFront().setStyle({color: COLOR_SELECTED_PORTAL_RESONATOR, - radius: RADIUS_SELECTED_PORTAL_RESONATOR, - weight: WEIGHT_SELECTED_PORTAL_RESONATOR}); + // Resonator + layer.bringToFront().setStyle(OPTIONS_RESONATOR_SELECTED); } else { - layer.bringToFront().setStyle({opacity: OPACITY_SELECTED_PORTAL_RESONATOR_LINE, - weight: WEIGHT_SELECTED_PORTAL_RESONATOR_LINE}); + // Resonator line + layer.bringToFront().setStyle(OPTIONS_RESONATOR_LINE_SELECTED); } }); } diff --git a/code/portal_detail_display.js b/code/portal_detail_display.js index de183820..fee95de1 100644 --- a/code/portal_detail_display.js +++ b/code/portal_detail_display.js @@ -109,10 +109,7 @@ window.setPortalIndicators = function(d) { window.selectPortal = function(guid) { var update = selectedPortal === guid; var oldPortal = portals[selectedPortal]; - if(!update && oldPortal) { - resonatorsResetStyle(oldPortal.options.guid); - portalResetColor(oldPortal); - } + if(!update && oldPortal) portalResetColor(oldPortal); selectedPortal = guid; @@ -127,10 +124,7 @@ window.selectPortal = function(guid) { window.unselectOldPortal = function() { var oldPortal = portals[selectedPortal]; - if(oldPortal) { - resonatorsResetStyle(oldPortal.options.guid); - oldPortal.setStyle({color: oldPortal.options.fillColor}); - } + if(oldPortal) portalResetColor(oldPortal); selectedPortal = null; $('#portaldetails').html(''); } diff --git a/main.js b/main.js index 8cbc74dd..43d4b707 100644 --- a/main.js +++ b/main.js @@ -146,16 +146,11 @@ 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; +window.OPTIONS_RESONATOR_SELECTED = { color: '#fff', weight: 2, radius: 4}; +window.OPTIONS_RESONATOR_NON_SELECTED = { color: '#aaa', weight: 1, radius: 3}; + +window.OPTIONS_RESONATOR_LINE_SELECTED = {opacity: 0.7, weight: 3}; +window.OPTIONS_RESONATOR_LINE_NON_SELECTED = {opacity: 0.25, weight: 2}; // 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 From 65b0e0113bdf4e6ed201a148ae7a054bfc07c565 Mon Sep 17 00:00:00 2001 From: Xelio Date: Sat, 16 Feb 2013 01:19:36 +0800 Subject: [PATCH 4/6] Code restructure - 2 --- code/map_data.js | 1 - 1 file changed, 1 deletion(-) diff --git a/code/map_data.js b/code/map_data.js index bf852af0..06531e86 100644 --- a/code/map_data.js +++ b/code/map_data.js @@ -282,7 +282,6 @@ window.renderPortal = function(ent) { // 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) { - window.resonatorsResetStyle(this.options.guid); window.portalResetColor(this); } }); From d632fdd2d388e53d2a3ef5e07e39afd225777247 Mon Sep 17 00:00:00 2001 From: Xelio Date: Sat, 16 Feb 2013 01:28:19 +0800 Subject: [PATCH 5/6] Code restructure - 3 --- code/map_data.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/map_data.js b/code/map_data.js index 06531e86..6fb90542 100644 --- a/code/map_data.js +++ b/code/map_data.js @@ -281,9 +281,8 @@ 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.portalResetColor(this); - } }); p.on('click', function() { window.renderPortalDetails(ent[0]); }); From 5bde912c7aba67ca6c5161b54197749f9c921ba1 Mon Sep 17 00:00:00 2001 From: Xelio Date: Sat, 16 Feb 2013 01:35:34 +0800 Subject: [PATCH 6/6] Code restructure - 4 --- code/map_data.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/map_data.js b/code/map_data.js index 6fb90542..c0c3c852 100644 --- a/code/map_data.js +++ b/code/map_data.js @@ -337,23 +337,27 @@ window.renderResonators = function(ent, portalLayer) { var resoGuid = portalResonatorGuid(ent[0], i); // the resonator + var resoStyle = + ent[0] === selectedPortal ? OPTIONS_RESONATOR_SELECTED : OPTIONS_RESONATOR_NON_SELECTED; var resoProperty = $.extend({ opacity: 1, fillColor: COLORS_LVL[rdata.level], fillOpacity: rdata.energyTotal/RESO_NRG[rdata.level], clickable: false, guid: resoGuid - }, ent[0] == selectedPortal ? OPTIONS_RESONATOR_SELECTED : OPTIONS_RESONATOR_NON_SELECTED); + }, resoStyle); var reso = L.circleMarker(Rlatlng, resoProperty); // line connecting reso to portal + var connStyle = + ent[0] === selectedPortal ? OPTIONS_RESONATOR_LINE_SELECTED : OPTIONS_RESONATOR_LINE_NON_SELECTED; var connProperty = $.extend({ color: '#FFA000', 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 - }, ent[0] == selectedPortal ? OPTIONS_RESONATOR_LINE_SELECTED : OPTIONS_RESONATOR_LINE_NON_SELECTED); + }, connStyle); var conn = L.polyline([portalLatLng, Rlatlng], connProperty);