DIM: Make Compare Stats Bars

README.md

DIM: Make Visual BARS for Comparing ARMOR

I made this quick JS console script because I'm pretty bad at comparing things without visuals. Maybe eventually I'll make a PR on DIM so this can be a toggle-able option. For now, here's the raw script and some instructions!

FWIW, I'm on beta.destinyitemmanager.com; don't know if the OG has different markup. YMMV if you use on the original.

• Caroline / Knilly line
• 🐦@clineamb // 🎮 ttv/knillyline

🔖 BOOKMARKLET VERSION (EASY WAY)

If you use a bookmark bar, this should make executing the script easy~!

1. Go to chriszarate.github.io/bookmarkleter and copy paste the script below.
2. Follow the instructions to get the bookmarklet.
3. After comparing ARMOR, hit the bookmarklet!

🐱‍💻 THE LONG WAY

1. Get to your Inspector/Browser Console (in Chrome, it's Ctrl + Shift + I -> "Console" Tab)
2. FIRST find stuff to COMPARE in DIM.
3. THEN copy-paste the script below and hit enter.

script.js

// If you know JS/CSS edit as you'll like. This is quick & dirty.
// THE COPY PASTA

const COMPARE_BAR_COLOR = '#3c3b59'; // change for another color. google "color picker"

function itemImageOnHover(item) {
  if(item.target) {
    item.target.style.opacity = 1;
  }
}
function itemImageOutHover(item) {
  if(item.target) {
    item.target.style.opacity = 0.5;
  }
}
document.querySelectorAll('.compare-item:not(.fixed-left)').forEach((ci) => {
  for(let i = 0; i < ci.children.length; i++) {
    let _cn = ci.children[i];
    if(_cn.className === 'itemAside') {
        _cn.style.opacity = 0.5;
        _cn.addEventListener('mouseenter', (item) => itemImageOnHover(item));
        _cn.addEventListener('mouseleave', (item) => itemImageOutHover(item));
    } else if(i > 4 && i < 11) {
        let statEl = _cn.firstChild;
        let statVal = statEl.innerText;
        let percent = `${(parseInt(statVal) / 50) * 100}%`;
        statEl.style.display = 'inline-block';
        statEl.style.backgroundColor = COMPARE_BAR_COLOR;
        statEl.style.width = percent;
        statEl.style.textAlign = 'right';
        statEl.style.border = '0 0 1px 0 solid #ccc';
    }
  }
});