MediaWiki:BingoSheet.js

// --- Bingo Board with Whole-Tile Hover, Images & Names ---
mw.hook('wikipage.content').add(function () {

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

    containers.forEach(function(container) {
        container.innerHTML = "";

        // Get items from template: Format: Item Name::Custom Hover Text
        var itemsAttr = container.getAttribute("data-items");
        var items = itemsAttr.split("|").filter(i => i.trim() !== "");
        if (!items.length) return;

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

        // Build table
        var table = document.createElement("table");
        table.style.tableLayout = "fixed";   
        table.style.border = "2px solid #596e96";
        table.style.borderCollapse = "collapse";
        table.style.borderRadius = "8px";
        table.style.width = "100%";
        table.style.maxWidth = "600px";
        container.appendChild(table);

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

        // Wrap each Hover template in a div for individual extraction
        var allTemplates = parsedItems.map(item =>
            `<div class="bingoItem">{{Hover info4|text=[[File:${item.name}.png|link=]]|[[File:${item.name}.png|link=|18px]] ${item.tooltip}}}</div>`
        ).join("\n");

        // Single API call
        $.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 hoverNodes = tempDiv.querySelectorAll(".bingoItem");

            let nodeIndex = 0;

            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.width = `${100 / cols}%`;
                    cell.style.padding = "10px";
                    cell.style.border = "1px solid #444";
                    cell.style.textAlign = "center";
                    cell.style.background = "#313e59";
                    cell.style.color = "#fff";
                    cell.style.cursor = "pointer";
                    cell.style.transition = "all 0.2s ease";
                    cell.style.userSelect = "none";
                    cell.style.wordWrap = "break-word";
                    cell.style.overflow = "visible"; // allow hover popup outside
                    cell.style.position = "relative"; // for absolute hover popup

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

                    // Append hover template as absolute full-tile popup
                    if (hoverNodes[nodeIndex]) {
                        let popupNode = hoverNodes[nodeIndex];
                        popupNode.style.position = "absolute";
                        popupNode.style.top = "0";
                        popupNode.style.left = "0";
                        popupNode.style.width = "100%";
                        popupNode.style.height = "100%";
                        popupNode.style.display = "block"; // fills the cell
                        cell.appendChild(popupNode);
                        nodeIndex++;
                    }

                    // Item name below the image
                    let nameDiv = document.createElement("div");
                    nameDiv.textContent = item.name;
                    nameDiv.style.marginTop = "5px";
                    nameDiv.style.pointerEvents = "none"; // doesn't block hover
                    cell.appendChild(nameDiv);

                    // Load completed state
                    if (localStorage.getItem(id) === "true") {
                        cell.style.background = "rgba(76, 175, 80, 0.5)";
                    }

                    // Hover darken
                    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 ? "rgba(76, 175, 80, 0.5)" : "#313e59";
                        updateProgress(container, parsedItems.length);
                    });
                }
            }

            // Progress display
            var progressDiv = document.createElement("div");
            progressDiv.style.marginTop = "10px";
            progressDiv.style.color = "#fff";
            progressDiv.className = "bingoProgress";
            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 < parsedItems.length; i++) {
                    var cb = document.getElementById(`${container.id}_cell_${i}`);
                    if (cb) {
                        localStorage.setItem(cb.id, false);
                        cb.style.background = "#313e59";
                    }
                }
                updateProgress(container, parsedItems.length);
            });

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

        // Update progress counter
        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(".bingoProgress");
            if (progressDiv)
                progressDiv.textContent = `Completed ${completed} of ${total} items`;
        }
    });
});