MediaWiki:BingoSheet.js

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

    var container = document.getElementById("bingoContainer");
    if (!container) return; // only run if the container exists

    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;

    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";

            var id = `cell_${r}_${c}`;
            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.id = id;

            // Restore state from localStorage
            if (localStorage.getItem(id) === "true") checkbox.checked = true;

            // Save state on change
            checkbox.addEventListener("change", function () {
                localStorage.setItem(this.id, this.checked);
                updateProgress();
            });

            cell.appendChild(checkbox);
            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);

    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(); // initial update
});