MediaWiki:SlayerPointsCalc.js

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

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

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

    container.innerHTML =
        '<div style="margin-bottom:10px;">' +
        'Donator Boost: ' +
        '<select id="donatorBoost">' +
        '<option value="0">None</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;">Base Points</th>' +
        '<th style="padding:5px;text-align:center;">Final Points</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody></tbody>' +
        '</table>';

    var milestones = [
        {name:"Normal task", points:15},
        {name:"10th task", points:75},
        {name:"50th task", points:225},
        {name:"100th task", points:375},
        {name:"250th task", points:525},
        {name:"1000th task", points:750}
    ];

    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.textContent = milestone.points;
        cell2.style.textAlign = "center";

        var cell3 = row.insertCell();
        cell3.id = "final_" + index;
        cell3.style.textAlign = "center";

    });

    function updatePoints(){

        var boost = parseFloat(document.getElementById("donatorBoost").value);

        milestones.forEach(function(milestone, index){

            var final = milestone.points * (1 + boost / 100);
            document.getElementById("final_" + index).textContent = Math.floor(final);

        });

    }

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

    updatePoints();

});