MediaWiki:TeamBingo.js

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

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

    // Shared info box
    const infoBox = document.getElementById("teamBingoInfoBox");

    // Set default bingo info immediately on page load
    infoBox.innerHTML = `
<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 every 5 seconds</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>
`;

    const boardState = {}; // central source of truth for all tiles
    let lastRevisionId = null;

    // --------------------------------------------------
    // Fetch JSON from Module page
    // --------------------------------------------------
    function fetchBoardData(callback) {
        $.getJSON(mw.util.wikiScript('api'), {
            action: 'query',
            titles: 'Module:TeamBingo/data.json',
            prop: 'revisions',
            rvprop: 'content|ids',
            rvslots: 'main',
            format: 'json',
            formatversion: 2
        }).done(function(data){
            const page = data.query.pages[0];
            if(!page.revisions) return;

            const content = page.revisions[0].slots.main.content;
            try {
                const json = JSON.parse(content);
                Object.assign(boardState,json); // update central state
                lastRevisionId = page.revisions[0].revid;
                if(callback) 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());
        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);

        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);

        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();
                    cell.style.width = `${100 / cols}%`;
                    cell.style.padding = "10px";
                    cell.style.border = "1px solid #596e96";
                    cell.style.textAlign = "center";
                    cell.style.cursor = "pointer";
                    cell.style.transition = "all 0.2s ease";
                    cell.style.position = "relative";
                    cell.style.userSelect = "none";
                    container.appendChild(table);

                    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);

                    cell.appendChild(cellContainer);

                    // Hover
                    cell.addEventListener("mouseenter", function() {
                        if (!boardState[teamKey][`tile_${index}`]) cell.style.background = "#3b4a6b";
                        infoBox.innerHTML = `<b>${item.name}</b><br>${item.tooltip}`;
                    });
                    cell.addEventListener("mouseleave", function() {
                        cell.style.background = boardState[teamKey][`tile_${index}`] ? "rgba(76,175,80,0.5)" : "#313e59";
                        infoBox.innerHTML = `
<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 every 5 seconds</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>
`;
                    });

                    // Click
                    if (captains.includes(currentUser)) {
                        cell.addEventListener("click", function() {
                            const done = boardState[teamKey][`tile_${index}`];
                            boardState[teamKey][`tile_${index}`] = !done;
                            updateTileVisual(cell, boardState[teamKey][`tile_${index}`]);
                            saveTile(teamKey, index, boardState[teamKey][`tile_${index}`]);
                        });
                    }
                }
            }

            // 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();
        });
    }

    // --------------------------------------------------
    // Update Tile Visual
    // --------------------------------------------------
    function updateTileVisual(cell, done) {
        const checkmark = cell.querySelector(".bingoCheckmark");
        checkmark.style.display = done ? "block" : "none";
        cell.style.background = done ? "rgba(76,175,80,0.5)" : "#313e59";
    }

    // --------------------------------------------------
    // Save Tile
    // --------------------------------------------------
    function saveTile(teamKey, index, value) {
        fetchBoardData(function(data) {
            data[teamKey][`tile_${index}`] = value;
            new mw.Api().postWithToken("csrf", {
                action: "edit",
                title: "Module:TeamBingo/data.json",
                text: JSON.stringify(data, null, 4),
                summary: `Updated ${teamKey} tile ${index}`,
                contentmodel: "json"
            });
        });
    }

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

    // --------------------------------------------------
    // Smart Polling Every 5s
    // --------------------------------------------------
    setInterval(function() {
        // skip polling if page hidden
        if(document.hidden) return;

        $.getJSON(mw.util.wikiScript('api'), {
            action: 'query',
            titles: 'Module:TeamBingo/data.json',
            prop: 'revisions',
            rvprop: 'ids',
            format: 'json',
            formatversion: 2
        }).done(function(data){
            const page = data.query.pages[0];
            if(!page.revisions) return;
            const revId = page.revisions[0].revid;

            if(lastRevisionId === revId) return;
            lastRevisionId = revId;

            // Fetch updated board
            fetchBoardData(function(newState) {
                containers.forEach(container => {
                    const teamKey = container.getAttribute("data-team");
                    const cells = container.querySelectorAll("td");
                    cells.forEach((cell, index) => {
                        const oldVal = boardState[teamKey][`tile_${index}`];
                        const newVal = newState[teamKey][`tile_${index}`];
                        if(oldVal !== newVal){
                            boardState[teamKey][`tile_${index}`] = newVal;
                            updateTileVisual(cell,newVal);
                        }
                    });
                });
            });
        });
    }, 5000);

});