MediaWiki:DropCalc.js

// --- DROPRATE CALCULATOR WITH TABLE ---
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 / Option</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];

    // Define bonuses
    var bonuses = [
        { name: "Donator Rank", id: "donatorBonus", options: [
            {name:"None",value:0},
            {name: "Donator 15%", value: 15, icon: "https://wiki.roatpkz.com/images/5/59/Donatoricon.png"},
            {name:"Super Donator 25%",value:25, icon: "https://wiki.roatpkz.com/images/2/2d/Superdonatoricon.png"},
            {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}]},
        { name: "Double Time Scroll", id: "doubleTimeScroll", options: []} // checkbox
    ];

    // Items that disable Skull Bonus
    var skullDisabledItems = ["TokHaar-kal"];

    // Build 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();
        cell2.style.padding = '5px';

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

        // Donator Rank: custom dropdown with icons
        if (bonus.id === "donatorBonus") {
            var dropdown = document.createElement('div');
            dropdown.className = 'custom-dropdown';
            dropdown.id = bonus.id;

            var selected = document.createElement('div');
            selected.className = 'selected';
            selected.textContent = "Select Rank";
            dropdown.appendChild(selected);

            var optionsContainer = document.createElement('div');
            optionsContainer.className = 'options';
            optionsContainer.style.position = 'absolute';
            optionsContainer.style.background = '#fff';
            optionsContainer.style.border = '1px solid #888';
            optionsContainer.style.zIndex = '100';
            optionsContainer.style.display = 'none';

            bonus.options.forEach(function(opt){
                var optionDiv = document.createElement('div');
                optionDiv.dataset.value = opt.value;
                optionDiv.style.padding = '2px 5px';
                optionDiv.style.cursor = 'pointer';
                optionDiv.style.display = 'flex';
                optionDiv.style.alignItems = 'center';

                if(opt.icon){
                    var img = document.createElement('img');
                    img.src = opt.icon;
                    img.style.width = '16px';
                    img.style.height = '16px';
                    img.style.marginRight = '5px';
                    optionDiv.appendChild(img);
                }

                var textNode = document.createTextNode(opt.name);
                optionDiv.appendChild(textNode);
                optionsContainer.appendChild(optionDiv);

                optionDiv.addEventListener('click', function() {
                    selected.textContent = opt.name;
                    selected.dataset.value = opt.value;
                    optionsContainer.style.display = 'none';
                    document.getElementById("calcDropBtn").click();
                });
            });

            dropdown.appendChild(optionsContainer);
            cell2.appendChild(dropdown);

            selected.addEventListener('click', function() {
                optionsContainer.style.display = optionsContainer.style.display === 'block' ? 'none' : 'block';
            });

        // Double Time Scroll: checkbox
        } else if(bonus.id === "doubleTimeScroll") {
            var checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.id = bonus.id;
            cell2.appendChild(checkbox);
            cell3.textContent = "-";

            checkbox.addEventListener('change', function() {
                document.getElementById("calcDropBtn").click();
            });

        // Regular select bonuses
        } else {
            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);

            select.addEventListener('change', function() {
                document.getElementById("calcDropBtn").click();
            });
        }
    });

    // Searchable item input
    var baseDiv = document.createElement('div');
    baseDiv.style.margin = '10px 0';
    baseDiv.innerHTML =
        'Item: <input list="dropItems" id="itemSearch" placeholder="Search item..." style="width:260px;"> ' +
        'Base Rate: <input type="number" id="baseRate" value="1000" style="width:80px;">' +
        '<datalist id="dropItems">' +
        '<option data-rate="256" value="Zaryte Crossbow (1/256)">' +
        '<option data-rate="350" value="Torva Full Helm (1/350)">' +
        '<option data-rate="2560" value="Voidwaker gem (1/2560)">' +
        '<option data-rate="2560" value="Voidwaker hilt (1/2560)">' +
        '<option data-rate="2560" value="Voidwaker blade (1/2560)">' +
        '<option data-rate="128" value="Ancient godsword (1/128)">' +
        '<option data-rate="64" value="Zaryte vambraces (1/64)">' +
        '<option data-rate="10240" value="Elysian sigil (1/10240)">' +
        '<option data-rate="1024" value="Smoudering heart (1/1024)">' +
        '<option data-rate="75" value="TokHaar-kal (1/75)">' +
        '<option data-rate="2560" value="Enchanted Collector\'s Ring (6%) (1/2560)">' +
        '</datalist>';
    container.insertBefore(baseDiv, table);

    // Clear search X
    var itemInput = document.getElementById("itemSearch");
    var wrapper = document.createElement('div');
    wrapper.style.position = 'relative';
    wrapper.style.display = 'inline-block';
    itemInput.parentNode.insertBefore(wrapper, itemInput);
    wrapper.appendChild(itemInput);

    var clearBtn = document.createElement('span');
    clearBtn.textContent = '✕';
    clearBtn.style.position = 'absolute';
    clearBtn.style.right = '5px';
    clearBtn.style.top = '50%';
    clearBtn.style.transform = 'translateY(-50%)';
    clearBtn.style.cursor = 'pointer';
    clearBtn.style.color = '#888';
    clearBtn.style.fontWeight = 'bold';
    clearBtn.title = 'Clear search';
    wrapper.appendChild(clearBtn);

    clearBtn.addEventListener('click', function() {
        itemInput.value = '';
        document.getElementById('baseRate').value = 0;
        document.getElementById('finalDrop').textContent = 0;
        bonuses.forEach(function(bonus) {
            document.getElementById(bonus.id + "Preview").textContent = '-';
        });
    });

    // Auto-fill base rate & disable Skull Bonus
    itemInput.addEventListener('input', function() {
        var options = document.getElementById("dropItems").options;
        var val = itemInput.value;
        for (var i = 0; i < options.length; i++) {
            if (options[i].value === val) {
                var rate = options[i].getAttribute("data-rate");
                document.getElementById("baseRate").value = rate;

                var skullSelect = document.getElementById("skullBonus");
                var rawName = val.replace(/\s*\(1\/\d+\)$/, '');
                if(skullDisabledItems.includes(rawName)) {
                    skullSelect.disabled = true;
                    skullSelect.style.opacity = 0.5;
                } else {
                    skullSelect.disabled = false;
                    skullSelect.style.opacity = 1;
                }

                document.getElementById("calcDropBtn").click();
                break;
            }
        }
    });

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

        bonuses.forEach(function(bonus){
            var val = 0;
            if(bonus.id === "donatorBonus") {
                val = parseFloat(document.getElementById("donatorBonus").querySelector('.selected')?.dataset.value) || 0;
            } else if(bonus.id === "doubleTimeScroll") {
                val = document.getElementById("doubleTimeScroll").checked ? 1 : 0;
            } else {
                val = parseFloat(document.getElementById(bonus.id).value) || 0;
            }
            // Regular percentage bonuses
            if(bonus.id !== "doubleTimeScroll") {
                finalRate *= (1 - val / 100);
            }
            document.getElementById(bonus.id + "Preview").textContent = (bonus.id === "doubleTimeScroll") ? 
                (val ? Math.round(1 / (1 - Math.pow(1 - 1/finalRate, 2))) : "-") : Math.floor(finalRate);
        });

        // Update final drop
        if(document.getElementById("doubleTimeScroll").checked){
            finalRate = Math.round(1 / (1 - Math.pow(1 - 1/finalRate, 2)));
        }
        document.getElementById("finalDrop").textContent = Math.floor(finalRate);
    };
});