MediaWiki:TeamBingo.js: Difference between revisions

From Roat Pkz
Jump to navigation Jump to search
No edit summary
No edit summary
Line 6: Line 6:
     if (!containers.length) return;
     if (!containers.length) return;


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


Line 18: Line 17:
<strong>Rules:</strong><br>
<strong>Rules:</strong><br>
- Only <strong>team captains</strong> can mark tiles for their team.<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>
- Your board updates <strong>in real time every 30 seconds</strong> for all team members.<br>
- Screenshots of drops/items are required for verification.<br>
- Screenshots of drops/items are required for verification.<br>
- Chests, crates, and boxes do <em>not</em> count.<br><br>
- Chests, crates, and boxes do <em>not</em> count.<br><br>
Line 39: Line 38:
             titles: 'Module:TeamBingo/data.json',
             titles: 'Module:TeamBingo/data.json',
             prop: 'revisions',
             prop: 'revisions',
             rvprop: 'content|ids',
             rvprop: 'content',
            rvslots: 'main',
             format: 'json',
             format: 'json',
             formatversion: 2
             formatversion: 2
         }).done(function(data){
         }).done(function(data){
             const page = data.query.pages[0];
             if (!data.query.pages[0].revisions) return;
            if(!page.revisions) return;
             const content = data.query.pages[0].revisions[0].content;
             const content = page.revisions[0].slots.main.content;
            const revId = page.revisions[0].revid;
 
             try {
             try {
                 const json = JSON.parse(content);
                 const json = JSON.parse(content);
                 if(callback) callback(json, revId);
                Object.assign(boardState, json); // update central state
                 if(callback) callback(boardState);
             } catch(e) {
             } catch(e) {
                 console.error("Failed to parse JSON from Module:TeamBingo/data.json", e);
                 console.error("Failed to parse JSON from Module:TeamBingo/data.json", e);
Line 58: Line 54:
     }
     }


     // Render the board
     // Render board function stays exactly the same
     function renderBoard(container, teamKey) {
     function renderBoard(container, teamKey) {
 
         // ... your full renderBoard function untouched ...
        container.innerHTML = "";
         // This includes table creation, hover, click handling, checkmark update, progress bar, etc.
        const captain = container.getAttribute("data-captain");
        const itemsAttr = container.getAttribute("data-items");
        if (!itemsAttr) return;
 
         // --- ADD 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() !== "");
        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
                    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 = `
<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>
`;
                    });
 
                    // Click (captain only)
                    cell.addEventListener("click", function() {
                        const captainList = container.getAttribute("data-captain").split(",").map(u => u.trim());
                        if (!captainList.includes(currentUser)) return;
 
                        const done = boardState[teamKey]?.[`tile_${index}`] ?? false;
                        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
     // Initial render
     fetchBoardData(function(boardData, revId){
     fetchBoardData(function(boardData){
        Object.assign(boardState, boardData);
        lastRevisionId = revId;
         containers.forEach(container => {
         containers.forEach(container => {
             const teamKey = container.getAttribute("data-team");
             const teamKey = container.getAttribute("data-team");
Line 263: Line 68:
     });
     });


     // --- Smart polling every 5s ---
     // --- SMART POLLING ---
     setInterval(() => {
     function smartPoll() {
         fetchBoardData(function(newData, revId){
        if(document.hidden) return;
 
        // Only get the revision ID to check if board changed
        $.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 === null) {
             if(lastRevisionId === null) {
                 lastRevisionId = revId;
                 lastRevisionId = revId;
                 return;
                 return; // first time, no update
             }
             }


             if(revId !== lastRevisionId){
             if(revId !== lastRevisionId) {
                 lastRevisionId = revId;
                 lastRevisionId = revId;
 
                // Only fetch full JSON if revision changed
                 containers.forEach(container => {
                 fetchBoardData(function(newState){
                    const teamKey = container.getAttribute("data-team");
                    // Update only changed tiles
                    if(!boardState[teamKey]) boardState[teamKey] = {};
                    containers.forEach(container => {
                    if(!newData[teamKey]) return;
                        const teamKey = container.getAttribute("data-team");
 
                        const cells = container.querySelectorAll("td");
                    const cells = container.querySelectorAll("td");
                        cells.forEach((cell,index) => {
                    cells.forEach((cell,index)=>{
                            const oldVal = boardState[teamKey][`tile_${index}`];
                        const oldVal = boardState[teamKey][`tile_${index}`] ?? false;
                            const newVal = newState[teamKey][`tile_${index}`];
                        const newVal = newData[teamKey][`tile_${index}`] ?? false;
                            if(oldVal !== newVal) {
                        if(oldVal !== newVal){
                                boardState[teamKey][`tile_${index}`] = newVal;
                            boardState[teamKey][`tile_${index}`] = newVal;
                                const checkmark = cell.querySelector(".bingoCheckmark");
                            const checkmark = cell.querySelector(".bingoCheckmark");
                                if(checkmark) {
                            if(checkmark){
                                    checkmark.style.display = newVal ? "block" : "none";
                                checkmark.style.display = newVal ? "block" : "none";
                                    cell.style.background = newVal ? "rgba(76,175,80,0.5)" : "#313e59";
                                cell.style.background = newVal ? "rgba(76,175,80,0.5)" : "#313e59";
                                }
                             }
                             }
                         }
                         });
                     });
                     });
                 });
                 });
             }
             }
         });
         });
     }, 5000);
     }
 
    // Poll every 5 seconds
    setInterval(smartPoll, 5000);


});
});

Revision as of 17:32, 7 March 2026

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

    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 30 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',
            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
                if(callback) callback(boardState);
            } catch(e) {
                console.error("Failed to parse JSON from Module:TeamBingo/data.json", e);
            }
        });
    }

    // Render board function stays exactly the same
    function renderBoard(container, teamKey) {
        // ... your full renderBoard function untouched ...
        // This includes table creation, hover, click handling, checkmark update, progress bar, etc.
    }

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

    // --- SMART POLLING ---
    function smartPoll() {
        if(document.hidden) return;

        // Only get the revision ID to check if board changed
        $.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 === null) {
                lastRevisionId = revId;
                return; // first time, no update
            }

            if(revId !== lastRevisionId) {
                lastRevisionId = revId;
                // Only fetch full JSON if revision changed
                fetchBoardData(function(newState){
                    // Update only changed tiles
                    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;
                                const checkmark = cell.querySelector(".bingoCheckmark");
                                if(checkmark) {
                                    checkmark.style.display = newVal ? "block" : "none";
                                    cell.style.background = newVal ? "rgba(76,175,80,0.5)" : "#313e59";
                                }
                            }
                        });
                    });
                });
            }
        });
    }

    // Poll every 5 seconds
    setInterval(smartPoll, 5000);

});