MediaWiki:BingoSheet.js

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

    // Auto-create container if it doesn't exist
    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 with your wiki images)
    var images = [
        "https://wiki.roatpkz.com/images/Item1.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 grid
    for (var r = 0; r < rows; r++) {
        var row = table.insertRow();

        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";
            cell.style.background = "#313e59"; // uniform tile color
            cell.style.cursor = "pointer";
            cell.style.transition = "background 0.2s ease";
            cell.style.userSelect = "none";

            var id = `cell_${r}_${c}`;

            // 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);

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

            // Restore state from localStorage
            if (localStorage.getItem(id) === "true") {
                cell.style.background = "#222e45"; // darker shade for completed
            }

            // Click to toggle completed
            cell.addEventListener("click", function () {
                var done = localStorage.getItem(this.id) === "true";
                localStorage.setItem(this.id, !done);
                this.style.background = !done ? "#222e45" : "#313e59";
                updateProgress();
            });
        }
    }

    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) {
                    localStorage.setItem(cb.id, false);
                    cb.style.background = "#313e59"; // reset to default
                }
            }
        }
        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 && localStorage.getItem(cb.id) === "true") checked++;
            }
        }
        progressDiv.textContent = `Completed ${checked} of ${rows*cols} items`;
    }

    updateProgress();
});