Merge pull request #707 from fkloft/portal-details
Tweaks regarding portal details
This commit is contained in:
Jon Atkins
commit
ab7f41aa1d
@ -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 || ''];
|
||||
|
||||
@ -66,40 +66,53 @@ window.runOnSmartphonesBeforeBoot = function() {
|
||||
}
|
||||
|
||||
window.smartphoneInfo = function(data) {
|
||||
var d = data.portalDetails;
|
||||
var lvl = Math.floor(getPortalLevel(d));
|
||||
if(lvl == 0)
|
||||
var t = '<span class="portallevel">L' + lvl + '</span>';
|
||||
var guid = data.selectedPortalGuid;
|
||||
if(!window.portals[guid]) return;
|
||||
|
||||
var data = window.portals[selectedPortal].options.data;
|
||||
var details = window.portalDetail.get(guid);
|
||||
|
||||
var lvl = data.level;
|
||||
if(data.team === "NEUTRAL")
|
||||
var t = '<span class="portallevel">L0</span>';
|
||||
else
|
||||
var t = '<span class="portallevel" style="background: '+COLORS_LVL[lvl]+';">L' + lvl + '</span>';
|
||||
var percentage = '0%';
|
||||
var totalEnergy = getTotalPortalEnergy(d);
|
||||
if(getTotalPortalEnergy(d) > 0) {
|
||||
percentage = Math.floor((getCurrentPortalEnergy(d) / getTotalPortalEnergy(d) * 100)) + '%';
|
||||
|
||||
var percentage = data.health;
|
||||
if(details) {
|
||||
var totalEnergy = getTotalPortalEnergy(details);
|
||||
if(getTotalPortalEnergy(details) > 0) {
|
||||
percentage = Math.floor(getCurrentPortalEnergy(details) / totalEnergy * 100);
|
||||
}
|
||||
}
|
||||
t += ' ' + percentage + ' ';
|
||||
t += d.portalV2.descriptiveText.TITLE;
|
||||
t += ' ' + percentage + '% ';
|
||||
t += data.title;
|
||||
|
||||
var l,v,max,perc;
|
||||
for(var i=0;i<8;i++)
|
||||
{
|
||||
var reso = d.resonatorArray.resonators[i];
|
||||
if(reso) {
|
||||
l = parseInt(reso.level);
|
||||
v = parseInt(reso.energyTotal);
|
||||
max = RESO_NRG[l];
|
||||
perc = v/max*100;
|
||||
}
|
||||
else {
|
||||
l = 0;
|
||||
v = 0;
|
||||
max = 0;
|
||||
perc = 0;
|
||||
}
|
||||
if(details) {
|
||||
var l,v,max,perc;
|
||||
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);
|
||||
v = parseInt(reso.energyTotal);
|
||||
max = RESO_NRG[l];
|
||||
perc = v/max*100;
|
||||
}
|
||||
else {
|
||||
l = 0;
|
||||
v = 0;
|
||||
max = 0;
|
||||
perc = 0;
|
||||
}
|
||||
|
||||
t += '<div class="resonator '+TEAM_TO_CSS[getTeam(d)]+'" style="border-top-color: '+COLORS_LVL[l]+';left: '+(100*i/8.0)+'%;">';
|
||||
t += '<div class="filllevel" style="width:'+perc+'%;"></div>';
|
||||
t += '</div>'
|
||||
t += '<div class="resonator '+className+'" style="border-top-color: '+COLORS_LVL[l]+';left: '+(100*i/8.0)+'%;">';
|
||||
t += '<div class="filllevel" style="width:'+perc+'%;"></div>';
|
||||
t += '</div>'
|
||||
}
|
||||
}
|
||||
|
||||
$('#mobileinfo').html(t);
|
||||
@ -113,7 +126,7 @@ window.runOnSmartphonesAfterBoot = function() {
|
||||
|
||||
// add a div/hook for updating mobile info
|
||||
$('#updatestatus').prepend('<div id="mobileinfo" onclick="show(\'info\')"></div>');
|
||||
window.addHook('portalDetailsUpdated', window.smartphoneInfo);
|
||||
window.addHook('portalSelected', window.smartphoneInfo);
|
||||
// init msg of status bar. hint for the user that a tap leads to the info screen
|
||||
$('#mobileinfo').html('<div style="text-align: center"><b>tap here for info screen</b></div>');
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -22,20 +22,20 @@
|
||||
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() {
|
||||
var matchResult = $(this).parent().attr('title').match(/\((\d*\%)\)/);
|
||||
if(matchResult) {
|
||||
var newMeterContent = 'L' + $(this).html() + ' ' + matchResult[1];
|
||||
$(this).html(newMeterContent);
|
||||
}
|
||||
});
|
||||
$("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 html = $(this).html() + '<div style="position:absolute;right:0;top:0">' + matchResult[1] + '</div>';
|
||||
$(this).html(html);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var setup = function() {
|
||||
|
||||
23
style.css
23
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 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user