MediaWiki:Common.js

// Load the droprates.js page first
mw.loader.load('/index.php?title=MediaWiki:Droprates.js&action=raw&ctype=text/javascript');

// --- DROPRATE CALCULATOR WITH TABLE USING 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: 600px;">' +
        '<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 definitions
    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
    bonuses.forEach(function(bonus,index){
        var row = tbody.insertRow();
        row.style.background = index % 2 === 0 ? '#313e59' : '#222e45';
        var cell1 = row.insertCell(); cell1.textContent = bonus.name; cell1.style.padding='5px';
        var cell2 = row.insertCell(); var select = document.createElement('select'); select.id=bonus.id;
        bonus.options.forEach(function(opt){var option=document.createElement('option'); option.value=opt.value; option.textContent=opt.name; select.appendChild(option);});
        cell2.appendChild(select); cell2.style.padding='5px';
        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:250px;"> ' +
        'Base Rate: <input type="number" id="baseRate" value="1000" style="width:80px;">' +
        '<datalist id="dropItems"></datalist>';
    container.insertBefore(baseDiv, table);

    // Populate datalist with DROPRATES
    var dataList = document.getElementById("dropItems");
    if (typeof DROPRATES !== "undefined") {
        DROPRATES.forEach(function(item){
            var option = document.createElement('option');
            option.value = item[0] + ' (1/' + item[1] + ')';
            option.dataset.rate = item[1];
            dataList.appendChild(option);
        });
    }

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

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

        bonuses.forEach(function(bonus){
            var val = parseFloat(document.getElementById(bonus.id).value) || 0;
            finalRate *= (1 - val / 100);
            document.getElementById(bonus.id + "Preview").textContent = Math.floor(finalRate);
        });

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