Syncs backgrounds via chat.
// ==UserScript==
// @name MPP BG Sync
// @namespace http://tampermonkey.net/
// @version 2.1
// @description Syncs backgrounds via chat.
// @author MrButtersLot
// @match https://www.multiplayerpiano.net/*
// @match https://multiplayerpiano.net/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const mainLayer = document.createElement('div');
mainLayer.style = "position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:-1; background:black; background-repeat:no-repeat; background-position:center; background-size:contain;";
document.body.appendChild(mainLayer);
const videoLayer = document.createElement('video');
videoLayer.style = "position:fixed; top:0; left:0; width:100vw; height:100vh; object-fit:contain; z-index:-2; background:black; display:none;";
videoLayer.loop = true; videoLayer.muted = true; videoLayer.autoplay = true;
document.body.appendChild(videoLayer);
const showMessage = () => {
const msg = document.createElement('div');
msg.innerText = "say !bg [imgur link] to change background globally";
msg.style = "position:fixed; top:40%; left:50%; transform:translate(-50%, -50%); background:rgba(0,0,0,0.8); color:#2ecc71; padding:15px 30px; border-radius:10px; font-family:sans-serif; font-weight:bold; font-size:1.2em; z-index:10001; pointer-events:none; border:2px solid #2ecc71; transition:opacity 1s ease-out;";
document.body.appendChild(msg);
setTimeout(() => {
msg.style.opacity = "0";
setTimeout(() => msg.remove(), 1000);
}, 3000);
};
const apply = (url) => {
if (!url || !url.includes('i.imgur.com')) return;
const isVid = url.toLowerCase().endsWith('.mp4');
if (isVid) {
document.body.style.backgroundImage = "none";
mainLayer.style.backgroundImage = "none";
if (videoLayer.src !== url) {
videoLayer.src = url;
videoLayer.style.display = "block";
videoLayer.play().catch(()=>{});
}
} else {
videoLayer.style.display = "none";
videoLayer.pause();
const css = `url(${url})`;
document.body.style.background = `black ${css} no-repeat center center fixed`;
document.body.style.backgroundSize = "contain";
mainLayer.style.backgroundImage = css;
}
};
const checkHistory = () => {
setTimeout(() => {
const list = document.querySelectorAll('#chat li');
for (let i = list.length - 1; i >= 0; i--) {
const txt = list[i].innerText;
const hit = txt.match(/!bg\s+(https?:\/\/i\.imgur\.com\/\S+)/);
if (hit) {
apply(hit[1]);
break;
}
}
}, 500);
};
const start = () => {
if (window.MPP && window.MPP.client) {
window.MPP.client.on('a', (m) => {
const t = (m.a || "").trim();
if (t.startsWith('!bg ')) apply(t.split(' ')[1]);
});
window.MPP.client.on('ch', checkHistory);
checkHistory();
showMessage();
} else {
setTimeout(start, 500);
}
};
const btn = document.createElement('button');
btn.innerText = "BRING TO FRONT";
btn.style = "position:fixed; top:10px; right:10px; z-index:10000; background:#e67e22; color:white; border:none; padding:6px 12px; cursor:pointer; font-weight:bold; border-radius:4px; opacity:0.6; transition:0.3s;";
let active = false;
btn.onclick = () => {
active = !active;
mainLayer.style.zIndex = active ? "9998" : "-1";
videoLayer.style.zIndex = active ? "9997" : "-2";
mainLayer.style.pointerEvents = active ? "all" : "none";
btn.innerText = active ? "SEND TO BACK" : "BRING TO FRONT";
btn.style.background = active ? "#95a5a6" : "#e67e22";
};
document.body.appendChild(btn);
start();
})();