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){
|
function renderNextStep(d){
|
||||||
const el=document.getElementById('dNextStep');if(!el)return;
|
const el=document.getElementById('dNextStep');if(!el)return;
|
||||||
const ns=d.nextStep||{},lvl=d.level||1;
|
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 ladder=LEVELS.map((nm,i)=>{
|
||||||
const L=i+1;let cls='nlv';
|
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';
|
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>':'');
|
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('');
|
}).join('');
|
||||||
let head='',body='',badge='';
|
let head='',body='',badge='';
|
||||||
if(ns.kind==='qualify'){
|
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}
|
.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{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 .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.done{opacity:.5}
|
||||||
.nlv.you{background:linear-gradient(160deg,#f3be43,#f7d074);border-color:#f3be43}.nlv.you .nlvn{color:#14202e}
|
.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}
|
.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