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

const defaultInfoHTML = `
<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 automatically</b></li>
</ul>

<b>Team captains</b> can mark tiles as completed.
`;

infoBox.innerHTML = defaultInfoHTML;

const boardState = {};
let lastRevisionId = null;
let isSaving = false;

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

function fetchBoardData(callback){

$.getJSON(mw.util.wikiScript('api'),{
action:"query",
titles:"Module:TeamBingo/data.json",
prop:"revisions",
rvprop:"content|ids",
rvslots:"main",
formatversion:2,
format:"json"
}).done(function(data){

const page = data.query.pages[0];
if(!page.revisions) return;

const revision = page.revisions[0];
const content = revision.slots.main.content;

lastRevisionId = revision.revid;

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

if(!boardState[teamKey]){
boardState[teamKey] = {};
}

const rawItems = container.dataset.items.trim();

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

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

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

let row = null;

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

if(index % 5 === 0){
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 = defaultInfoHTML;
});

if(captains.includes(currentUser.toLowerCase())){

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 Tile Visual
// --------------------------------------------------

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

if(isSaving) return;
isSaving = true;

fetchBoardData(function(data){

if(!data[teamKey]) data[teamKey] = {};

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"
}).always(()=>{
isSaving = false;
});

});

}

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

function checkForBoardUpdates(){

if(document.hidden || isSaving) 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(revId === lastRevisionId) return;

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

});