MediaWiki:SlayerPointsCalc.js

mw.hook('wikipage.content').add(function () {

    // Only run on the correct page
    if (mw.config.get('wgPageName') !== "Slayer_points_calculator") return;

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

    // Build UI
    container.innerHTML =
        '<div style="margin-bottom:10px;">' +
        'Donator Boost: ' +
        '<select id="donatorBoost">' +
        '<option value="0">None</option>' +
        '<option value="50">Royal Donator (+50%)</option>' +
        '<option value="75">Divine Donator (+75%)</option>' +
        '</select>' +
        '</div>' +

        '<table id="slayerTable" style="border-collapse:collapse; width:400px;">' +
        '<thead>' +
        '<tr style="background:#222e45;color:#fff;">' +
        '<th style="padding:5px;text-align:left;">Task</th>' +
        '<th style="padding:5px;text-align:center;">Points</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody></tbody>' +
        '</table>';

    var basePoints = 25; // Base points for normal task

    var milestones = [
        {name:"Normal task", multiplier:1},
        {name:"10th task", multiplier:5},
        {name:"50th task", multiplier:15},
        {name:"100th task", multiplier:25},
        {name:"250th task", multiplier:35},
        {name:"1,000th task", multiplier:50}
    ];

    var tbody = document.querySelector("#slayerTable tbody");

    milestones.forEach(function(milestone, index){
        var row = tbody.insertRow();
        row.style.background = index % 2 ? "#222e45" : "#313e59";
        row.style.color = "#fff";

        var cell1 = row.insertCell();
        cell1.textContent = milestone.name;
        cell1.style.padding = "5px";

        var cell2 = row.insertCell();
        cell2.id = "points_" + index;
        cell2.style.textAlign = "center";
        cell2.style.padding = "5px";
    });

    function updatePoints() {
        var boost = parseFloat(document.getElementById("donatorBoost").value) || 0;
        var multiplierBoost = 1 + boost/100;

        milestones.forEach(function(milestone, index){
            var points = basePoints * milestone.multiplier * multiplierBoost;
            document.getElementById("points_" + index).textContent = Math.floor(points);
        });
    }

    document.getElementById("donatorBoost").addEventListener("change", updatePoints);

    updatePoints();
});