MediaWiki:Common.js

// --- DROPRATE CALCULATOR WITH TABLE AND DROPRATES.JS ---
mw.hook('wikipage.content').add(function () {
    var container = document.getElementById("dropCalcContainer");
    if (!container) return;

    // Build HTML: Table
    container.innerHTML =
        '<table id="dropCalcTable" style="border-collapse: collapse; width: 100%; max-width: 500px;">' +
        '<thead></thead><tbody></tbody></table>' +
        '<br><button id="calcDropBtn">Calculate Drop Rate</button>' +
        '<div style="margin-top:10px;">Final Drop Rate: <span id="finalDrop">0</span></div>';

    var table = document.getElementById("dropCalcTable");
    var header = table.createTHead();
    var headerRow = header.insertRow();

    headerRow.innerHTML =
        '<th style="padding-left: 10px;">Bonus</th>' +
        '<th>Percentage</th>' +
        '<th>Drop Rate</th>';

    headerRow.style.background = '#222e45';
    headerRow.style.color = '#fff';
    headerRow.style.fontWeight = 'bold';
    headerRow.style.textAlign = 'left';

    var tbody = table.tBodies[0];

    // Bonus options
    var bonuses = [
        {
            name: "Donator Rank",
            id: "donatorBonus",
            options: [
                {name: "None", value:0},
                {name: "Donator 15%", value:15},
                {name: "Super Donator 25%", value:25},
                {name: "Extreme Donator 30%", value:30},
                {name: "Legendary Donator 35%", value:35},
                {name: "Royal Donator 40%", value:40},
                {name: "Divine Donator 45%", value:45}
            ]
        },
        {
            name: "Monster Slayer Perk",
            id: "slayerBonus",
            options: [
                {name:"None", value:0},
                {name:"10%", value:10}
            ]
        },
        {
            name: "Collector's Ring",
            id: "ringBonus",
            options: [
                {name:"None", value:0},
                {name:"3%", value:3},
                {name:"6%", value:6}
            ]
        },
        {
            name: "Skull Bonus",
            id: "skullBonus",
            options: [
                {name:"None", value:0},
                {name:"20%", value:20}
            ]
        },
        {
            name: "Voting Bonus",
            id: "voteBonus",
            options: [
                {name:"None", value:0},
                {name:"20%", value:20}
            ]
        }
    ];

    // Populate table rows
    for (var i = 0; i < bonuses.length; i++) {
        var bonus = bonuses[i];
        var row = tbody.insertRow();
        row.style.background = i % 2 === 0 ? '#313e59' : '#222e45';

        // Bonus name
        var cell1 = row.insertCell();
        cell1.textContent = bonus.name;
        cell1.style.padding = '5px';

        // Dropdown
        var cell2 = row.insertCell();
        var select = document.createElement('select');
        select.id = bonus.id;
        for (var j = 0; j < bonus.options.length; j++) {
            var opt = bonus.options[j];
            var option = document.createElement('option');
            option.value = opt.value;
            option.textContent = opt.name;
            select.appendChild(option);
        }
        cell2.appendChild(select);
        cell2.style.padding = '5px';

        // Preview cell
        var cell3 = row.insertCell();
        cell3.id = bonus.id + "Preview";
        cell3.textContent = "-";
        cell3.style.padding = '5px';
    }

    // Searchable item selector
    var baseDiv = document.createElement('div');
    baseDiv.style.margin = '10px 0';
    baseDiv.innerHTML =
        'Item: <input list="dropItems" id="itemSearch" placeholder="Search item..." style="width:220px;"> ' +
        'Base Rate: <input type="number" id="baseRate" value="1000" style="width:80px;">' +
        '<datalist id="dropItems"></datalist>';
    container.insertBefore(baseDiv, table);

    var dataList = document.getElementById("dropItems");

    // Populate from droprates.js
    if (typeof dropRates !== "undefined") {
        for (var k = 0; k < dropRates.length; k++) {
            var item = dropRates[k];
            var option = document.createElement("option");
            option.value = item.name + " (1/" + item.rate + ")";
            option.setAttribute("data-rate", item.rate);
            dataList.appendChild(option);
        }
    }

    // Auto-fill base rate when selecting an item
    var itemInput = document.getElementById("itemSearch");
    itemInput.onchange = function() {
        var options = dataList.options;
        for (var l = 0; l < options.length; l++) {
            if (options[l].value === itemInput.value) {
                document.getElementById("baseRate").value = options[l].getAttribute("data-rate");
                break;
            }
        }
    };

    // Calculation
    document.getElementById("calcDropBtn").onclick = function() {
        var base = parseFloat(document.getElementById("baseRate").value) || 0;
        var finalRate = base;

        for (var m = 0; m < bonuses.length; m++) {
            var bonusVal = parseFloat(document.getElementById(bonuses[m].id).value) || 0;
            finalRate *= (1 - bonusVal / 100);
            document.getElementById(bonuses[m].id + "Preview").textContent = Math.floor(finalRate);
        }

        document.getElementById("finalDrop").textContent = Math.floor(finalRate);
    };
});