MediaWiki:BingoSheet.js - Revision history

Hefner at 14:05, 7 March 2026

2026-03-07T14:05:50Z

← Older revision		Revision as of 14:05, 7 March 2026
Line 133:		Line 133:
	checkmark.style.position = "absolute";		checkmark.style.position = "absolute";
	checkmark.style.top = "2px";		checkmark.style.top = "2px";
	checkmark.style.right = "~~2px~~";		checkmark.style.right = "6px";
	checkmark.style.fontSize = "20px";		checkmark.style.fontSize = "20px";
	checkmark.style.color = "#4CAF50";		checkmark.style.color = "#4CAF50";

Hefner at 14:04, 7 March 2026

2026-03-07T14:04:51Z

← Older revision		Revision as of 14:04, 7 March 2026
Line 36:		Line 36:
	- 300 CREDITS (15M+)<br>		- 300 CREDITS (15M+)<br>
	- 200 CREDITS (10M+)<br><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>~~.		Only drops <strong>after this announcement</strong> count.
	`;		`;
	wrapper.appendChild(infoBox);		wrapper.appendChild(infoBox);
Line 191:		Line 191:
	- 300 CREDITS (15M+)<br>		- 300 CREDITS (15M+)<br>
	- 200 CREDITS (10M+)<br><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>~~.		Only drops <strong>after this announcement</strong> count.
	`;		`;
	});		});

Hefner at 13:57, 7 March 2026

2026-03-07T13:57:12Z

← Older revision		Revision as of 13:57, 7 March 2026
Line 1:		Line 1:
	// --- Fixed 600px Bingo Board with Fixed Info Box ---		// --- Fixed 600px Bingo Board with Fixed Info Box & Correct Checkmarks ---
	mw.hook('wikipage.content').add(function () {		mw.hook('wikipage.content').add(function () {
	var containers = document.querySelectorAll(".bingoContainer");		var containers = document.querySelectorAll(".bingoContainer");
Line 29:		Line 29:
	infoBox.style.transition = "all 0.2s ease";		infoBox.style.transition = "all 0.2s ease";
	infoBox.style.fontSize = "14px";		infoBox.style.fontSize = "14px";
	infoBox.innerHTML = `		infoBox.innerHTML = `
	<strong>Roat Pkz PVM Bingo #3</strong><br>		<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>		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>
Line 102:		Line 102:
	cell.id = id;		cell.id = id;

	// Container for image, name~~, checkmark~~		// Container for image + name
	let cellContainer = document.createElement("div");		let cellContainer = document.createElement("div");
	cellContainer.style.position = "relative";		cellContainer.style.position = "relative";
Line 127:		Line 127:
	cellContainer.appendChild(nameDiv);		cellContainer.appendChild(nameDiv);

	// Checkmark top-right		// ✅ Checkmark in top-right of cell
	let checkmark = document.createElement("div");		let checkmark = document.createElement("div");
	checkmark.textContent = "✔";		checkmark.textContent = "✔";
Line 137:		Line 137:
	checkmark.style.color = "#4CAF50";		checkmark.style.color = "#4CAF50";
	checkmark.style.background = "none";		checkmark.style.background = "none";
	checkmark.style.display = "none";		checkmark.style.pointerEvents = "none";
	~~cellContainer~~.appendChild(checkmark);		checkmark.style.zIndex = "10";
			checkmark.style.display = localStorage.getItem(id) === "true" ? "block" : "none";
			cell.appendChild(checkmark);

			// Append image + name after checkmark
			cell.appendChild(cellContainer);

	// Hover shows info in the fixed box		// Hover shows info in the fixed box
Line 146:		Line 151:
	}		}

	~~// Clear info box~~
	infoBox.innerHTML = "";		infoBox.innerHTML = "";

	// ~~Add name~~ header		// Name header
	let header = document.createElement("div");		let header = document.createElement("div");
	header.style.fontWeight = "bold";		header.style.fontWeight = "bold";
Line 156:		Line 160:
	infoBox.appendChild(header);		infoBox.appendChild(header);

	// ~~Add image~~		// Image
	if (imgs[index]) {		if (imgs[index]) {
	let hoverImg = document.createElement("img");		let hoverImg = document.createElement("img");
Line 167:		Line 171:
	}		}

	// ~~Add multi~~-line tooltip		// Multi-line tooltip
	item.tooltip.split("%%").forEach(line => {		item.tooltip.split("%%").forEach(line => {
	let div = document.createElement("div");		let div = document.createElement("div");
Line 180:		Line 184:
	this.style.background = "#313e59";		this.style.background = "#313e59";
	}		}
	infoBox.innerHTML = `		infoBox.innerHTML = `
	<strong>Roat Pkz PVM Bingo #3</strong><br>		<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>		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>
Line 205:		Line 209:
	checkmark.style.display = "block";		checkmark.style.display = "block";
	}		}

	~~cell.appendChild(cellContainer);~~
	}		}
	}		}

Hefner at 13:54, 7 March 2026

2026-03-07T13:54:00Z

← Older revision		Revision as of 13:54, 7 March 2026
Line 18:		Line 18:
	var infoBox = document.createElement("div");		var infoBox = document.createElement("div");
	infoBox.style.padding = "10px";		infoBox.style.padding = "10px";
	infoBox.style.border = "1px solid #~~000~~";		infoBox.style.border = "1px solid #596e96";
	infoBox.style.backgroundColor = "#313e59";		infoBox.style.backgroundColor = "#313e59";
	infoBox.style.color = "#fff";		infoBox.style.color = "#fff";
Line 88:		Line 88:
	cell.style.width = `${100 / cols}%`;		cell.style.width = `${100 / cols}%`;
	cell.style.padding = "10px";		cell.style.padding = "10px";
	cell.style.border = "1px solid #~~444~~";		cell.style.border = "1px solid #596e96";
	cell.style.textAlign = "center";		cell.style.textAlign = "center";
	cell.style.background = "#313e59";		cell.style.background = "#313e59";

Hefner at 13:52, 7 March 2026

2026-03-07T13:52:33Z

← Older revision		Revision as of 13:52, 7 March 2026
Line 180:		Line 180:
	this.style.background = "#313e59";		this.style.background = "#313e59";
	}		}
	infoBox.innerHTML = ~~"Hover over a tile~~ to ~~see its info here~~.";		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>.
			`;
	});		});

Hefner at 13:51, 7 March 2026

2026-03-07T13:51:45Z

← Older revision		Revision as of 13:51, 7 March 2026
Line 29:		Line 29:
	infoBox.style.transition = "all 0.2s ease";		infoBox.style.transition = "all 0.2s ease";
	infoBox.style.fontSize = "14px";		infoBox.style.fontSize = "14px";
	infoBox.innerHTML = ~~"Hover over a tile~~ to ~~see its info here~~."; // ~~default rules~~		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);		wrapper.appendChild(infoBox);

Hefner at 13:50, 7 March 2026

2026-03-07T13:50:02Z

← Older revision		Revision as of 13:50, 7 March 2026
Line 1:		Line 1:
	// --- Fixed 600px Bingo Board with ~~Multi-line Tooltips (full update)~~ ---		// --- Fixed 600px Bingo Board with Fixed Info Box ---
	mw.hook('wikipage.content').add(function () {		mw.hook('wikipage.content').add(function () {
	var containers = document.querySelectorAll(".bingoContainer");		var containers = document.querySelectorAll(".bingoContainer");
Line 7:		Line 7:
	container.innerHTML = "";		container.innerHTML = "";

	// Wrap board + ~~tooltip~~ in flex container		// Wrap board + info box in flex container
	var wrapper = document.createElement("div");		var wrapper = document.createElement("div");
	wrapper.style.display = "flex";		wrapper.style.display = "flex";
	wrapper.style.gap = "20px";		wrapper.style.gap = "20px";
	wrapper.style.alignItems = "flex-start"; ~~// tooltip aligns top~~		wrapper.style.alignItems = "flex-start";
	container.parentNode.insertBefore(wrapper, container);		container.parentNode.insertBefore(wrapper, container);
	wrapper.appendChild(container);		wrapper.appendChild(container);

	// Create fixed ~~tooltip~~ box		// Create fixed info box
	var ~~tooltipBox~~ = document.createElement("div");		var infoBox = document.createElement("div");
	~~tooltipBox~~.style.padding = "10px";		infoBox.style.padding = "10px";
	~~tooltipBox~~.style.border = "1px solid #000";		infoBox.style.border = "1px solid #000";
	~~tooltipBox~~.style.backgroundColor = "#313e59";		infoBox.style.backgroundColor = "#313e59";
	~~tooltipBox~~.style.color = "#fff";		infoBox.style.color = "#fff";
	~~tooltipBox~~.style.borderRadius = "4px";		infoBox.style.borderRadius = "4px";
	~~tooltipBox~~.style.minWidth = "180px";		infoBox.style.minWidth = "180px";
	~~tooltipBox~~.style.maxWidth = "~~200px~~";		infoBox.style.maxWidth = "220px";
	~~tooltipBox~~.style.~~display~~ = "~~none~~";		infoBox.style.whiteSpace = "normal";
	~~tooltipBox~~.style.~~pointerEvents~~ = "~~none~~";		infoBox.style.wordWrap = "break-word";
	~~tooltipBox~~.style.~~transition~~ = "~~all 0.2s ease~~";		infoBox.style.overflow = "visible";
	~~tooltipBox~~.style.~~whiteSpace~~ = "~~normal~~";		infoBox.style.transition = "all 0.2s ease";
	~~tooltipBox~~.style.~~wordWrap~~ = "~~break-word~~";		infoBox.style.fontSize = "14px";
	~~tooltipBox.style~~.~~overflow~~ = "~~visible~~";		infoBox.innerHTML = "Hover over a tile to see its info here."; // default rules
	wrapper.appendChild(~~tooltipBox~~);		wrapper.appendChild(infoBox);

	// Parse items: Item Name::Custom Tooltip (use \|\| for line breaks)		// Parse items: Item Name::Custom Tooltip (use %% for line breaks)
	var itemsAttr = container.getAttribute("data-items");		var itemsAttr = container.getAttribute("data-items");
	var items = itemsAttr.split("\|").filter(i => i.trim() !== "");		var items = itemsAttr.split("\|").filter(i => i.trim() !== "");
Line 132:		Line 132:
	cellContainer.appendChild(checkmark);		cellContainer.appendChild(checkmark);

	// ~~Full-tile hover~~ shows ~~tooltip~~		// Hover shows info in the fixed box
	cell.addEventListener("mouseenter", function() {		cell.addEventListener("mouseenter", function() {
	if (localStorage.getItem(this.id) !== "true") {		if (localStorage.getItem(this.id) !== "true") {
	this.style.background = "#3b4a6b";		this.style.background = "#3b4a6b";
	}		}
	// ~~Split tooltip by \|\| and create separate divs for lines~~
	~~tooltipBox~~.innerHTML = "";		// Clear info box
	let ~~lines~~ = item.tooltip.split("%%");		infoBox.innerHTML = "";
	~~lines~~.forEach(line => {
			// 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");		let div = document.createElement("div");
	div.innerHTML = line.trim();		div.innerHTML = line.trim();
	~~tooltipBox~~.appendChild(div);		infoBox.appendChild(div);
	});		});
	~~tooltipBox.style.display = "block";~~
	});		});

			// Mouse leave restores default info
	cell.addEventListener("mouseleave", function() {		cell.addEventListener("mouseleave", function() {
	if (localStorage.getItem(this.id) !== "true") {		if (localStorage.getItem(this.id) !== "true") {
	this.style.background = "#313e59";		this.style.background = "#313e59";
	}		}
	~~tooltipBox~~.~~style.display~~ = "~~none~~";		infoBox.innerHTML = "Hover over a tile to see its info here.";
	});		});

Hefner at 13:43, 7 March 2026

2026-03-07T13:43:05Z

← Older revision		Revision as of 13:43, 7 March 2026
Line 139:		Line 139:
	// Split tooltip by \|\| and create separate divs for lines		// Split tooltip by \|\| and create separate divs for lines
	tooltipBox.innerHTML = "";		tooltipBox.innerHTML = "";
	let lines = item.tooltip.split("\|\|");		let lines = item.tooltip.split("%%");
	lines.forEach(line => {		lines.forEach(line => {
	let div = document.createElement("div");		let div = document.createElement("div");

Hefner at 13:41, 7 March 2026

2026-03-07T13:41:48Z

Hefner at 13:39, 7 March 2026

2026-03-07T13:39:58Z

← Older revision		Revision as of 13:39, 7 March 2026
Line 1:		Line 1:
	// --- Fixed 600px Bingo Board with ~~Tooltip~~ ---		// --- Fixed 600px Bingo Board with Multi-line Tooltips ---
	mw.hook('wikipage.content').add(function () {		mw.hook('wikipage.content').add(function () {

	var containers = document.querySelectorAll(".bingoContainer");		var containers = document.querySelectorAll(".bingoContainer");
	if (!containers.length) return;		if (!containers.length) return;
Line 25:		Line 24:
	tooltipBox.style.minWidth = "180px";		tooltipBox.style.minWidth = "180px";
	tooltipBox.style.maxWidth = "200px";		tooltipBox.style.maxWidth = "200px";
	tooltipBox.style.display = "none"; ~~// hide initially~~		tooltipBox.style.display = "none";
	tooltipBox.style.pointerEvents = "none";		tooltipBox.style.pointerEvents = "none";
	tooltipBox.style.transition = "all 0.2s ease";		tooltipBox.style.transition = "all 0.2s ease";
			tooltipBox.style.whiteSpace = "normal"; // allow line breaks
			tooltipBox.style.wordWrap = "break-word"; // wrap long lines
			tooltipBox.style.overflow = "visible";
	wrapper.appendChild(tooltipBox);		wrapper.appendChild(tooltipBox);

	// Get items: format Item Name::Custom Hover Text		// Get items: format Item Name::Custom Hover Text (use \|\| for line breaks)
	var itemsAttr = container.getAttribute("data-items");		var itemsAttr = container.getAttribute("data-items");
	var items = itemsAttr.split("\|").filter(i => i.trim() !== "");		var items = itemsAttr.split("\|").filter(i => i.trim() !== "");
Line 57:		Line 59:
	// Single API call for all images		// Single API call for all images
	var allTemplates = parsedItems.map(item => `{{plinkp\|${item.name}}}`).join("\n");		var allTemplates = parsedItems.map(item => `{{plinkp\|${item.name}}}`).join("\n");

	$.getJSON("/api.php", {		$.getJSON("/api.php", {
	action: "parse",		action: "parse",
Line 137:		Line 138:
	}		}
	tooltipBox.innerHTML = item.tooltip.replace(/\\|\\|/g, "<br>");		tooltipBox.innerHTML = item.tooltip.replace(/\\|\\|/g, "<br>");
	~~tooltipBox.style.whiteSpace = "normal"; // allow multiple lines~~
	tooltipBox.style.display = "block";		tooltipBox.style.display = "block";
	});		});

← Older revision		Revision as of 13:41, 7 March 2026
Line 1:		Line 1:
	// --- Fixed 600px Bingo Board with Multi-line Tooltips ---		// --- Fixed 600px Bingo Board with Multi-line Tooltips (full update) ---
	mw.hook('wikipage.content').add(function () {		mw.hook('wikipage.content').add(function () {
	var containers = document.querySelectorAll(".bingoContainer");		var containers = document.querySelectorAll(".bingoContainer");
Line 11:		Line 11:
	wrapper.style.display = "flex";		wrapper.style.display = "flex";
	wrapper.style.gap = "20px";		wrapper.style.gap = "20px";
	wrapper.style.alignItems = "flex-start"; // tooltip aligns to top		wrapper.style.alignItems = "flex-start"; // tooltip aligns top
	container.parentNode.insertBefore(wrapper, container);		container.parentNode.insertBefore(wrapper, container);
	wrapper.appendChild(container);		wrapper.appendChild(container);

	// Create fixed tooltip box ~~inside wrapper~~		// Create fixed tooltip box
	var tooltipBox = document.createElement("div");		var tooltipBox = document.createElement("div");
	tooltipBox.style.padding = "10px";		tooltipBox.style.padding = "10px";
Line 27:		Line 27:
	tooltipBox.style.pointerEvents = "none";		tooltipBox.style.pointerEvents = "none";
	tooltipBox.style.transition = "all 0.2s ease";		tooltipBox.style.transition = "all 0.2s ease";
	tooltipBox.style.whiteSpace = "normal"; ~~// allow line breaks~~		tooltipBox.style.whiteSpace = "normal";
	tooltipBox.style.wordWrap = "break-word"; ~~// wrap long lines~~		tooltipBox.style.wordWrap = "break-word";
	tooltipBox.style.overflow = "visible";		tooltipBox.style.overflow = "visible";
	wrapper.appendChild(tooltipBox);		wrapper.appendChild(tooltipBox);

	// ~~Get~~ items: ~~format~~ Item Name::Custom ~~Hover Text~~ (use \|\| for line breaks)		// Parse items: Item Name::Custom Tooltip (use \|\| for line breaks)
	var itemsAttr = container.getAttribute("data-items");		var itemsAttr = container.getAttribute("data-items");
	var items = itemsAttr.split("\|").filter(i => i.trim() !== "");		var items = itemsAttr.split("\|").filter(i => i.trim() !== "");
Line 132:		Line 132:
	cellContainer.appendChild(checkmark);		cellContainer.appendChild(checkmark);

	// Full tile hover ~~updates fixed~~ tooltip		// Full-tile hover shows tooltip
	cell.addEventListener("mouseenter", function() {		cell.addEventListener("mouseenter", function() {
	if (localStorage.getItem(this.id) !== "true") {		if (localStorage.getItem(this.id) !== "true") {
	this.style.background = "#3b4a6b";		this.style.background = "#3b4a6b";
	}		}
	tooltipBox.innerHTML = item.tooltip.~~replace~~(/\\|\\|~~/g,~~ "~~<br~~>");		// Split tooltip by \|\| and create separate divs for lines
			tooltipBox.innerHTML = "";
			let lines = item.tooltip.split("\|\|");
			lines.forEach(line => {
			let div = document.createElement("div");
			div.innerHTML = line.trim();
			tooltipBox.appendChild(div);
			});
	tooltipBox.style.display = "block";		tooltipBox.style.display = "block";
	});		});

	cell.addEventListener("mouseleave", function() {		cell.addEventListener("mouseleave", function() {
	if (localStorage.getItem(this.id) !== "true") {		if (localStorage.getItem(this.id) !== "true") {