MediaWiki:TeamBingo.js

// --- Team Bingo Board with Captains and Live JSON via Echo ---
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");

    // Set default bingo info immediately on page load
    const defaultInfo = `
<div style="text-align: center; font-weight: bold; font-size: 16px; margin-bottom: 8px;">
  Team Bingo Challenge
</div>
Welcome to the <strong>Roat Pkz Team Bingo #3</strong> event. Each team has its own bingo board — your goal is to collect the drops or items listed on your team’s board to score points. Each completed tile = 1 point.<br><br>

<strong>Rules:</strong><br>
- Only <strong>team captains</strong> can mark tiles for their team.<br>
- Your board updates <strong>in real time</strong> for all team members.<br>
- Screenshots of drops/items are required for verification.<br>
- Chests, crates, and boxes do <em>not</em> count.<br><br>

<strong>Event ends:</strong> June 28th, 11:59 PM GMT<br><br>

<strong>Rewards:</strong><br>
- 500 CREDITS (25M+) — 1st place<br>
- 300 CREDITS (15M+) — 2nd place<br>
- 200 CREDITS (10M+) — 3rd place<br><br>
`;
    infoBox.innerHTML = defaultInfo;

    const boardState = {}; // central source of truth

    // 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);
                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 captainAttr = container.getAttribute("data-captain");
        const captains = captainAttr.split(',').map(c => c.trim()); // multiple captains allowed
        const itemsAttr = container.getAttribute("data-items");
        if (!itemsAttr) return;

        // --- TEAM NAME ---
        const teamNameDiv = document.createElement("div");
        teamNameDiv.textContent = container.getAttribute("data-team") === "teamA" ? "Team A" : "Team B";
        teamNameDiv.style.fontWeight = "bold";
        teamNameDiv.style.fontSize = "18px";
        teamNameDiv.style.color = "#fff";
        teamNameDiv.style.textAlign = "center";
        teamNameDiv.style.marginBottom = "10px";
        container.appendChild(teamNameDiv);
        // --- END TEAM NAME ---

        const items = itemsAttr.split("|").filter(i => i.trim() !== "");
        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);

        // Images via parse API
        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 tooltip
                    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 = defaultInfo;
                    });

                    // Click to toggle (captains only)
                    cell.addEventListener("click", function() {
                        if (!captains.includes(currentUser)) 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!");
                            // Trigger Echo custom event
                            mw.echo.send({
                                type: 'bingo-board-update',
                                content: { team: teamKey }
                            });
                        });
                    });

                    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(() => {
        containers.forEach(container => renderBoard(container, container.getAttribute("data-team")));
    });

    // --- Subscribe to Echo event for live updates ---
    if (mw.echo) {
        mw.echo.subscribe('bingo-board-update', () => {
            fetchBoardData(() => {
                containers.forEach(container => renderBoard(container, container.getAttribute("data-team")));
            });
        });
    }

});