MediaWiki:BingoSheet.js

// --- Enhanced Bingo Board ---
mw.hook('wikipage.content').add(function () {

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

    containers.forEach(function(container) {

        container.innerHTML = "";

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

        // Parse items + tooltips
        var parsedItems = items.map(function(entry){
            var parts = entry.split("::");
            return {
                name: parts[0].trim(),
                tooltip: parts[1] ? parts[1].trim() : parts[0].trim()
            };
        });

        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 = "520px";

        container.appendChild(table);

        var rows = Math.ceil(Math.sqrt(parsedItems.length));
        var cols = Math.ceil(parsedItems.length / rows);

        // Build plinkp templates
        var allTemplates = parsedItems.map(item => `{{plinkp|${item.name}}}`).join("\n");

        $.getJSON("/api.php", {
            action: "parse",
            text: allTemplates,
            format: "json"
        }).done(function(data){

            if (!data.parse || !data.parse.text) return;

            var tempDiv = document.createElement("div");
            tempDiv.innerHTML = data.parse.text["*"];

            var imgs = tempDiv.querySelectorAll("img");

            for (let r = 0; r < rows; r++) {

                var row = table.insertRow();

                for (let c = 0; c < cols; c++) {

                    let index = r * cols + c;
                    if (index >= parsedItems.length) break;

                    let item = parsedItems[index];

                    let 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 = "all 0.15s ease";
                    cell.style.userSelect = "none";
                    cell.style.position = "relative";
                    cell.style.overflow = "visible";

                    let id = `${container.id}_cell_${index}`;
                    cell.id = id;

                    // --- Hoverbox wrapper ---
                    let hoverbox = document.createElement("span");
                    hoverbox.className = "hoverbox hover-info";
                    hoverbox.style.position = "relative";
                    hoverbox.style.display = "inline-block";

                    let content = document.createElement("div");

                    // image
                    if (imgs[index]) {
                        let img = document.createElement("img");
                        img.src = imgs[index].src;
                        img.alt = item.name;
                        img.style.width = "42px";
                        img.style.height = "42px";
                        img.style.objectFit = "contain";
                        img.style.display = "block";
                        img.style.margin = "0 auto 6px auto";
                        content.appendChild(img);
                    }

                    // item text
                    let text = document.createElement("div");
                    text.textContent = item.name;
                    text.style.fontSize = "13px";

                    content.appendChild(text);
                    hoverbox.appendChild(content);

                    // tooltip
                    let hoveritem = document.createElement("span");
                    hoveritem.className = "hoveritem";
                    hoveritem.style.position = "absolute";
                    hoveritem.style.top = "-0.4em";
                    hoveritem.style.left = "2em";
                    hoveritem.style.zIndex = "50";

                    let hoverBoxInner = document.createElement("span");
                    hoverBoxInner.className = "hover-info-box";
                    hoverBoxInner.textContent = item.tooltip;

                    hoveritem.appendChild(hoverBoxInner);
                    hoverbox.appendChild(hoveritem);

                    cell.appendChild(hoverbox);

                    // Completed state
                    if (localStorage.getItem(id) === "true") {
                        markComplete(cell);
                    }

                    // Hover animation
                    cell.addEventListener("mouseenter", function () {

                        if (localStorage.getItem(this.id) !== "true") {
                            this.style.background = "#3b4a6b";
                            this.style.transform = "scale(1.05)";
                        }
                    });

                    cell.addEventListener("mouseleave", function () {

                        if (localStorage.getItem(this.id) !== "true") {
                            this.style.background = "#313e59";
                            this.style.transform = "scale(1)";
                        }
                    });

                    // Click toggle
                    cell.addEventListener("click", function () {

                        var done = localStorage.getItem(this.id) === "true";

                        localStorage.setItem(this.id, !done);

                        if (!done) {
                            markComplete(this);
                        } else {
                            resetTile(this);
                        }

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

            // Progress
            var progressDiv = document.createElement("div");
            progressDiv.className = "bingoProgress";
            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 = "6px";
            resetBtn.style.cursor = "pointer";

            resetBtn.addEventListener("click", function(){

                for (var i = 0; i < parsedItems.length; i++) {

                    var cell = document.getElementById(`${container.id}_cell_${i}`);

                    if (cell) {
                        localStorage.setItem(cell.id, false);
                        resetTile(cell);
                    }
                }

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

            container.appendChild(resetBtn);

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

        function markComplete(cell) {

            cell.style.background = "rgba(76,175,80,0.45)";
            cell.style.transform = "scale(1)";

            if (!cell.querySelector(".bingo-check")) {

                let check = document.createElement("div");

                check.textContent = "✔";
                check.className = "bingo-check";

                check.style.position = "absolute";
                check.style.top = "4px";
                check.style.right = "6px";
                check.style.fontSize = "18px";
                check.style.color = "#8cff8c";

                cell.appendChild(check);
            }
        }

        function resetTile(cell) {

            cell.style.background = "#313e59";
            cell.style.transform = "scale(1)";

            let check = cell.querySelector(".bingo-check");
            if (check) check.remove();
        }

        function updateProgress(container, total) {

            var completed = 0;

            for (var i = 0; i < total; i++) {

                var cell = document.getElementById(`${container.id}_cell_${i}`);

                if (cell && localStorage.getItem(cell.id) === "true")
                    completed++;
            }

            var progressDiv = container.querySelector(".bingoProgress");

            if (progressDiv)
                progressDiv.textContent = `Completed ${completed} of ${total} items`;
        }

    });
});