Show a little red dot on the northern resonator (details pane + mobile status bar)

code/portal_detail_display_tools.js

@@ -193,8 +193,13 @@ window.getResonatorDetails = function(d) {
 // slot: which slot this resonator occupies. Starts with 0 (east) and
 // rotates clockwise. So, last one is 7 (southeast).
 window.renderResonatorDetails = function(slot, level, nrg, dist, nick) {
+  if(OCTANTS[slot] === 'N')
+    var className = 'meter north';
+  else
+    var className = 'meter';
+
   if(level === 0) {
-    var meter = '<span class="meter" title="octant:\t' + OCTANTS[slot] + ' ' + OCTANTS_ARROW[slot] + '"></span>';
+    var meter = '<span class="' + className + '" title="octant:\t' + OCTANTS[slot] + ' ' + OCTANTS_ARROW[slot] + '"></span>';
   } else {
     var max = RESO_NRG[level];
     var fillGrade = nrg/max*100;
@@ -209,11 +214,11 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick) {
 
     var color = (level < 3 ? "#9900FF" : "#FFFFFF");
 
-    var lbar = '<span class="meter-level" style="color: ' + color + ';"> ' + level + ' </span>';
+    var lbar = '<span class="meter-level" style="color: ' + color + ';"> L ' + level + ' </span>';
 
     var fill  = '<span style="'+style+'"></span>';
 
-    var meter = '<span class="meter" title="'+inf+'">' + fill + lbar + '</span>';
+    var meter = '<span class="' + className + '" title="'+inf+'">' + fill + lbar + '</span>';
   }
   nick = nick ? '<span class="nickname">'+nick+'</span>' : null;
   return [meter, nick || ''];

code/smartphone.js

@@ -90,9 +90,11 @@ window.smartphoneInfo = function(data) {
 
   if(details) {
     var l,v,max,perc;
-    var className = TEAM_TO_CSS[getTeam(details)];
     for(var i=0;i<8;i++)
     {
+      var className = TEAM_TO_CSS[getTeam(details)];
+      if(OCTANTS[i] === 'N')
+        className += ' north'
       var reso = details.resonatorArray.resonators[i];
       if(reso) {
         l = parseInt(reso.level);

mobile/smartphone.css

@@ -61,6 +61,20 @@ body {
   -webkit-box-sizing: border-box;
 }
 
+#mobileinfo .resonator.north:before {
+  content: "";
+  background-color: red;
+  border-radius: 100%;
+  display: block;
+  height: 6px;
+  width: 6px;
+  left: 50%;
+  top: -3px; 
+  margin-left: -3px;
+  position: absolute;
+  z-index: -1;
+}
+
 #mobileinfo .filllevel {
   position: absolute;
   bottom: 0;

plugins/reso-energy-pct-in-portal-detail.user.js

@@ -22,18 +22,18 @@
 window.plugin.resoEnergyPctInPortalDetal = function() {};
 
 window.plugin.resoEnergyPctInPortalDetal.updateMeter = function(data) {
-  var meterLevel = $("span.meter-level");
-  meterLevel
-    .css('top','0px')
-    .css('left','5px')
-    .css('margin-left','0px')
-    .css('font-size','80%')
-    .css('line-height','18px');
-  meterLevel.each(function() {
+  $("span.meter-level")
+    .css({
+      "word-spacing": "-1px",
+      "text-align": "left",
+      "font-size": "90%",
+      "padding-left": "2px",
+    })
+    .each(function() {
       var matchResult = $(this).parent().attr('title').match(/\((\d*\%)\)/);
       if(matchResult) {
-      var newMeterContent = 'L' + $(this).html() + '  ' + matchResult[1];
-      $(this).html(newMeterContent);
+        var html = $(this).html() + '<div style="position:absolute;right:0;top:0">' + matchResult[1] + '</div>';
+        $(this).html(html);
       }
     });
 }

style.css

@@ -650,6 +650,23 @@ h3 {
   top: 0;
 }
 
+.meter.north {
+  overflow: hidden;
+}
+.meter.north:before {
+  content: "";
+  background-color: red;
+  border: 1px solid #000000;
+  border-radius: 100%;
+  display: block;
+  height: 6px;
+  width: 6px;
+  left: 50%;
+  top: -3px;
+  margin-left: -4px;
+  position: absolute;
+}
+
 .meter span {
   display: block;
   height: 14px;
@@ -657,10 +674,12 @@ h3 {
 
 .meter-level {
   position: absolute;
+  left: 0;
+  right: 0;
   top: -2px;
-  left: 50%;
-  margin-left: -6px;
   text-shadow: 0.0em 0.0em 0.3em #808080;
+  text-align: center;
+  word-spacing: 4px; /* to leave some space for the north indicator */
 }
 
 /* links below resos */