MediaWiki:BingoSheet.js

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

    var containers = document.querySelectorAll(".bingoContainer");
    if (!containers.length) return;

    containers.forEach(function(container) {

        container.innerHTML = ""; // Clear any previous content

        var itemsAttr = container.getAttribute("data-items");
        if (!itemsAttr) return;

        var items = itemsAttr.split("|").filter(i => i.trim() !== "");
        if (!items.length) return;

        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 = Math.ceil(Math.sqrt(items.length));
        var cols = Math.ceil(items.length / rows);

        for (var r = 0; r < rows; r++) {
            var row = table.insertRow();
            for (var c = 0; c < cols; c++) {
                var index = r * cols + c;
                if (index >= items.length) break;

                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";
                cell.style.cursor = "pointer";
                cell.style.transition = "background 0.2s ease";
                cell.style.userSelect = "none";

                var itemName = items[index];
                var id = `${container.id}_cell_${index}`;
                cell.id = id;

                // Use your plinkt template to get the image
                $.getJSON("/api.php", {
                    action: "parse",
                    text: `{{plinkt|${itemName}}}`,
                    format: "json"
                }).done(function(data) {
                    if (data.parse && data.parse.text) {
                        var html = document.createElement("div");
                        html.innerHTML = data.parse.text["*"];
                        var imgTag = html.querySelector("img");
                        if (imgTag) {
                            var img = document.createElement("img");
                            img.src = imgTag.src;
                            img.alt = itemName;
                            img.style.width = "40px";
                            img.style.height = "40px";
                            img.style.display = "block";
                            img.style.margin = "0 auto 5px auto";
                            cell.insertBefore(img, cell.firstChild);
                        }
                        cell.appendChild(document.createTextNode(itemName));
                    }
                });

                if (localStorage.getItem(id) === "true") {
                    cell.style.background = "#222e45";
                }

                // Hover effects
                cell.addEventListener("mouseenter", function () {
                    if (localStorage.getItem(this.id) !== "true") this.style.background = "#3b4a6b";
                });
                cell.addEventListener("mouseleave", function () {
                    if (localStorage.getItem(this.id) !== "true") this.style.background = "#313e59";
                });

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

        container.appendChild(table);

        // Progress
        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 i = 0; i < items.length; i++) {
                var cb = document.getElementById(`${container.id}_cell_${i}`);
                if (cb) {
                    localStorage.setItem(cb.id, false);
                    cb.style.background = "#313e59";
                }
            }
            updateProgress(container, items.length);
        });
        container.appendChild(resetBtn);

        updateProgress(container, items.length);
    });

    function updateProgress(container, total) {
        var completed = 0;
        for (var i = 0; i < total; i++) {
            var cb = document.getElementById(`${container.id}_cell_${i}`);
            if (cb && localStorage.getItem(cb.id) === "true") completed++;
        }
        var progressDiv = container.querySelector("div");
        if (progressDiv) progressDiv.textContent = `Completed ${completed} of ${total} items`;
    }

});