您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Visualization of notes (based on Chacha-26 script)
// ==UserScript== // @name VisNotes MPP // @namespace http://tampermonkey.net/ // @version 0.9.3 // @description Visualization of notes (based on Chacha-26 script) // @author Hustandant#1917 // @match *://multiplayerpiano.net/* // @icon https://github.com/Hustoroff/mpp/blob/main/icon.png?raw=true // @grant none // @license MIT // @run-at document-end // ==/UserScript== window.addEventListener('load', (event) => { //++++++++++++++++++ You can change this (Hot keys) ++++++++++++++++++++ const OnOff = "113"; //F2 const FirstKey = "3"; //3 const SecondKey = "Tab"; //Tab //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ var notes = 0, nps = 0, fps = 0; async function ping() { let start = Date.now(); try { await fetch(`${window.location.protocol}${MPP.client.uri.slice(4)}`) } catch(err) {} return (Date.now() - start); }; function fpsCount() { fps += 1; requestAnimationFrame(fpsCount) }; requestAnimationFrame(fpsCount); if(!localStorage.getItem("speed")) localStorage.setItem("speed", 60); var noteSpeed = localStorage.getItem("speed"); //default 60 per sec MPP.client.on("a", function(msg) { let message = msg.a.split(" "); if(message[0] == "speed" && msg.p.id == MPP.client.participantId && !isNaN(Number(message[1]))) { noteSpeed = (Number(message[1]) > 1000) ? 1000 : (Number(message[1]) <= 0) ? 1 : Number(message[1]); localStorage.setItem("speed", noteSpeed); document.getElementById("nspd").innerText = noteSpeed; } }); MPP.client.emit("notification", { title: "VisNotes MPP script (by Hustandant#1917)", id:"Script_notification", duration:20000, target:"#piano", html:`<p><h3><font id="f2" color="">F2</font> - show/hide notes window</h3></br></p><p><h3><font id="3d" color="">Tab+3</font> - on/off darkly window</h3></br></p><p><h4><font color="limegreen">${noteSpeed}</font> - current speed (<span style="background-color: black"><font color="red">to chat "speed" [min - 1 max - 1000]</font></span>)</h4></br></p><p><h5><span style="background-color: black">Example: "speed 60"</span></h5></br></p> Join our discord server: <a target="_blank" href="https://discord.gg/A3SDgxS2Q2">https://discord.gg/A3SDgxS2Q2<a>` }); const stat = document.createElement("div"); stat.id = "stat_notes"; stat.style.opacity = "1"; stat.style.position = "fixed"; stat.style["z-index"] = 150; stat.style.display = "block"; stat.style.float = "right"; stat.style.margin = "auto"; stat.style.top = `${document.getElementById("piano").height}px`; stat.style["background-color"] = "rgba(137, 137, 137, 0.414)"; stat.style["backdrop-filter"] = "blur(1px)"; stat.style["font-size"] = "21px" stat.innerHTML = `Notes: <span id="notes">0</span> NPS: <span id="nps">0</span> Speed: <span id="nspd">${localStorage.getItem("speed")}</span> NQ: <span id="nquota">${MPP.noteQuota.points}</span> Ping: <span id="ping"></span> FPS: <span id="fps"></span>`; stat.style.marginLeft = `${String(document.getElementById("piano").offsetLeft + document.getElementById("piano").getElementsByTagName("canvas")[0].offsetLeft)}px`; const canvas = document.createElement("canvas"); canvas.height = parseInt(document.getElementById("piano").style["margin-top"]); canvas.width = Math.round(MPP.piano.renderer.width - (MPP.piano.renderer.width - MPP.piano.keys.c7.rect.x2)); canvas.id = "track_of_notes"; canvas.style.opacity = "1"; canvas.style.top = "0"; canvas.style.display = "block"; canvas.style.float = "right"; canvas.style.position = "fixed"; canvas.style.margin = "auto"; canvas.style.marginLeft = `${String(document.getElementById("piano").offsetLeft + document.getElementById("piano").getElementsByTagName("canvas")[0].offsetLeft)}px`; canvas.style["z-index"] = 150; const ctx = window.ctx = canvas.getContext("2d"); const pixel = window.pixel = ctx.createImageData(document.getElementById("piano").querySelector("canvas").width,canvas.height); pixel.data.fill(0); let lastUpdate = 0, onlyevery = 4, counter = 0, prevTime = Date.now(); const noteDB = {}; Object.keys(MPP.piano.keys).forEach(key => noteDB[key] = MPP.piano.keys[key].rect.x); window.redraw = function() { if (lastUpdate <= canvas.height && counter++ % 4 == 0) { const currentTime = Date.now(); const deltaTime = currentTime - prevTime; ctx.globalCompositeOperation = "copy"; ctx.drawImage(ctx.canvas, 0, -Math.ceil(deltaTime * (noteSpeed / 1000))); ctx.globalCompositeOperation = "source-over"; ctx.putImageData(pixel, 0, canvas.height - 1); prevTime = currentTime; if (lastUpdate++ == 0) { pixel.data.fill(); } } requestAnimationFrame(redraw); }; redraw(); redraw(); // :) redraw(); // :) redraw(); // :) window.showNote = function(note, col, ch = 0) { if (note in noteDB) { lastUpdate = 0; const idx = (noteDB[note]) * 4; if(note.split("").includes("s")) { let otS = ((MPP.piano.keys[note].rect.w - Math.round(MPP.piano.renderer.blackBlipWidth))/2)*4; for(let i=0; i<(MPP.piano.renderer.blackBlipWidth)*4; i+=4){ pixel.data[idx + otS + i] = col[0]; pixel.data[idx + otS + i + 1] = col[1]; pixel.data[idx + otS + i + 2] = col[2]; pixel.data[idx + otS + i + 3] = 255; } } else { let ot = (Math.round((MPP.piano.keys[note].rect.w - Math.round(MPP.piano.renderer.whiteBlipWidth))/2))*4; for(let i=0; i<(MPP.piano.renderer.whiteBlipWidth)*4; i+=4){ pixel.data[idx + ot + i] = col[0]; pixel.data[idx + ot + i + 1] = col[1]; pixel.data[idx + ot + i + 2] = col[2]; pixel.data[idx + ot + i + 3] = 255; } } } } document.body.append(canvas); document.body.append(stat); window.addEventListener('resize', resize); function resize() { canvas.width = canvas.width; canvas.height = canvas.height; canvas.style.width = `${canvas.width / window.devicePixelRatio}px`; canvas.style.height = `${canvas.height / window.devicePixelRatio}px`; canvas.style.marginLeft = `${String(document.getElementById("piano").offsetLeft + document.getElementById("piano").getElementsByTagName("canvas")[0].offsetLeft)}px`; }; window.onload = () => { if(!localStorage.getItem("display")) localStorage.setItem("display", document.getElementById("track_of_notes").style.display); if(!localStorage.getItem("theme")) localStorage.setItem("theme", document.getElementById("track_of_notes").style["background-color"]); document.getElementById("track_of_notes").style.display = localStorage.getItem("display"); document.getElementById("track_of_notes").style["background-color"] = localStorage.getItem("theme"); document.getElementById("3d").color = (localStorage.getItem("theme") == "rgb(16, 0, 0)") ? "limegreen" : "firebrick"; document.getElementById("f2").color = (localStorage.getItem("display") == "block") ? "limegreen" : "firebrick"; noteSpeed = (localStorage.getItem("speed")) ? localStorage.getItem("speed") : 60; }; window.addEventListener("keydown", function(key) { if(key.keyCode == OnOff) { document.getElementById("track_of_notes").style.display = (document.getElementById("track_of_notes").style.display == "block") ? "none" : "block"; localStorage.setItem("display", document.getElementById("track_of_notes").style.display); document.getElementById("f2").color = (localStorage.getItem("display") == "block") ? "limegreen" : "firebrick"; return; } }); function runOnKeys(func, ...codes) { let pressed = new Set(); document.addEventListener('keydown', function(event) { pressed.add(event.key); for (let code of codes) if (!pressed.has(code)) return; pressed.clear(); func(); }); document.addEventListener('keyup', function(event) { pressed.delete(event.key) }); }; runOnKeys(() => { document.getElementById("track_of_notes").style["background-color"] = (document.getElementById("track_of_notes").style["background-color"] == "rgb(16, 0, 0)") ? "" : "rgb(16, 0, 0)"; localStorage.setItem("theme", document.getElementById("track_of_notes").style["background-color"]); document.getElementById("3d").color = (localStorage.getItem("theme") == "rgb(16, 0, 0)") ? "limegreen" : "firebrick"; }, FirstKey, SecondKey ); function stats() { document.getElementById("notes").innerText = notes; document.getElementById("nquota").innerText = MPP.noteQuota.points }; function grad(nq, nqmax) { document.getElementById("nquota").style.color = `rgb(255, ${Math.round((nq/nqmax)*255)}, ${Math.round((nq/nqmax)*255)})` }; setInterval(async () => { document.getElementById("nps").innerText = nps; document.getElementById("nquota").innerText = MPP.noteQuota.points; document.getElementById("ping").innerText = await ping(); document.getElementById("fps").innerText = fps; fps = nps = 0; grad(MPP.noteQuota.points, MPP.noteQuota.max); }, 1000); const colcache = Object.create(null); MPP.piano.renderer.__proto__.vis = MPP.piano.renderer.__proto__.visualize; MPP.piano.renderer.__proto__.visualize = function (n, c, ch) { notes += 1; nps += 1; stats(); grad(MPP.noteQuota.points, MPP.noteQuota.max); this.vis(n,c,ch); let co = c in colcache ? colcache[c] : Object.freeze(colcache[c] = [c[1]+c[2], c[3]+c[4], c[5]+c[6]].map(x => parseInt(x, 16))); showNote(n.note, co); }; });