MediaWiki:BingoSheet.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
// --- Fixed 600px Bingo Board with Fixed Info Box ---
mw.hook('wikipage.content').add(function () {
var containers = document.querySelectorAll(".bingoContainer");
if (!containers.length) return;
containers.forEach(function(container) {
container.innerHTML = "";
// Wrap board + info box in flex container
var wrapper = document.createElement("div");
wrapper.style.display = "flex";
wrapper.style.gap = "20px";
wrapper.style.alignItems = "flex-start";
container.parentNode.insertBefore(wrapper, container);
wrapper.appendChild(container);
// Create fixed info box
var infoBox = document.createElement("div");
infoBox.style.padding = "10px";
infoBox.style.border = "1px solid #596e96";
infoBox.style.backgroundColor = "#313e59";
infoBox.style.color = "#fff";
infoBox.style.borderRadius = "4px";
infoBox.style.minWidth = "180px";
infoBox.style.maxWidth = "220px";
infoBox.style.whiteSpace = "normal";
infoBox.style.wordWrap = "break-word";
infoBox.style.overflow = "visible";
infoBox.style.transition = "all 0.2s ease";
infoBox.style.fontSize = "14px";
infoBox.innerHTML = `
<strong>Roat Pkz PVM Bingo #3</strong><br>
Collect drops from PVM or skilling to score points — each drop = 1 point. Screenshots required; no chests, crates, or boxes. Event ends <strong>June 28th, 11:59 PM GMT</strong>.<br><br>
<strong>Rewards:</strong><br>
- 500 CREDITS (25M+)<br>
- 300 CREDITS (15M+)<br>
- 200 CREDITS (10M+)<br><br>
Only drops <strong>after this announcement</strong> count. Submit sheets via the <strong>No Access</strong> channel or message <strong>@JAY</strong>.
`;
wrapper.appendChild(infoBox);
// Parse items: Item Name::Custom Tooltip (use %% for line breaks)
var itemsAttr = container.getAttribute("data-items");
var items = itemsAttr.split("|").filter(i => i.trim() !== "");
if (!items.length) return;
var parsedItems = items.map(entry => {
var parts = entry.split("::");
return {
name: parts[0].trim(),
tooltip: parts[1] ? parts[1].trim() : parts[0].trim()
};
});
// Build table
var 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 = "600px"; // fixed width
container.appendChild(table);
var rows = Math.ceil(Math.sqrt(parsedItems.length));
var cols = Math.ceil(parsedItems.length / rows);
// Single API call for all images
var 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;
var tempDiv = document.createElement("div");
tempDiv.innerHTML = data.parse.text["*"];
var imgs = tempDiv.querySelectorAll("img");
for (let r = 0; r < rows; r++) {
var row = table.insertRow();
for (let c = 0; c < cols; c++) {
let index = r * cols + c;
if (index >= parsedItems.length) break;
let item = parsedItems[index];
let cell = row.insertCell();
cell.style.width = `${100 / cols}%`;
cell.style.padding = "10px";
cell.style.border = "1px solid #596e96";
cell.style.textAlign = "center";
cell.style.background = "#313e59";
cell.style.color = "#fff";
cell.style.cursor = "pointer";
cell.style.transition = "all 0.2s ease";
cell.style.userSelect = "none";
cell.style.wordWrap = "break-word";
cell.style.overflow = "visible";
cell.style.position = "relative";
let id = `${container.id}_cell_${index}`;
cell.id = id;
// Container for image, name, checkmark
let cellContainer = document.createElement("div");
cellContainer.style.position = "relative";
cellContainer.style.width = "100%";
cellContainer.style.height = "100%";
// Image
if (imgs[index]) {
let 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
let nameDiv = document.createElement("div");
nameDiv.textContent = item.name;
nameDiv.style.marginTop = "5px";
nameDiv.style.pointerEvents = "none";
cellContainer.appendChild(nameDiv);
// Checkmark top-right
let 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.background = "none";
checkmark.style.display = "none";
cellContainer.appendChild(checkmark);
// Hover shows info in the fixed box
cell.addEventListener("mouseenter", function() {
if (localStorage.getItem(this.id) !== "true") {
this.style.background = "#3b4a6b";
}
// Clear info box
infoBox.innerHTML = "";
// Add name header
let header = document.createElement("div");
header.style.fontWeight = "bold";
header.style.marginBottom = "5px";
header.textContent = item.name;
infoBox.appendChild(header);
// Add image
if (imgs[index]) {
let 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);
}
// Add multi-line tooltip
item.tooltip.split("%%").forEach(line => {
let div = document.createElement("div");
div.innerHTML = line.trim();
infoBox.appendChild(div);
});
});
// Mouse leave restores default info
cell.addEventListener("mouseleave", function() {
if (localStorage.getItem(this.id) !== "true") {
this.style.background = "#313e59";
}
infoBox.innerHTML = `
<strong>Roat Pkz PVM Bingo #3</strong><br>
Collect drops from PVM or skilling to score points — each drop = 1 point. Screenshots required; no chests, crates, or boxes. Event ends <strong>June 28th, 11:59 PM GMT</strong>.<br><br>
<strong>Rewards:</strong><br>
- 500 CREDITS (25M+)<br>
- 300 CREDITS (15M+)<br>
- 200 CREDITS (10M+)<br><br>
Only drops <strong>after this announcement</strong> count. Submit sheets via the <strong>No Access</strong> channel or message <strong>@JAY</strong>.
`;
});
// Click toggle complete
cell.addEventListener("click", function() {
let done = localStorage.getItem(this.id) === "true";
localStorage.setItem(this.id, !done);
this.style.background = !done ? "rgba(76,175,80,0.5)" : "#313e59";
checkmark.style.display = !done ? "block" : "none";
updateProgress(container, parsedItems.length);
});
// Load saved state
if (localStorage.getItem(id) === "true") {
cell.style.background = "rgba(76,175,80,0.5)";
checkmark.style.display = "block";
}
cell.appendChild(cellContainer);
}
}
// Progress counter
let progressDiv = document.createElement("div");
progressDiv.style.marginTop = "10px";
progressDiv.style.color = "#fff";
progressDiv.className = "bingoProgress";
container.appendChild(progressDiv);
// Reset button
let resetBtn = document.createElement("button");
resetBtn.textContent = "Reset Bingo";
resetBtn.style.marginTop = "5px";
resetBtn.style.cursor = "pointer";
resetBtn.addEventListener("click", function () {
for (let i = 0; i < parsedItems.length; i++) {
let cb = document.getElementById(`${container.id}_cell_${i}`);
if (cb) {
localStorage.setItem(cb.id, false);
cb.style.background = "#313e59";
let check = cb.querySelector(".bingoCheckmark");
if (check) check.style.display = "none";
}
}
updateProgress(container, parsedItems.length);
});
container.appendChild(resetBtn);
updateProgress(container, parsedItems.length);
});
function updateProgress(container, total) {
let completed = 0;
for (let i = 0; i < total; i++) {
let cb = document.getElementById(`${container.id}_cell_${i}`);
if (cb && localStorage.getItem(cb.id) === "true") completed++;
}
let progressDiv = container.querySelector(".bingoProgress");
if (progressDiv)
progressDiv.textContent = `Completed ${completed} of ${total} items`;
}
});
});