MobTaxonomy.js

/* Create the needed elements to hold the data. */
$('h2:contains("Taxonomy")').after('<br><br><h2 id="notableNPCs" style="display:none;"><span>Notable NPCs</span></h2>')
    .after('<div id="taxonomyContainer"><canvas id="relatedMobs" width="800" height="600"></canvas></div>');

console.dir(stratics.data.mobs);
/* What mob are we dealing with? */
let mobs = stratics.data.mobs,
    mobType = $('#mobileName').text();
if (!mobType) {
    mobType = document.location.search.split(':')[1].replace(/ \((?:Centaur|creature|monster)\)/, '');
}
let family = mobs[mobType].family;


/* Create the orgchart. */
let o = new orgChart();

o.setColor('#111', '#FFFF99', '#000', '#1E90FF');
o.setNodeStyle(1, 10, 2);
o.setFont('arial', 14, '#000', 'c');
o.setSize(120, 40, 40, 30);
o.setColor('#3388DD', '#DAA520');

/* Populate the orgchart. */
let countMobs = (name, info) => {
    if (!mobs[info.parent].kids) {
        mobs[info.parent].kids = 0;
    }
    mobs[info.parent].kids++;
};

let mobTreeData = {},
    NPCs = {},
    matcher = new RegExp(`(?:,|^)${family}(?:,|$)`);

let addMob = (name, info) => {
    if (!mobTreeData[name]) {
        mobTreeData[name] = {
            name,
            parent: info.parent,
            page: !!info.page.length ? info.page : name
        };
    }
    if (info.parent.length && name !== info.parent) { // Climb the family tree; stop if we're at the top.
        addMob(info.parent, mobs[info.parent]);
    }
};

for (let x in mobs) {
    if (mobs[x].family.match(matcher)) {
        if (parseInt(mobs[x].bluename, 10)) {
            NPCs[x] = mobs[x];
        } else {
            countMobs(x, mobs[x]);
        }
    }
}

for (let x in mobs) {
    if (mobs[x].family.match(matcher)) {
        if (!parseInt(mobs[x].bluename, 10)) {
            addMob(x, mobs[x]);
        }
    }
}

for (let x in mobTreeData) {
    if (mobTreeData.hasOwnProperty(x)) {
        let y = mobTreeData[x],
            dir = 'u';
        if (!!mobs[y.parent] && mobs[y.parent].kids > 1) {
            if (!mobs[y.parent].counter) {
                mobs[y.parent].counter = 0;
            }
            let counter = (mobs[y.parent].counter++ % 2);
            dir = !counter ? 'r' : 'l';
        }

        // Tweaks to improve the look of the resulting trees.
        if (['Red Solen', 'Gray Goblin', 'Gray Goblin Mage', 'Leather Wolf'].includes(x)) dir = 'r';
        if (y.parent == 'Korpre') dir = 'u';

        if (mobType === x) { // 'Highlight' if the current mob being handled is the same as the mob for this page
            o.setColor('#3388DD', '#1E90FF');
        }
        o.addNode(y.name, y.parent, dir, y.name, 0, `http://community.stratics.com/w/index.php?title=UO:${y.page}`);
        o.setColor('#3388DD', '#DAA520'); // Reset the colors
    }
}

/* Render the orgchart. */
o.drawChart('relatedMobs', 'c', true);

/* Scale the orgchart to fit the contents. */
let tc = '#taxonomyContainer';
let $tc = $(tc);
let $canvas = $(`${tc} canvas`);
let ratio = $(tc).width() / $canvas.width();
if (ratio < 1) {
    $tc.css({
        transform: `scale(${ratio})`,
        'image-rendering': '-webkit-optimize-contrast',
        '-ms-interpolation-mode': 'nearest-neighbor'
    }).css({
        'image-rendering': '-moz-crisp-edges'
    }).css({
        'image-rendering': '-o-crisp-edges'
    }).css({
        'image-rendering': 'optimize-contrast'
    }).css({
        'image-rendering': 'crisp-edges',
        marginLeft: `${$tc.parent().offset().left - $tc.offset().left}px`
    });
}