MediaWiki:SlayerPointsCalc.js

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

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

    container.innerHTML =
        '<div style="margin-bottom:10px;">' +
        'Task streak: <input type="number" id="taskStreak" value="1" min="1" style="width:80px;"> ' +
        '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:white;">' +
        '<th style="padding:5px;">Task Type</th>' +
        '<th style="padding:5px;">Base Points</th>' +
        '<th style="padding:5px;">Final Points</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>' +
        '<tr><td style="padding:5px;">Normal Task</td><td id="baseNormal">5</td><td id="finalNormal">5</td></tr>' +
        '<tr><td style="padding:5px;">10th Task</td><td id="base10">15</td><td id="final10">15</td></tr>' +
        '<tr><td style="padding:5px;">50th Task</td><td id="base50">75</td><td id="final50">75</td></tr>' +
        '<tr><td style="padding:5px;">100th Task</td><td id="base100">150</td><td id="final100">150</td></tr>' +
        '</tbody>' +
        '</table>';

    function calculatePoints() {

        var streak = parseInt(document.getElementById("taskStreak").value) || 1;
        var boost = parseFloat(document.getElementById("donatorBoost").value) || 0;

        var normal = 5;
        var tenth = 15;
        var fiftieth = 75;
        var hundredth = 150;

        if (streak % 100 === 0) {
            normal = hundredth;
        } else if (streak % 50 === 0) {
            normal = fiftieth;
        } else if (streak % 10 === 0) {
            normal = tenth;
        }

        var multiplier = 1 + (boost / 100);

        document.getElementById("finalNormal").textContent = Math.floor(5 * multiplier);
        document.getElementById("final10").textContent = Math.floor(15 * multiplier);
        document.getElementById("final50").textContent = Math.floor(75 * multiplier);
        document.getElementById("final100").textContent = Math.floor(150 * multiplier);
    }

    document.getElementById("taskStreak").addEventListener("input", calculatePoints);
    document.getElementById("donatorBoost").addEventListener("change", calculatePoints);

    calculatePoints();

});