MediaWiki:TeamBingo.js

// --- Team Bingo Board with Smart Live Updates ---
mw.hook('wikipage.content').add(function () {

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

const infoBox = document.getElementById("teamBingoInfoBox");

infoBox.innerHTML = `
<div style="text-align:center;font-size:18px;font-weight:bold;margin-bottom:6px;">
Team Bingo Challenge
</div>

This is a <b>team-based bingo event</b>. Work together to complete tiles by obtaining drops from PvM or skilling activities.

<ul style="margin-top:6px;">
<li>Each qualifying drop = <b>1 point</b></li>
<li>Screenshots are required for submissions</li>
<li>Chests, crates, and boxes do <b>not</b> count</li>
<li>The board updates <b>live every few seconds</b></li>
</ul>

<b>Team captains</b> can mark tiles as completed.  
When a captain marks a tile, the board updates automatically for everyone viewing the page.
`;

const boardState = {};
let lastRevisionId = null;

// --------------------------------------------------
// Fetch JSON board data
// --------------------------------------------------

function fetchBoardData(callback){

$.getJSON(mw.util.wikiScript('api'),{
action:"query",
titles:"Module:TeamBingo/data.json",
prop:"revisions",
rvprop:"content",
rvslots:"main",
formatversion:2,
format:"json"
}).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);
}catch(e){
console.error("JSON parse error",e);
}

if(callback) callback(boardState);

});

}

// --------------------------------------------------
// Render Board
// --------------------------------------------------

function renderBoard(container,teamKey){

const items = JSON.parse(container.dataset.items);
const captains = container.dataset.captain.split(",").map(c=>c.trim());

const table = document.createElement("table");
table.className = "teamBingoBoard";

items.forEach((item,index)=>{

if(index % 5 === 0){
var row = document.createElement("tr");
table.appendChild(row);
}

const cell = document.createElement("td");
cell.className = "bingoTile";

cell.innerHTML = `
<div class="bingoText">${item.name}</div>
<div class="bingoCheckmark">✔</div>
`;

const done = boardState[teamKey]?.[`tile_${index}`];

if(done){
cell.style.background = "rgba(76,175,80,0.5)";
cell.querySelector(".bingoCheckmark").style.display="block";
}

cell.addEventListener("mouseenter",()=>{

infoBox.innerHTML = `
<b>${item.name}</b><br>
${item.description || ""}
`;

});

cell.addEventListener("mouseleave",()=>{

infoBox.innerHTML = `
<div style="text-align:center;font-size:18px;font-weight:bold;margin-bottom:6px;">
Team Bingo Challenge
</div>
Work together with your team to complete tiles and earn points!
`;

});

if(captains.includes(currentUser)){

cell.style.cursor="pointer";

cell.addEventListener("click",()=>{

const current = boardState[teamKey]?.[`tile_${index}`];
const newValue = !current;

boardState[teamKey][`tile_${index}`] = newValue;

updateTileVisual(cell,newValue);

saveTile(teamKey,index,newValue);

});

}

row.appendChild(cell);

});

container.innerHTML="";
container.appendChild(table);

}

// --------------------------------------------------
// Update Only Changed Tile
// --------------------------------------------------

function updateTileVisual(cell,done){

const checkmark = cell.querySelector(".bingoCheckmark");

if(done){
cell.style.background="rgba(76,175,80,0.5)";
checkmark.style.display="block";
}else{
cell.style.background="#313e59";
checkmark.style.display="none";
}

}

// --------------------------------------------------
// Save Tile to JSON Page
// --------------------------------------------------

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,2),
summary:`Updated ${teamKey} tile ${index}`,
contentmodel:"json"
});

});

}

// --------------------------------------------------
// Smart Polling (Revision Check)
// --------------------------------------------------

function checkForBoardUpdates(){

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===null){
lastRevisionId=revId;
return;
}

if(revId!==lastRevisionId){

lastRevisionId=revId;

fetchBoardData(function(newState){

updateChangedTiles(newState);

});

}

});

}

// --------------------------------------------------
// Update Only Changed Tiles
// --------------------------------------------------

function updateChangedTiles(newState){

containers.forEach(container=>{

const teamKey = container.dataset.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);

}

});

});

}

// --------------------------------------------------
// Initial Load
// --------------------------------------------------

fetchBoardData(function(){

containers.forEach(container=>{

const teamKey = container.dataset.team;
renderBoard(container,teamKey);

});

});

// --------------------------------------------------
// Start Smart Polling
// --------------------------------------------------

setInterval(checkForBoardUpdates,5000);

});