Adds sorting to "filter-ship" elements using dropdown id="typeSelectDiv", "nationSelectDiv", or "raritySelectDiv"

(Filter)AzurLane-Common.js

var shipsToFilter = {}; // All ships containing "filter-ship"
var types = ["Aircraft Carrier","Battleship","Light Aircraft Carrier","Repair Ship","Submarine","Monitor","Destroyer","Battlecruiser","Heavy Cruiser","Light Cruiser"]; //List of ship types
var nations = ["Vichya Dominion","Eastern Radiance","Bilibili","Iris Libre","Ironblood","North Union","Neptunia","Eagle Union","Sakura Empire","Universal","Royal Navy"]; //List of ship nations
var rarities = ["Normal","Rare","Elite","Priority","Super Rare","Legendary"]; //List of ship rarities

// mediawiki ships with jQuery, how nice!
$(document).ready(function() {
    shipsToFilter = document.getElementsByClassName("filter-ship");
    createDropdowns();
});

// Checks for three unique ids on the page and creates select option menus for them
function createDropdo wns() {
    var typeSelect = document.getElementById('typeSelectDiv');
    var nationSelect = document.getElementById('nationSelectDiv');
    var raritySelect  = document.getElementById('raritySelectDiv');
    
    if(typeSelect) {
        var html = "<select id=\"typeSelect\" name=\"typeSelect\" class=\"form-control\" onchange=\"filter()\">";
        html += "<option value=\"\" selected=\"selected\">Type</option>";
        for (var i = 0; i < types.length; i++){
            html += "<option value=\""+types[i]+"\">"+types[i]+"</option>";
        }
        html += "</select>";
        typeSelect.innerHTML = html;
    }
    if(nationSelect) {
        var html = "<select id=\"nationSelect\" name=\"nationSelect\" class=\"form-control\" onchange=\"filter()\">";
        html += "<option value=\"\" selected=\"selected\">Nation</option>";
        for (var i = 0; i < nations.length; i++){
            html += "<option value=\""+nations[i]+"\">"+nations[i]+"</option>";
        }
        html += "</select>";
        nationSelect.innerHTML = html;
    }
    if(raritySelect) {
        var html = "<select id=\"raritySelect\" name=\"raritySelect\" class=\"form-control\" onchange=\"filter()\">";
        html += "<option value=\"\" selected=\"selected\">Rarity</option>";
        for (var i = 0; i < rarities.length; i++){
            html += "<option value=\""+rarities[i]+"\">"+rarities[i]+"</option>";
        }
        html += "</select>";
        raritySelect.innerHTML = html;
    }
}

//filters all ships
function filter() {
    var typeFilter = document.getElementById("typeSelect").value;
    var nationFilter = document.getElementById("nationSelect").value;
    var rarityFilter = document.getElementById("raritySelect").value;
    
    //A bit ugly, but it's basically saying if filters is empty then make everything visble.
    if (!typeFilter && !nationFilter && !rarityFilter) {
        for (var i = 0; i < shipsToFilter.length; i++) setInvisible(shipsToFilter[i], false);

    } else {
        for (var i = 0; i < shipsToFilter.length; i++) {
            var type = shipsToFilter[i].getAttribute("data-type");
            var nation = shipsToFilter[i].getAttribute("data-nation");
            var rarity = shipsToFilter[i].getAttribute("data-rarity");
            // check type and set the correct attribute
            if (matchFilter([type,nation,rarity],[typeFilter,nationFilter,rarityFilter])) {
                setInvisible(shipsToFilter[i], false);
            } else {
                setInvisible(shipsToFilter[i], true);
            }
        }
    }
}

// Returns true only if all filter conditions f match it's respective value v
function matchFilter(v, f) {
    if (typeof(v) == "undefined" || typeof(f) == "undefined") return false;
    if (!Array.isArray(v) || !Array.isArray(f)) return false;
    if (v.length != f.length) return false;
    var match = true;
    for (var i = 0; i < v.length; i++) {
        if (f[i] && f[i] != v[i]) match = false;
    }
    return match;
}

// Hide or unhide target element e, based on the boolean apply flag
function setInvisible(e, apply) {
    if (typeof(e) != "object" || typeof(apply) != "boolean") return;
    if (!apply) {
        e.style.display = "";
    } else {
        e.style.display = "none";
    }
}