MediaWiki:SlayerPointsCalc.js

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

    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="5">Donator (+5%)</option>' +
        '<option value="10">Super Donator (+10%)</option>' +
        '<option value="15">Extreme Donator (+15%)</option>' +
        '<option value="25">Legendary Donator (+25%)</option>' +
        '<option value="50">Royal Donator (+50%)</option>' +
        '<option value="75">Divine Donator (+75%)</option>' +
        '</select>' +
        '</div>' +

        '<div style="margin-bottom:10px;">' +
        '<label><input type="checkbox" id="slayerGatherer"> Slayer gatherer clan chat perk (+50% points per task)</label>' +
        '</div>' +

        '<div style="margin-bottom:10px;">' +
        '<label><input type="checkbox" id="maxCapePerk"> Max Cape perk (20% chance to double points)</label>' +
        '</div>' +

        '<div style="margin-bottom:10px;">' +
        'Average task duration: <input type="number" id="taskMinutes" value="5" min="1" style="width:60px;"> minutes' +
        '</div>' +

        '<table id="slayerTable" style="border-collapse:collapse; width:400px;">' +
        '<thead>' +
        '<tr style="background:#222e45;color:#fff;">' +
        '<th style="padding:8px;text-align:left; border-right:1px solid #596e96;">Task</th>' +
        '<th style="padding:8px;text-align:center;">Points</th>' +
        '<th id="maxCapeHeader" style="padding:8px;text-align:center;display:none;">Points (Max Cape proc)</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody></tbody>' +
        '</table>';

    // Table border styling
    var table = document.getElementById("slayerTable");
    table.style.border = "1px solid #596e96"; // your border color
    table.style.borderCollapse = "collapse";
    table.style.borderRadius = "8px";

    var basePoints = 25;

    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";
        row.style.transition = "background 0.2s";

        row.addEventListener("mouseover", function(){ row.style.background = "#3a4b6d"; });
        row.addEventListener("mouseout", function(){ row.style.background = index % 2 ? "#222e45" : "#313e59"; });

        var cell1 = row.insertCell();
        cell1.textContent = milestone.name;
        cell1.style.padding = "8px";
        cell1.style.borderRight = "1px solid #596e96";

        var cell2 = row.insertCell();
        cell2.id = "points_" + index;
        cell2.style.textAlign = "center";
        cell2.style.padding = "8px 0 8px 10px";

        var cell3 = row.insertCell();
        cell3.id = "pointsMaxCape_" + index;
        cell3.style.textAlign = "center";
        cell3.style.padding = "8px 0 8px 10px";
        cell3.style.display = "none";
    });

    // Bottom row for Average Points per Hour
    var pphRow = tbody.insertRow();
    pphRow.style.background = "#313e59";
    pphRow.style.color = "#fff";

    var cell = pphRow.insertCell();
    cell.colSpan = 3;
    cell.style.padding = "8px";
    cell.style.textAlign = "center";
    cell.style.borderTop = "1px solid #596e96";
    cell.id = "pointsPerHourCell";

    function calculateAveragePointsPerTask() {
        var taskCounts = {
            "1000":1,
            "250":3,
            "100":8,
            "50":8,
            "10":80,
            "normal": 1000 - (1+3+8+8+80)
        };
        var sum = 0;
        sum += taskCounts.normal * basePoints * 1;
        sum += taskCounts["10"] * basePoints * 5;
        sum += taskCounts["50"] * basePoints * 15;
        sum += taskCounts["100"] * basePoints * 25;
        sum += taskCounts["250"] * basePoints * 35;
        sum += taskCounts["1000"] * basePoints * 50;
        return sum / 1000;
    }

    function updatePoints() {
        var boost = parseFloat(document.getElementById("donatorBoost").value) || 0;
        var multiplierBoost = 1 + boost/100;
        var gatherer = document.getElementById("slayerGatherer").checked ? 0.5 : 0;
        var maxCape = document.getElementById("maxCapePerk").checked;
        var maxCapeDisplay = maxCape ? "table-cell" : "none";

        document.getElementById("maxCapeHeader").style.display = maxCapeDisplay;

        var averagePoints = calculateAveragePointsPerTask() * multiplierBoost * (1 + gatherer) * (maxCape ? 1.20 : 1.0);

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

            var maxCapeCell = document.getElementById("pointsMaxCape_" + index);
            maxCapeCell.style.display = maxCapeDisplay;
            maxCapeCell.textContent = Math.floor(points * 2);
        });

        // Bold only the number in bottom cell
        var minutes = parseFloat(document.getElementById("taskMinutes").value) || 1;
        var pph = averagePoints * (60 / minutes);
        document.getElementById("pointsPerHourCell").innerHTML =
            'Average Points per Hour: <strong>' + Math.floor(pph) + '</strong>';
    }

    // Event listeners
    document.getElementById("donatorBoost").addEventListener("change", updatePoints);
    document.getElementById("slayerGatherer").addEventListener("change", updatePoints);
    document.getElementById("maxCapePerk").addEventListener("change", updatePoints);
    document.getElementById("taskMinutes").addEventListener("input", updatePoints);

    updatePoints();
});