MediaWiki:BingoSheet.js

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

    // Create container automatically if not present
    var container = document.getElementById("bingoContainer");
    if (!container) {
        container = document.createElement("div");
        container.id = "bingoContainer";
        container.style.margin = "20px 0";
        document.body.appendChild(container);
    }
    container.innerHTML = ""; // clear container

    var table = document.createElement("table");
    table.style.border = "2px solid #596e96";
    table.style.borderCollapse = "collapse";
    table.style.borderRadius = "8px";
    table.style.width = "100%";
    table.style.maxWidth = "500px";

    var rows = 5, cols = 5;

    // Example images array (replace URLs with your wiki images)
    var images = [
        "https://wiki.roatpkz.com/images/d/dc/Zaryte_crossbow.png",
        "https://wiki.roatpkz.com/images/Item2.png",
        "https://wiki.roatpkz.com/images/Item3.png",
        "https://wiki.roatpkz.com/images/Item4.png",
        "https://wiki.roatpkz.com/images/Item5.png",
        "https://wiki.roatpkz.com/images/Item6.png",
        "https://wiki.roatpkz.com/images/Item7.png",
        "https://wiki.roatpkz.com/images/Item8.png",
        "https://wiki.roatpkz.com/images/Item9.png",
        "https://wiki.roatpkz.com/images/Item10.png",
        "https://wiki.roatpkz.com/images/Item11.png",
        "https://wiki.roatpkz.com/images/Item12.png",
        "https://wiki.roatpkz.com/images/Item13.png",
        "https://wiki.roatpkz.com/images/Item14.png",
        "https://wiki.roatpkz.com/images/Item15.png",
        "https://wiki.roatpkz.com/images/Item16.png",
        "https://wiki.roatpkz.com/images/Item17.png",
        "https://wiki.roatpkz.com/images/Item18.png",
        "https://wiki.roatpkz.com/images/Item19.png",
        "https://wiki.roatpkz.com/images/Item20.png",
        "https://wiki.roatpkz.com/images/Item21.png",
        "https://wiki.roatpkz.com/images/Item22.png",
        "https://wiki.roatpkz.com/images/Item23.png",
        "https://wiki.roatpkz.com/images/Item24.png",
        "https://wiki.roatpkz.com/images/Item25.png"
    ];

    // Create the bingo grid
    for (var r = 0; r < rows; r++) {
        var row = table.insertRow();
        row.style.background = r % 2 === 0 ? "#313e59" : "#222e45";

        for (var c = 0; c < cols; c++) {
            var cell = row.insertCell();
            cell.style.padding = "10px";
            cell.style.border = "1px solid #444";
            cell.style.textAlign = "center";
            cell.style.color = "#fff";

            // Image
            var img = document.createElement("img");
            img.src = images[r*cols + c];
            img.alt = `Item ${r*cols + c + 1}`;
            img.style.width = "40px";
            img.style.height = "40px";
            img.style.display = "block";
            img.style.margin = "0 auto 5px auto";
            cell.appendChild(img);

            // Checkbox
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.id = `cell_${r}_${c}`;
            if (localStorage.getItem(checkbox.id) === "true") checkbox.checked = true;
            checkbox.addEventListener("change", function () {
                localStorage.setItem(this.id, this.checked);
                updateProgress();
            });
            cell.appendChild(checkbox);

            // Text label
            cell.appendChild(document.createElement("br"));
            cell.appendChild(document.createTextNode(` Item ${r*cols+c+1}`));
        }
    }

    container.appendChild(table);

    // Progress display
    var progressDiv = document.createElement("div");
    progressDiv.style.marginTop = "10px";
    progressDiv.style.color = "#fff";
    container.appendChild(progressDiv);

    // Reset button
    var resetBtn = document.createElement("button");
    resetBtn.textContent = "Reset Bingo";
    resetBtn.style.marginTop = "5px";
    resetBtn.style.cursor = "pointer";
    resetBtn.addEventListener("click", function () {
        for (var r = 0; r < rows; r++) {
            for (var c = 0; c < cols; c++) {
                var cb = document.getElementById(`cell_${r}_${c}`);
                if (cb) {
                    cb.checked = false;
                    localStorage.setItem(cb.id, false);
                }
            }
        }
        updateProgress();
    });
    container.appendChild(resetBtn);

    // Update progress function
    function updateProgress() {
        var checked = 0;
        for (var r = 0; r < rows; r++) {
            for (var c = 0; c < cols; c++) {
                var cb = document.getElementById(`cell_${r}_${c}`);
                if (cb && cb.checked) checked++;
            }
        }
        progressDiv.textContent = `Completed ${checked} of ${rows*cols} items`;
    }

    updateProgress();
});