MediaWiki:Common.js

// --- DROPRATE CALCULATOR WITH TABLE ---
mw.hook('wikipage.content').add(function () {

    var container = document.getElementById("dropCalcContainer");
    if (!container) return;

    // Build 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];

    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}
            ]
        }
    ];

    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';

    });

    // --- ITEM SEARCH USING DROPRATES.JS ---

    var baseDiv = document.createElement('div');
    baseDiv.style.margin = '10px 0';

    baseDiv.innerHTML =
        'Item: <input type="text" id="itemSearch" placeholder="Search item..." style="width:220px;"> ' +
        'Base Rate: <input type="number" id="baseRate" value="1000" style="width:80px;">' +
        '<div id="itemResults" style="background:#1b2335;max-width:220px;"></div>';

    container.insertBefore(baseDiv, table);

    var search = document.getElementById("itemSearch");
    var results = document.getElementById("itemResults");

    search.oninput = function(){

        var text = search.value.toLowerCase();
        results.innerHTML = "";

        if (!text) return;

        DROPRATES.forEach(function(item){

            if(item[0].toLowerCase().indexOf(text) !== -1){

                var div = document.createElement("div");

                div.textContent = item[0] + " (1/" + item[1] + ")";
                div.style.padding = "4px";
                div.style.cursor = "pointer";

                div.onclick = function(){

                    document.getElementById("baseRate").value = item[1];
                    search.value = item[0];
                    results.innerHTML = "";

                };

                results.appendChild(div);
            }

        });

    };

    // --- 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);

    };

});