diff --git a/public/my.js b/public/my.js index 7e9d2fd..d329bbc 100644 --- a/public/my.js +++ b/public/my.js @@ -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(LYOU':(ns.kind==='upgrade'&&L===ns.nextLevel?'NEXT':''); - return `
${tag}${nm}
`; + 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?`${costTxt}`:''; + return `
${tag}${nm}${costLine}
`; }).join(''); let head='',body='',badge=''; if(ns.kind==='qualify'){ diff --git a/public/styles.css b/public/styles.css index 6c7bffc..63102cb 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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}