MediaWiki:Common.js

// --- DROPRATE CALCULATOR (ES5 Table Version) ---
mw.hook('wikipage.content').add(function () {
    var container = document.getElementById("dropCalcContainer");
    if (!container) return;

    // Build calculator HTML using string concatenation (ES5-safe)
    var html = '';
    html += '<table style="border-collapse:collapse;margin:10px 0;width:400px;">';
    html += '<tr><td>Base Drop Rate:</td><td><input type="number" id="baseRate" value="1000" style="width:80px;"></td></tr>';

    html += '<tr><td>Donator Rank Bonus:</td><td>';
    html += '<select id="donatorBonus">';
    html += '<option value="0">None</option>';
    html += '<option value="15">Donator 15%</option>';
    html += '<option value="25">Super Donator 25%</option>';
    html += '<option value="30">Extreme Donator 30%</option>';
    html += '<option value="35">Legendary Donator 35%</option>';
    html += '<option value="40">Royal Donator 40%</option>';
    html += '<option value="45">Divine Donator 45%</option>';
    html += '</select></td></tr>';

    html += '<tr><td>Monster Slayer Perk:</td><td>';
    html += '<select id="slayerBonus">';
    html += '<option value="0">None</option>';
    html += '<option value="10">10%</option>';
    html += '</select></td></tr>';

    html += '<tr><td>Collector\'s Ring Bonus:</td><td>';
    html += '<select id="ringBonus">';
    html += '<option value="0">None</option>';
    html += '<option value="3">3%</option>';
    html += '<option value="6">6%</option>';
    html += '</select></td></tr>';

    html += '<tr><td>Skull Bonus:</td><td>';
    html += '<select id="skullBonus">';
    html += '<option value="0">None</option>';
    html += '<option value="20">20%</option>';
    html += '</select></td></tr>';

    html += '<tr><td>Voting Bonus:</td><td>';
    html += '<select id="voteBonus">';
    html += '<option value="0">None</option>';
    html += '<option value="20">20%</option>';
    html += '</select></td></tr>';

    html += '<tr><td colspan="2" style="text-align:center;"><button id="calcDropBtn" style="margin-top:10px;">Calculate Drop Rate</button></td></tr>';
    html += '</table>';

    html += '<div style="margin-top:10px;font-weight:bold;">Final Drop Rate: <span id="finalDrop">0</span></div>';
    html += '<table id="dropSteps" style="margin-top:10px;border-collapse:collapse;width:400px;font-size:90%;color:#555;"></table>';

    container.innerHTML = html;

    // Calculation
    var btn = document.getElementById("calcDropBtn");
    btn.onclick = function () {
        var base = parseFloat(document.getElementById("baseRate").value) || 0;
        var donator = parseFloat(document.getElementById("donatorBonus").value) || 0;
        var slayer = parseFloat(document.getElementById("slayerBonus").value) || 0;
        var ring = parseFloat(document.getElementById("ringBonus").value) || 0;
        var skull = parseFloat(document.getElementById("skullBonus").value) || 0;
        var vote = parseFloat(document.getElementById("voteBonus").value) || 0;

        var finalRate = base;
        var stepsTable = document.getElementById("dropSteps");
        stepsTable.innerHTML = '<tr style="background:#eee;"><th>Bonus</th><th>Percentage</th><th>Drop Rate</th></tr>';

        function addStep(name, perc) {
            finalRate *= (1 - perc / 100);
            var row = document.createElement("tr");
            row.innerHTML = '<td>' + name + '</td><td>' + perc + '%</td><td>' + Math.round(finalRate) + '</td>';
            stepsTable.appendChild(row);
        }

        addStep("Donator Bonus", donator);
        addStep("Monster Slayer", slayer);
        addStep("Collector's Ring", ring);
        addStep("Skull Bonus", skull);
        addStep("Voting Bonus", vote);

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