more work for #179.
Due to changed display of the portal image it now doesn’t flicker anymore, which simplifies code a lot.
This commit is contained in:
Stefan Breunig
parent
43d9251c57
commit
2023e33567
@ -274,7 +274,7 @@ function boot() {
|
||||
// sidebar is now at final height. Adjust scrollwrapper so scrolling
|
||||
// is possible for small screens and it doesn’t block the area below
|
||||
// it.
|
||||
$('#scrollwrapper').css('max-height', $('#sidebar').get(0).scrollHeight + 'px');
|
||||
$('#scrollwrapper').css('max-height', ($('#sidebar').get(0).scrollHeight+3) + 'px');
|
||||
|
||||
// workaround for #129. Not sure why this is required.
|
||||
setTimeout('window.map.invalidateSize(false);', 500);
|
||||
|
||||
@ -33,24 +33,14 @@ window.renderPortalDetails = function(guid) {
|
||||
var linkedFields = ['fields', d.portalV2.linkedFields.length];
|
||||
|
||||
// collect and html-ify random data
|
||||
var randDetails = [playerText, sinceText, getRangeText(d), getEnergyText(d), linksText, getAvgResoDistText(d), linkedFields, getDestroyAP(d)];
|
||||
randDetails = randDetails.map(function(detail) {
|
||||
if(!detail) return '';
|
||||
detail = '<aside>'+detail[0]+'<span>'+detail[1]+'</span></aside>';
|
||||
return detail;
|
||||
}).join('\n');
|
||||
var randDetails = [
|
||||
playerText, sinceText, getRangeText(d), getEnergyText(d),
|
||||
linksText, getAvgResoDistText(d), linkedFields, getDestroyAP(d)
|
||||
];
|
||||
randDetails = '<table id="randdetails">' + genFourColumnTable(randDetails) + '</table>';
|
||||
|
||||
var resoDetails = '<table id="resodetails">' + getResonatorDetails(d) + '</table>';
|
||||
|
||||
// replacing causes flicker, so if the selected portal does not
|
||||
// change, only update the data points that are likely to change.
|
||||
if(update) {
|
||||
console.log('Updating portal details');
|
||||
$('#level').text(Math.floor(getPortalLevel(d)));
|
||||
$('.mods').html(getModDetails(d));
|
||||
$('#randdetails').html(randDetails);
|
||||
$('#resodetails').html(getResonatorDetails(d));
|
||||
$('#portaldetails').attr('class', TEAM_TO_CSS[getTeam(d)]);
|
||||
} else {
|
||||
console.log('exchanging portal details');
|
||||
setPortalIndicators(d);
|
||||
var img = d.imageByUrl && d.imageByUrl.imageUrl ? d.imageByUrl.imageUrl : DEFAULT_PORTAL_IMG;
|
||||
|
||||
@ -69,14 +59,13 @@ window.renderPortalDetails = function(guid) {
|
||||
+ '<span id="level">'+Math.floor(getPortalLevel(d))+'</span>'
|
||||
+ '</div>'
|
||||
+ '<div class="mods">'+getModDetails(d)+'</div>'
|
||||
+ '<div id="randdetails">'+randDetails+'</div>'
|
||||
+ '<div id="resodetails">'+getResonatorDetails(d)+'</div>'
|
||||
+ randDetails
|
||||
+ resoDetails
|
||||
+ '<div class="linkdetails">'
|
||||
+ '<aside><a href="'+perma+'">portal link</a></aside>'
|
||||
+ '<aside><a onclick="window.reportPortalIssue()">report issue</a></aside>'
|
||||
+ '</div>'
|
||||
);
|
||||
}
|
||||
|
||||
// try to resolve names that were required for above functions, but
|
||||
// weren’t available yet.
|
||||
|
||||
@ -77,18 +77,18 @@ window.getAvgResoDistText = function(d) {
|
||||
}
|
||||
|
||||
window.getResonatorDetails = function(d) {
|
||||
var resoDetails = '';
|
||||
var resoDetails = [];
|
||||
// octant=slot: 0=E, 1=NE, 2=N, 3=NW, 4=W, 5=SW, 6=S, SE=7
|
||||
// resos in the display should be ordered like this:
|
||||
// N NE Since the view is displayed in columns, they
|
||||
// NW E need to be ordered like this: N, NW, W, SW, NE,
|
||||
// W SE E, SE, S, i.e. 2 3 4 5 1 0 7 6
|
||||
// SW S
|
||||
$.each([2, 3, 4, 5, 1, 0, 7, 6], function(ind, slot) {
|
||||
var isLeft = slot >= 2 && slot <= 5;
|
||||
|
||||
$.each([2, 1, 3, 0, 4, 7, 5, 6], function(ind, slot) {
|
||||
var reso = d.resonatorArray.resonators[slot];
|
||||
if(!reso) {
|
||||
resoDetails += renderResonatorDetails(slot, 0, 0, null, null, isLeft);
|
||||
resoDetails.push(renderResonatorDetails(slot, 0, 0, null, null));
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -100,16 +100,16 @@ window.getResonatorDetails = function(d) {
|
||||
// naming will still be correct.
|
||||
slot = parseInt(reso.slot);
|
||||
|
||||
resoDetails += renderResonatorDetails(slot, l, v, dist, nick, isLeft);
|
||||
resoDetails.push(renderResonatorDetails(slot, l, v, dist, nick));
|
||||
});
|
||||
return resoDetails;
|
||||
return genFourColumnTable(resoDetails);
|
||||
}
|
||||
|
||||
// helper function that renders the HTML for a given resonator. Does
|
||||
// not work with raw details-hash. Needs digested infos instead:
|
||||
// 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, isLeft) {
|
||||
window.renderResonatorDetails = function(slot, level, nrg, dist, nick) {
|
||||
if(level === 0) {
|
||||
var meter = '<span class="meter" title="octant:\t' + OCTANTS[slot] + '"></span>';
|
||||
} else {
|
||||
@ -130,11 +130,9 @@ window.renderResonatorDetails = function(slot, level, nrg, dist, nick, isLeft) {
|
||||
|
||||
var fill = '<span style="'+style+'"></span>';
|
||||
|
||||
var meter = '<span class="meter meter-rel" title="'+inf+'">' + fill + lbar + '</span>';
|
||||
var meter = '<span class="meter" title="'+inf+'">' + fill + lbar + '</span>';
|
||||
}
|
||||
var cls = isLeft ? 'left' : 'right';
|
||||
var text = '<span class="meter-text '+cls+'">'+(nick||'')+'</span>';
|
||||
return (isLeft ? text+meter : meter+text) + '<br/>';
|
||||
return [meter, nick || ''];
|
||||
}
|
||||
|
||||
// calculate AP gain from destroying portal
|
||||
|
||||
@ -216,3 +216,15 @@ window.uniqueArray = function(arr) {
|
||||
return $.inArray(v, arr) === i;
|
||||
});
|
||||
}
|
||||
|
||||
window.genFourColumnTable = function(blocks) {
|
||||
var t = $.map(blocks, function(detail, index) {
|
||||
if(!detail) return '';
|
||||
if(index % 2 === 0)
|
||||
return '<tr><td>'+detail[1]+'</td><th>'+detail[0]+'</th>';
|
||||
else
|
||||
return ' <th>'+detail[0]+'</th><td>'+detail[1]+'</td></tr>';
|
||||
}).join('');
|
||||
if(t.length % 2 === 1) t + '<td></td><td></td></tr>';
|
||||
return t;
|
||||
}
|
||||
|
||||
139
style.css
139
style.css
@ -369,12 +369,13 @@ h2 sup, h2 sub {
|
||||
input {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: #ffce00;
|
||||
height: 21px;
|
||||
line-height: 22px;
|
||||
padding: 0 4px;
|
||||
height: 24px;
|
||||
padding:3px 4px 1px 4px;
|
||||
font-size: 14px;
|
||||
border:0;
|
||||
font-family:inherit;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -428,9 +429,11 @@ h3 {
|
||||
|
||||
/* portal mods */
|
||||
.mods {
|
||||
margin-bottom: 1px;
|
||||
margin-top: 5px;
|
||||
margin: 5px auto 1px auto;
|
||||
padding: 0 2px;
|
||||
width: 296px;
|
||||
height: 75px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mods span {
|
||||
@ -440,12 +443,12 @@ h3 {
|
||||
* as that’s solved by setting height on .mods. */
|
||||
display: block;
|
||||
float:left;
|
||||
height: 63.7px;
|
||||
margin-left: 4px;
|
||||
height: 64px;
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
width: 63.7px;
|
||||
width: 64px;
|
||||
cursor:help;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
@ -461,84 +464,75 @@ h3 {
|
||||
border: 1px solid #017f01;
|
||||
}
|
||||
|
||||
/* random details list */
|
||||
#randdetails {
|
||||
margin: 0 4px;
|
||||
margin-top: 11px;
|
||||
/* random details, resonator details */
|
||||
#randdetails, #resodetails {
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 4px;
|
||||
table-layout: fixed;
|
||||
border-spacing: 0m;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
aside {
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
aside span {
|
||||
#randdetails td, #resodetails td {
|
||||
overflow: hidden;
|
||||
text-overflow: "~";
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
width: 74px;
|
||||
width: 50%;
|
||||
width: calc(50% - 62px);
|
||||
}
|
||||
|
||||
aside:nth-child(odd) {
|
||||
margin-right: 4px;
|
||||
#randdetails th, #resodetails th {
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
width: 62px;
|
||||
padding-right:4px;
|
||||
padding-left:4px;
|
||||
}
|
||||
|
||||
aside:nth-child(even) {
|
||||
margin-left: 4px;
|
||||
#randdetails th + th, #resodetails th + th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
aside:nth-child(even) span {
|
||||
float: right;
|
||||
padding-left: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
aside:nth-child(odd) span {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
#randdetails td:first-child, #resodetails td:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
#randdetails {
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
|
||||
#randdetails tt {
|
||||
font-family: inherit;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
|
||||
/* resonators */
|
||||
#resodetails {
|
||||
white-space: nowrap;
|
||||
margin: 16px 0;
|
||||
-moz-column-gap: 10px;
|
||||
-moz-column-width: 141px;
|
||||
-webkit-column-gap: 10px;
|
||||
-webkit-column-width: 141px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.meter {
|
||||
background: #000;
|
||||
cursor: help;
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
padding: 1px;
|
||||
width: 58px;
|
||||
}
|
||||
|
||||
.meter-text {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
margin: 0 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: "~";
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.meter-text.left {
|
||||
text-align: right;
|
||||
padding: 1px;
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.meter span {
|
||||
@ -546,36 +540,39 @@ aside:nth-child(odd) span {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.meter-rel {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.meter-level {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 25px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
text-shadow: 0.0em 0.0em 0.3em #808080;
|
||||
}
|
||||
/* links below resos */
|
||||
|
||||
.linkdetails {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.linkdetails aside {
|
||||
margin: 0 4px;
|
||||
width: 140px;
|
||||
|
||||
aside {
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
width: 50%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
}
|
||||
aside + aside {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#toolbox {
|
||||
padding: 4px;
|
||||
padding: 4px 2px;
|
||||
font-size:90%;
|
||||
}
|
||||
|
||||
#toolbox > a {
|
||||
padding: 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* a common portal display takes this much space (prevents moving
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user