MediaWiki:TeamBingo.js

// --- Team Bingo Boards with Captains ---
mw.hook('wikipage.content').add(function () {

    // Get current wiki username (MediaWiki global)
    var currentUser = mw.config.get('wgUserName');

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

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

        // Read captain from data attribute
        var captain = container.getAttribute("data-captain");

        // Wrap board + info box
        var wrapper = document.createElement("div");
        wrapper.style.display = "flex";
        wrapper.style.gap = "20px";
        wrapper.style.alignItems = "flex-start";
        container.parentNode.insertBefore(wrapper, container);
        wrapper.appendChild(container);

        // Create fixed info box
        var infoBox = document.createElement("div");
        infoBox.style.padding = "10px";
        infoBox.style.border = "1px solid #596e96";
        infoBox.style.backgroundColor = "#313e59";
        infoBox.style.color = "#fff";
        infoBox.style.borderRadius = "4px";
        infoBox.style.minWidth = "180px";
        infoBox.style.maxWidth = "220px";
        infoBox.style.whiteSpace = "normal";
        infoBox.style.wordWrap = "break-word";
        infoBox.style.fontSize = "14px";
        infoBox.style.transition = "all 0.2s ease";
        infoBox.innerHTML = "<strong>Hover a tile to see info here.</strong>";
        wrapper.appendChild(infoBox);

        // Parse items: Item Name::Tooltip (use %% for line breaks)
        var itemsAttr = container.getAttribute("data-items");
        var items = itemsAttr.split("|").filter(i => i.trim() !== "");
        if (!items.length) return;

        var parsedItems = items.map(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 = "600px";
        container.appendChild(table);

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

        // Fetch all images in one API call
        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.width = `${100 / cols}%`;
                    cell.style.padding = "10px";
                    cell.style.border = "1px solid #596e96";
                    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";
                    cell.style.position = "relative";

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

                    // Container for image, name, checkmark
                    let cellContainer = document.createElement("div");
                    cellContainer.style.position = "relative";
                    cellContainer.style.width = "100%";
                    cellContainer.style.height = "100%";

                    // Image
                    if (imgs[index]) {
                        let img = document.createElement("img");
                        img.src = imgs[index].src;
                        img.alt = item.name;
                        img.style.width = "40px";
                        img.style.height = "auto";
                        img.style.display = "block";
                        img.style.margin = "0 auto";
                        cellContainer.appendChild(img);
                    }

                    // Name
                    let nameDiv = document.createElement("div");
                    nameDiv.textContent = item.name;
                    nameDiv.style.marginTop = "5px";
                    nameDiv.style.pointerEvents = "none";
                    cellContainer.appendChild(nameDiv);

                    // Checkmark top-right
                    let checkmark = document.createElement("div");
                    checkmark.textContent = "✔";
                    checkmark.className = "bingoCheckmark";
                    checkmark.style.position = "absolute";
                    checkmark.style.top = "2px";
                    checkmark.style.right = "2px";
                    checkmark.style.fontSize = "20px";
                    checkmark.style.color = "#4CAF50";
                    checkmark.style.background = "none";
                    checkmark.style.display = "none";
                    cellContainer.appendChild(checkmark);

                    // Hover shows info
                    cell.addEventListener("mouseenter", function() {
                        if (localStorage.getItem(this.id) !== "true") {
                            this.style.background = "#3b4a6b";
                        }
                        infoBox.innerHTML = "";
                        let header = document.createElement("div");
                        header.style.fontWeight = "bold";
                        header.style.marginBottom = "5px";
                        header.textContent = item.name;
                        infoBox.appendChild(header);
                        if (imgs[index]) {
                            let hoverImg = document.createElement("img");
                            hoverImg.src = imgs[index].src;
                            hoverImg.style.width = "40px";
                            hoverImg.style.height = "auto";
                            hoverImg.style.display = "block";
                            hoverImg.style.marginBottom = "5px";
                            infoBox.appendChild(hoverImg);
                        }
                        item.tooltip.split("%%").forEach(line => {
                            let div = document.createElement("div");
                            div.innerHTML = line.trim();
                            infoBox.appendChild(div);
                        });
                    });

                    cell.addEventListener("mouseleave", function() {
                        if (localStorage.getItem(this.id) !== "true") {
                            this.style.background = "#313e59";
                        }
                        infoBox.innerHTML = "<strong>Hover a tile to see info here.</strong>";
                    });

                    // Click toggle complete (captain only)
                    cell.addEventListener("click", function() {
                        if (currentUser !== captain) return;
                        let done = localStorage.getItem(this.id) === "true";
                        localStorage.setItem(this.id, !done);
                        this.style.background = !done ? "rgba(76,175,80,0.5)" : "#313e59";
                        checkmark.style.display = !done ? "block" : "none";
                    });

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

                    cell.appendChild(cellContainer);
                }
            }
        });
    });
});