MediaWiki:TeamBingo.js

// --- Team Bingo Board with Captains and Live JSON ---
mw.hook('wikipage.content').add(function () {

    const currentUser = mw.config.get('wgUserName'); // logged-in user
    const containers = document.querySelectorAll(".teamBingoContainer");
    if (!containers.length) return;

    const infoBox = document.getElementById("teamBingoInfoBox");
    const boardState = {}; // central source of truth for all tiles

    // Fetch JSON from Module page
    function fetchBoardData(callback) {
        $.getJSON(mw.util.wikiScript('api'), {
            action: 'query',
            titles: 'Module:TeamBingo/data.json',
            prop: 'revisions',
            rvprop: 'content',
            format: 'json',
            formatversion: 2
        }).done(function(data){
            if (!data.query.pages[0].revisions) return;
            const content = data.query.pages[0].revisions[0].content;
            try {
                const json = JSON.parse(content);
                Object.assign(boardState, json); // update central state
                callback(boardState);
            } catch(e) {
                console.error("Failed to parse JSON from Module:TeamBingo/data.json", e);
            }
        });
    }

    // Render the board
    function renderBoard(container, teamKey) {

        container.innerHTML = "";
        const captain = container.getAttribute("data-captain");
        const itemsAttr = container.getAttribute("data-items");
        if (!itemsAttr) return;

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

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

        const 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%";
        container.appendChild(table);

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

        const 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;
            const tempDiv = document.createElement("div");
            tempDiv.innerHTML = data.parse.text["*"];
            const imgs = tempDiv.querySelectorAll("img");

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

                    const item = parsedItems[index];
                    const cell = row.insertCell();
                    const id = `${container.id}_cell_${index}`;
                    cell.id = id;

                    cell.style.width = `${100 / cols}%`;
                    cell.style.padding = "10px";
                    cell.style.border = "1px solid #596e96";
                    cell.style.textAlign = "center";
                    cell.style.background = boardState[teamKey][`tile_${index}`] ? "rgba(76,175,80,0.5)" : "#313e59";
                    cell.style.color = "#fff";
                    cell.style.cursor = "pointer";
                    cell.style.transition = "all 0.2s ease";
                    cell.style.position = "relative";
                    cell.style.userSelect = "none";

                    const cellContainer = document.createElement("div");
                    cellContainer.style.position = "relative";
                    cellContainer.style.width = "100%";
                    cellContainer.style.height = "100%";

                    // Image
                    if (imgs[index]) {
                        const 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
                    const nameDiv = document.createElement("div");
                    nameDiv.textContent = item.name;
                    nameDiv.style.marginTop = "5px";
                    nameDiv.style.pointerEvents = "none";
                    cellContainer.appendChild(nameDiv);

                    // Checkmark
                    const 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.display = boardState[teamKey][`tile_${index}`] ? "block" : "none";
                    cellContainer.appendChild(checkmark);

                    // Hover shows info but preserves green
                    cell.addEventListener("mouseenter", function() {
                        if (!boardState[teamKey][`tile_${index}`]) cell.style.background = "#3b4a6b";

                        infoBox.innerHTML = "";
                        const header = document.createElement("div");
                        header.style.fontWeight = "bold";
                        header.style.marginBottom = "5px";
                        header.textContent = item.name;
                        infoBox.appendChild(header);

                        if (imgs[index]) {
                            const 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 => {
                            const div = document.createElement("div");
                            div.innerHTML = line.trim();
                            infoBox.appendChild(div);
                        });
                    });

                    cell.addEventListener("mouseleave", function() {
                        cell.style.background = boardState[teamKey][`tile_${index}`] ? "rgba(76,175,80,0.5)" : "#313e59";
                        infoBox.innerHTML = `
<strong>Roat Pkz PVM Bingo #3</strong><br>
Collect drops from PVM or skilling to score points — each drop = 1 point. Screenshots required; no chests, crates, or boxes. Event ends <strong>June 28th, 11:59 PM GMT</strong>.<br><br>
<strong>Rewards:</strong><br>
- 500 CREDITS (25M+)<br>
- 300 CREDITS (15M+)<br>
- 200 CREDITS (10M+)<br><br>
Only drops <strong>after this announcement</strong> count. Submit sheets via the <strong>No Access</strong> channel or message <strong>@JAY</strong>.
                        `;
                    });

                    // Click to toggle (captain only)
                    cell.addEventListener("click", function() {
                        if (currentUser !== captain) return;
                        const done = boardState[teamKey][`tile_${index}`];
                        boardState[teamKey][`tile_${index}`] = !done;
                        checkmark.style.display = !done ? "block" : "none";
                        cell.style.background = !done ? "rgba(76,175,80,0.5)" : "#313e59";

                        // Save to MediaWiki
                        $.post(mw.util.wikiScript('api'), {
                            action: 'edit',
                            title: 'Module:TeamBingo/data.json',
                            token: mw.user.tokens.get('csrfToken'),
                            format: 'json',
                            text: JSON.stringify(boardState, null, 4)
                        }).done(() => console.log("Board updated for everyone!"));
                    });

                    cell.appendChild(cellContainer);
                }
            }

            // Progress
            const progressDiv = document.createElement("div");
            progressDiv.style.marginTop = "10px";
            progressDiv.style.color = "#fff";
            progressDiv.className = "bingoProgress";
            container.appendChild(progressDiv);

            function updateProgress() {
                let completed = 0;
                for (let i = 0; i < parsedItems.length; i++)
                    if (boardState[teamKey][`tile_${i}`]) completed++;
                progressDiv.textContent = `Completed ${completed} of ${parsedItems.length} items`;
            }
            updateProgress();
        });
    }

    // Initial render
    fetchBoardData(function(boardData){
        containers.forEach(container => {
            const teamKey = container.getAttribute("data-team");
            renderBoard(container, teamKey);
        });
    });

    // --- Live update every 5s ---
    setInterval(() => {
        fetchBoardData(function(boardData){
            containers.forEach(container => {
                const teamKey = container.getAttribute("data-team");
                const cells = container.querySelectorAll("td");
                cells.forEach((cell, index) => {
                    const checkmark = cell.querySelector(".bingoCheckmark");
                    const done = boardState[teamKey][`tile_${index}`];
                    if (checkmark) {
                        checkmark.style.display = done ? "block" : "none";
                        cell.style.background = done ? "rgba(76,175,80,0.5)" : "#313e59";
                    }
                });
            });
        });
    }, 5000);

});