Dashboard level ladder: show POL upgrade cost under each level (live from contract, USD in tooltip)
This commit is contained in:
+9
-1
@@ -380,11 +380,19 @@
|
||||
function renderNextStep(d){
|
||||
const el=document.getElementById('dNextStep');if(!el)return;
|
||||
const ns=d.nextStep||{},lvl=d.level||1;
|
||||
// Per-level upgrade cost: upgradeCosts[tier][k] = POL to go from level k+1
|
||||
// to k+2, so the cost to REACH level L is index L-2. Scintilla (L1) is the
|
||||
// entry level, not an upgrade.
|
||||
const upc=(d.upgradeCosts&&d.upgradeCosts[d.tier===2?2:1])||[];
|
||||
const ladder=LEVELS.map((nm,i)=>{
|
||||
const L=i+1;let cls='nlv';
|
||||
if(L<lvl)cls+=' done';else if(L===lvl)cls+=' you';else if(ns.kind==='upgrade'&&L===ns.nextLevel)cls+=' next';
|
||||
const tag=L===lvl?'<span class="nlvt">YOU</span>':(ns.kind==='upgrade'&&L===ns.nextLevel?'<span class="nlvt">NEXT</span>':'');
|
||||
return `<div class="${cls}">${tag}<span class="nlvn">${nm}</span></div>`;
|
||||
const cost=L===1?null:upc[L-2];
|
||||
const costTxt=L===1?'entry level':(cost?fmt(cost)+' POL':'');
|
||||
const usd=(cost&&d.polUsd>0)?' title="≈ $'+Math.round(cost*d.polUsd).toLocaleString()+' to reach '+nm+'"':'';
|
||||
const costLine=costTxt?`<span class="nlvc"${usd}>${costTxt}</span>`:'';
|
||||
return `<div class="${cls}">${tag}<span class="nlvn">${nm}</span>${costLine}</div>`;
|
||||
}).join('');
|
||||
let head='',body='',badge='';
|
||||
if(ns.kind==='qualify'){
|
||||
|
||||
@@ -99,6 +99,8 @@ a{color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.nav{heigh
|
||||
.nladder{display:flex;gap:6px}
|
||||
.nlv{flex:1;text-align:center;background:#0d2135;border:1px solid #203c53;border-radius:9px;padding:9px 3px;position:relative}
|
||||
.nlv .nlvn{font-size:11.5px;font-weight:700;color:#b7c6d5;line-height:1.1;display:block}
|
||||
.nlv .nlvc{display:block;font-size:9.5px;font-weight:700;color:#7f93a3;line-height:1.1;margin-top:3px;white-space:nowrap}
|
||||
.nlv.you .nlvc{color:#3a2e12}.nlv.next .nlvc{color:#8fded6}
|
||||
.nlv.done{opacity:.5}
|
||||
.nlv.you{background:linear-gradient(160deg,#f3be43,#f7d074);border-color:#f3be43}.nlv.you .nlvn{color:#14202e}
|
||||
.nlv.next{background:rgba(78,214,203,.12);border:1.5px solid var(--teal)}.nlv.next .nlvn{color:#7fe9df}
|
||||
|
||||
Reference in New Issue
Block a user