MediaWiki:MobTaxonomy.js

(function () {

/* Create the needed elements to hold the data. */
$('h2:contains("Taxonomy")').after(`
<span style="font-size: 150%;font-weight: 900;"><span id="taxonomyGroupA" class="translatable">Group</span>: <span id="taxonomyGroupB"></span></span>
<br>
<br>
<span id="taxonomyNote" class="translatable">Click and drag left or right to scroll within the taxonomy tree.</span>
<div id="taxonomyContainer" class="crispImages grabbable">
    <canvas id="relatedMobs" width="800" height="600"></canvas>
</div>`).before(`
<br>
<br>
<h2 id="notableNPCs" style="display:none;">
    <span id="Notables" class="translatable">Notable Related NPCs</span>
</h2>`);

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

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

o.setColor('#111', '#FFFF99', '#000', '#1E90FF');
o.setNodeStyle(1, 10, 2);
o.setFont('arial', 13, '#000', 'c');
o.setSize(110, 35, 35, 25);
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 matcher = new RegExp(`(?:,|^)${family}(?:,|$)`),
    mobTreeData = stratics.data.mobTreeData = {},
    NPCs = stratics.data.NPCs = {};

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)) {
            if (!NPCs[mobs[x].parent]) {
                NPCs[mobs[x].parent] = {};
            }
            NPCs[mobs[x].parent][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 (['Drake'].includes(x)) dir = 'l';
        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');
        }
        if (stratics.data.categoryMobs.includes(x)) { // Grey-out mob entries that only are categories, not actual mobs themselves.
            o.setColor('#3388DD', '#D9D9D9');
            o.addNode(y.name, y.parent, dir, y.name);
        } else {
            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
    }
}

/* Store the width *before* adding the canvas. */
let divWidth = $('#mw-content-text').width();
$('#taxonomyContainer').css({
    overflow: 'hidden',
    width: divWidth
})

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

/* Make the canvas draggable */
$('#taxonomyContainer').on({
    mousedown: function(click) {
        origX = click.pageX + $(this).scrollLeft();
        $(this).on({
            mousemove: function(e) {
                curX = e.pageX + $(this).scrollLeft();
                var diff = (origX - curX);
                var newpos = $(this).scrollLeft() + diff;
                if (newpos > ($('canvas').width() - $(this).width())) {
                    newpos = ($('canvas').width() - $(this).width());
                }
                if (newpos < 0) {
                    newpos = 0;
                }
                $(this).scrollLeft(newpos);
            }
        });
    },
    mouseleave: function() {
        $(this).off('mousemove');
    },
    mouseup: function() {
        $(this).off('mousemove');
    },
    click: function() {
        $(this).off('mousemove');
    }
});

/* Build the list of notable NPCs. */
if (Object.keys(stratics.data.NPCs).length > 0) {
    let $notables = $('<div style="margin-left:3%;">');
    for (let x in stratics.data.NPCs) {
        if (stratics.data.NPCs.hasOwnProperty(x)) {
            let $ul = $('<ul style="list-style-type:none;list-style-image:none;">');
            for (let y in stratics.data.NPCs[x]) {
                if (stratics.data.NPCs[x].hasOwnProperty(y)) {
                    let entry = stratics.data.NPCs[x][y];
                    let page = !!entry.page.length ? entry.page : y;
                    $ul.append(`<li><a href="${`http://community.stratics.com/w/index.php?title=UO:${page}`}">${y}</a></li>`);
                }
            }
            $notables.append(`<span style="font-size:140%;color:goldenrod;">${x}s:</span>`).append($ul).append('<br>');
        }
    }

    /* Add the list of notable NPCs. */
    $('#notableNPCs').after($notables).show();

    /* Update the table of contents */
    $('.toclevel-2:last span:first').text('1.6');
    $('.toclevel-2:last').before(`<li class="toclevel-2"><a href="/w/index.php${thisPage}#Notables"><span class="tocnumber">1.5</span> <span class="toctext">Noteable Related NPCs</span></a></li>`);
    $('.toclevel-1').parent().css('margin', '7px');
}

}());