Dashboard level ladder: show POL upgrade cost under each level (live from contract, USD in tooltip)

This commit is contained in:
martbost
2026-08-26 05:22:30 -05:00
parent 6cf78a37b7
commit b923bc18bc
2 changed files with 11 additions and 1 deletions
+9 -1
View File
@@ -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'){
+2
View File
@@ -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}