☰

MVPS

MVPS [Multi Visual Piano Script] designed to expand the technical and visual capabilities of the MPP

  1. // ==UserScript==
  2. // @name         MVPS
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.8
  5. // @description  MVPS [Multi Visual Piano Script] designed to expand the technical and visual capabilities of the MPP
  6. // @author       Hustandant#1917
  7. // @match        *://mppclone.com/*
  8. // @include      *://www.multiplayerpiano.com/*
  9. // @include      *://multiplayerpiano.com/*
  10. // @include      *://piano.ourworldofpixels.com/*
  11. // @include      *://mppfork.netlify.app/*
  12. // @match        *.mpp.hri7566.info/*
  13. // @match        *://mpp.autoplayer.xyz/*
  14. // @icon         https://github.com/Hustoroff/mpp/blob/main/icon.png?raw=true
  15. // @resource     https://raw.githubusercontent.com/Hustoroff/mpp/main/MVPS.js
  16. // @grant        none
  17. // @run-at       document-end
  18. // ==/UserScript==
  19. window.addEventListener('load', (event) => {
  20. $("#bottom .relative").append(`<div id="MVPS" class="ugly-button 2_btn">MVPS</div>`);
  21. $("#MVPS").css({position: "absolute", left: "1020px", top: "32px"}).on("click", () => {
  22.     MPP.client.emit("notification", {
  23.         title: "Multi Visual Piano Script (by Hustandant#1917)",
  24.         id:"MVPS_notification",
  25.         duration:-1,
  26.         target:"#MVPS",
  27.         html:`
  28.         <div id="visual_block" style="border-radius: 10px; background-color: #171115; border: 2px solid #333; padding: 4px 12px">
  29.         <h3>Visual:</h3></p>
  30.         <div id="chtClr" class="ugly-button">Clear chat</div>
  31.         <div id="nmsHdn" class="ugly-button">Hide names</div>
  32.         <input type="text" id="inpBack" placeholder="New backround (Image URL)"><button id="back">Background</button></input></br>
  33.         Load background file:<input type="file" id="inpBackimg"></input>
  34.         </div></br>
  35.         <div id="drawBlock" style="border-radius: 10px; background-color: #171115; border: 2px solid #333; padding: 4px 12px">
  36.         <h3>Drawing:</h3></p>
  37.         <div id="clearBtn" class="ugly-button">Clear Drawings</div>
  38.         <div id="drwbrdHdn" class="ugly-button">Drawboard hide</div>
  39.         <div id="rnbwMd" class="ugly-button">Rainbow lines</div>
  40.         <input id="lineTime" type="range" min="1" max="250" title="line lifetime"></input>
  41.         <input id="clrChng" type="color"><button id="clrBtn">Select color</button></input>
  42.         <input id="lineSize"type="range" min="1" max="10" title="brush size"></input></br>
  43.         </div></br>
  44.         <div id="otherBlock" style="border-radius: 10px; background-color: #171115; border: 2px solid #333; padding: 4px 12px">
  45.         <h3>Other settings:</h3>
  46.         <div id="rnbw" class="ugly-button" title="ANIME!?!?!??!?!?!??!?!??!?!">Rainbow room</div>
  47.         <div id="rnbwNt" class="ugly-button">Rainbow notes</div>
  48.         <div id="rnbwNick" class="ugly-button">Rainbow nick</div>
  49.         <div id="pnoSpn" class="ugly-button">Spin piano</div>
  50.         <input type="text" id="inpImg" placeholder="Paste image (Image URL)"><button id="pasteImg">Paste image</button></input></br>
  51.         Load image file:</br><input type="file" id="inpPastImg"></input>
  52.         </div>`
  53.     });
  54.     document.getElementById("chtClr").addEventListener("click", () => { chat_clear() });
  55.     document.getElementById("nmsHdn").addEventListener("click", () => { names_hide = !names_hide; namesHde() });
  56.     document.getElementById("inpBack").addEventListener("input", () => { url_back = document.getElementById("inpBack").value });
  57.     document.getElementById("back").addEventListener("click", () => { backg = !backg; background_del(); });
  58.     document.getElementById("inpBackimg").addEventListener("input", () => { showpreview1(document.getElementById("inpBackimg")) });
  59.     document.getElementById("clearBtn").addEventListener("click", () => { MPP.addons.draw.lines = [[0,0,0,0,0,0,"#0"]] });
  60.     document.getElementById("drwbrdHdn").addEventListener("click", () => { drawboard_hide = !drawboard_hide; drawboard_hde() });
  61.     document.getElementById("rnbwMd").addEventListener("click", () => { rainbowmodename = !rainbowmodename });
  62.     document.getElementById("lineTime").addEventListener("input", () => { MPP.addons.draw.lineLife = document.getElementById("lineTime").value });
  63.     document.getElementById("clrBtn").addEventListener("click", () => { MPP.addons.draw.customColor=document.getElementById("clrChng").value });
  64.     document.getElementById("lineSize").addEventListener("input", () => { MPP.addons.draw.brushSize = document.getElementById("lineSize").value });
  65.     document.getElementById("rnbw").addEventListener("click", () => { rainbowmode = !rainbowmode });
  66.     document.getElementById("rnbwNt").addEventListener("click", () => { rainbowmodenote = !rainbowmodenote });
  67.     document.getElementById("rnbwNick").addEventListener("click", () => { rainbownick = !rainbownick });
  68.     document.getElementById("pnoSpn").addEventListener("click", () => { pianospinbool = !pianospinbool; pianospn() });
  69.     document.getElementById("inpImg").addEventListener("input", () => { url_past_img = document.getElementById("inpImg").value });
  70.     document.getElementById("pasteImg").addEventListener("click", () => { paste_image(url_past_img) });
  71.     document.getElementById("inpPastImg").addEventListener("input", () => { showpreview2(document.getElementById("inpPastImg")) });
  72.     var pianospinbool = false,
  73.         backimg = false,
  74.         rainbowmodename = false,
  75.         rainbowmodenote = false,
  76.         rainbowmode = false,
  77.         backg = false,
  78.         piano = true,
  79.         chat_hide = false,
  80.         names_hide = false,
  81.         drawboard_hide = true,
  82.         rainbownick = false,
  83.         url_past_img = "https://mpp.terrium.net/meow64.png",
  84.         url_back = "https://steamuserimages-a.akamaihd.net/ugc/878625026160084538/0399E81B0D1CF96C853CFCC1288D3E0A3D708049/?imw=1024&imh=819&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true";
  85.     //MPP draw image script by Ledlamp [https://gist.github.com/ledlamp/ef0d4db05a49fb795ec59cf96bedbf26] (thx a lot :3)
  86.     function paste_image(){
  87.         function getRandomColor() {
  88.             var letters = '0123456789ABCDEF';
  89.             var color = '#';
  90.             for (var i = 0; i < 6; i++) {
  91.                 color += letters[Math.floor(Math.random() * 16)];
  92.             }
  93.             return color;
  94.         }
  95.  
  96.         function drawPixel(x, y, color) {
  97.             MPP.addons.draw.mkline(x-1,y,x,y,10,color)
  98.         }
  99.  
  100.         function componentToHex(c) {
  101.             var hex = c.toString(16);
  102.             return hex.length == 1 ? "0" + hex : hex;
  103.         }
  104.  
  105.         function rgbToHex(r, g, b) {
  106.             return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
  107.         }
  108.         var img = document.createElement("img");
  109.         img.crossOrigin = "Anonymous";
  110.         img.addEventListener('load', function(){
  111.             console.log(img);
  112.             var canvas = document.createElement('canvas');
  113.             canvas.width = img.width;
  114.             canvas.height = img.height;
  115.             var c = canvas.getContext('2d');
  116.             c.drawImage(img, 0, 0, img.width, img.height);
  117.             console.log(canvas);
  118.             var pos1 = [128-img.width/2,128-img.height/2], pos2 = [128+img.width/2,128+img.height/2];
  119.             var ii=0;
  120.             for (let x = pos1[0], xo = 0; x < pos2[0]; x++, xo++)
  121.                 for (let y = pos1[1], yo = 0; y < pos2[1]; y++, yo++) {
  122.                 setTimeout(()=>{
  123.                     var rgb = c.getImageData(xo,yo, 1, 1).data;
  124.                     drawPixel(x,y, rgbToHex(rgb[0], rgb[1], rgb[2]));
  125.                 } ,++ii * 10);
  126.                 }
  127.         });
  128.     img.src = url_past_img;
  129.     };
  130.  
  131.     function showpreview1(e) {
  132.         var reader = new FileReader();
  133.         reader.onload = function (e) {
  134.             url_back = e.target.result;
  135.             background_del();
  136.         };
  137.         reader.readAsDataURL(e.files[0]);
  138.     }
  139.  
  140.     function showpreview2(e) {
  141.         var reader = new FileReader();
  142.         reader.onload = function (e) {
  143.             url_past_img = e.target.result;
  144.         };
  145.         reader.readAsDataURL(e.files[0]);
  146.     }
  147.  
  148.     // DRAW script by Hri7566 [https://github.com/Hri7566] (thx a lot :3)
  149.     let authenicated = false;
  150.     EXT = window.EXT || {_initfunc: []};
  151.  
  152.     setInterval(()=>{
  153.         if(Object.entries(MPP.client.ppl).length !== 0 && !authenicated) {
  154.             MPP.client.sendArray([{m:"+custom"}]);
  155.  
  156.             MPP = MPP || {};
  157.             MPP.addons = EXT;
  158.             for(var x = EXT._initfunc.length; x--;)
  159.                 EXT._initfunc[x]();
  160.             EXT.__proto__ = null;
  161.             authenicated = true;
  162.         }
  163.     }, 100);
  164.     /* By ming, v3 */
  165.     EXT._initfunc.push(function(){
  166.         var addon = EXT.draw = {__proto__: null};
  167.         addon.lineLife = 25;
  168.         var p = document.createElement("canvas");
  169.         p.id = "drawboard";
  170.         p.style = "position: absolute; top: 0; left: 0; z-index: 400; pointer-events: none;";
  171.         p.width = window.innerWidth;
  172.         p.height = window.innerHeight;
  173.         document.body.appendChild(p);
  174.         var dbctx = p.getContext("2d");
  175.         var shifted = false;
  176.         var clicking = false;
  177.         $(document).on('mousedown', (e)=>{ if(e.shiftKey){ clicking = true; draw(); e.preventDefault(); }});
  178.         $(document).on('mouseup', (e)=>{ clicking = false; });
  179.         $(document).on('keyup keydown', (e)=>{ shifted = e.shiftKey; });
  180.  
  181.         addon.enabled = true;
  182.         addon.customColor = null;
  183.         addon.ctx = dbctx;
  184.         addon.onrefresh = [];
  185.         addon.brushSize = 8;
  186.         addon.mutes = [];
  187.         addon.lines = [];
  188.         addon.buf = [{n: "ldraw", v: 0}];
  189.         function resize(){
  190.             p.width = window.innerWidth;
  191.             p.height = window.innerHeight;
  192.         }
  193.         window.addEventListener('resize', resize, false);
  194.         addon.flushloop = setInterval(()=>{
  195.             var t = Date.now();
  196.             if(addon.buf.length != 1){
  197.                 if(addon.buf.length>1)
  198.                     MPP.client.sendArray([{m: "custom", data: {m: 'draw', t: t, n: addon.buf}, target: { mode: 'subscribed' } }]);
  199.                 addon.buf = [{n: "ldraw", v: 0}];
  200.             }
  201.         }, 1000/60/16);
  202.         addon.onrefresh.push(function(t){
  203.             if(addon.lines.length){
  204.                 dbctx.clearRect(0,0,window.innerWidth, window.innerHeight);
  205.                 for(var l = 0; l<addon.lines.length;l++){
  206.                     dbctx.globalAlpha = 1;
  207.                     var c=addon.lines[l];
  208.                     dbctx.strokeStyle = c[6];
  209.                     dbctx.lineWidth = c[5];
  210.                     var d = addon.lineLife - (t - c[4]) / 1000;
  211.                     if(d <= 0){
  212.                         addon.lines.splice(l--, 1);
  213.                         continue;
  214.                     }
  215.                     dbctx.globalAlpha = 0.3 * d;
  216.                     dbctx.beginPath();
  217.                     dbctx.moveTo(c[0], c[1]);
  218.                     dbctx.lineTo(c[2], c[3]);
  219.                     dbctx.stroke();
  220.                 }
  221.             }
  222.         });
  223.         function redraw(){
  224.             if(addon.enabled){
  225.                 var t = Date.now();
  226.                 for(var x = 0; x < addon.onrefresh.length; x++){
  227.                     addon.onrefresh[x](t);
  228.                 }
  229.             }
  230.             /*window.requestAnimationFrame(redraw);*/
  231.         }
  232.         /*window.requestAnimationFrame(redraw);*/
  233.         setInterval(redraw, 1000/60/16);
  234.         /* https://stackoverflow.com/a/8639991 */
  235.         function stringToBytesFaster(str) {
  236.             var ch, st, re = [], j=0;
  237.             for (var i = 0; i < str.length; i++ ) {
  238.                 ch = str.charCodeAt(i);
  239.                 if(ch < 127){
  240.                     re[j++] = ch & 0xFF;
  241.                 } else {
  242.                     st = [];
  243.                     do {
  244.                         st.push(ch & 0xFF);
  245.                         ch = ch >> 8;
  246.                     } while (ch);
  247.                     st = st.reverse();
  248.                     for(var k=0;k<st.length; ++k)
  249.                         re[j++] = st[k];
  250.                 }
  251.             }
  252.             return re;
  253.         }
  254.         function parseLine(str, color, size){
  255.             var vector = [0, 0, 0, 0, Date.now(), 1, color];
  256.             var bytes = stringToBytesFaster(str);
  257.             vector[0] = Math.round(((100 / 255) * bytes[0]/100) * window.innerWidth);
  258.             vector[1] = Math.round(((100 / 255) * bytes[1]/100) * window.innerHeight);
  259.             vector[2] = Math.round(((100 / 255) * bytes[2]/100) * window.innerWidth);
  260.             vector[3] = Math.round(((100 / 255) * bytes[3]/100) * window.innerHeight);
  261.             vector[5] = size;
  262.             addon.lines.push(vector);
  263.         }
  264.         function draw(){
  265.             var u = MPP.client.getOwnParticipant();
  266.             u.y = Math.max(Math.min(100,u.y), 0);
  267.             u.x = Math.max(Math.min(100,u.x), 0);
  268.             var lastpos = [u.x, u.y];
  269.             var b = new ArrayBuffer(4);
  270.             var dv = new DataView(b);
  271.             dv.setUint8(0, Math.round(u.x/100 * 255));
  272.             dv.setUint8(1, Math.round(u.y/100 * 255));
  273.             function poll(){
  274.                 if(lastpos[0] != u.x || lastpos[1] != u.y){
  275.                     u.y = Math.max(Math.min(100,u.y), 0);
  276.                     u.x = Math.max(Math.min(100,u.x), 0);
  277.                     dv.setUint8(2, Math.round(u.x/100 * 255));
  278.                     dv.setUint8(3, Math.round(u.y/100 * 255));
  279.                     var s = String.fromCharCode.apply(null, new Uint8Array(b));
  280.                     var clr = addon.customColor || MPP.client.getOwnParticipant().color;
  281.                     addon.buf.push({n: s, v: Math.min(addon.brushSize, 5), d: parseInt(clr.slice(1), 16)});
  282.                     dv.setUint8(0, Math.round(u.x/100 * 255));
  283.                     dv.setUint8(1, Math.round(u.y/100 * 255));
  284.                     lastpos = [u.x, u.y];
  285.                     parseLine(s, clr, Math.min(addon.brushSize, 5));
  286.                 }
  287.                 if(clicking)
  288.                     setTimeout(poll, 1);
  289.             }
  290.             setTimeout(poll, 1);
  291.         }
  292.  
  293.         addon.mkline = function(x, y, x2, y2, s, color){
  294.             if(x<0||y<0||x2<0||y2<0||x>255||y>255||x2>255||y2>255)return;
  295.             var b = new ArrayBuffer(4);
  296.             var dv = new DataView(b);
  297.             dv.setUint8(0, x);
  298.             dv.setUint8(1, y);
  299.             dv.setUint8(2, x2);
  300.             dv.setUint8(3, y2);
  301.             var str = String.fromCharCode.apply(null, new Uint8Array(b));
  302.             var clr = color || addon.customColor || MPP.client.getOwnParticipant().color;
  303.             addon.buf.push({n: str, v: Math.min(s||1, 5), d: parseInt(clr.slice(1), 16)});
  304.             parseLine(str, clr, Math.min(s||1, 5));
  305.         }
  306.         addon.tohtml = function(c) {
  307.             c = c.toString(16);
  308.             return '#' + ('000000' + c).substring(c.length);
  309.         };
  310.         MPP.client.on('custom', (msg) => {
  311.             if (msg.data.m !== 'draw') return;
  312.             if(msg.data.n[0].n == "ldraw" && addon.mutes.indexOf(MPP.client.findParticipantById(msg.data.p)._id) === -1){
  313.                 msg.data.n.reduce(function(a, b){
  314.                     if(b.n.length == 4){
  315.                         var clr = (b.d !== undefined && addon.tohtml(b.d)) || MPP.client.findParticipantById(msg.data.p).color;
  316.                         parseLine(b.n, clr, Math.min(b.v,5));
  317.                     }
  318.                 });
  319.             }
  320.         });
  321.         MPP.client.on('c', ()=>{
  322.             addon.lines = [[0,0,0,0,0,0,"#0"]];
  323.         });
  324.     });
  325.     function background_del(){
  326.         if(backg) {
  327.             var d=document.createElement('div');
  328.             d.style.width = '1280px';
  329.             d.style.height = '913px';
  330.             d.style.position = 'absolute';
  331.             d.style.top= '0px';
  332.             d.style.left= '0px';
  333.             d.id='backgdiv'
  334.             document.body.appendChild(d);
  335.             $("#backgdiv").css({width: window.innerWidth, height: window.innerHeight, "background-position": "25% 25%", "background-size": "cover", "backdrop-effect": "blur(4px)", "background-image": "url("+url_back+")"})
  336.             console.log(url_back)
  337.         } else $("#backgdiv").remove();
  338.     }
  339.  
  340.     function chat_clear(){ $('ul').empty() }
  341.  
  342.     function namesHde(){
  343.         if(names_hide) $("#names").css({opacity: "0"});
  344.         else $("#names").css({opacity: "1"});
  345.     }
  346.  
  347.     function drawboard_hde(){
  348.         if(drawboard_hide) $("#drawboard").css({opacity: "1"});
  349.         else $("#drawboard").css({opacity: "0"});
  350.     }
  351.  
  352.     function pianospn(){ $("#piano").toggleClass("spin", pianospinbool) }
  353.     //Rainbow room mode script
  354.     var count = 0;
  355.     var size = 100;
  356.     var rainbow = new Array(size);
  357.  
  358.     for (var i = 0; i < size; i++) {
  359.         var red = sin_to_hex(i, 0 * Math.PI * 2 / 3); // 0   deg
  360.         var blue = sin_to_hex(i, 1 * Math.PI * 2 / 3); // 120 deg
  361.         var green = sin_to_hex(i, 2 * Math.PI * 2 / 3); // 240 deg
  362.         rainbow[i] = "#" + red + green + blue;
  363.     }
  364.  
  365.     function sin_to_hex(i, phase) {
  366.         var sin = Math.sin(Math.PI / size * 2 * i + phase);
  367.         var int = Math.floor(sin * 127) + 128;
  368.         var hex = int.toString(16);
  369.         return hex.length === 1 ? "0" + hex : hex;
  370.     }
  371.  
  372.     setInterval(function() {
  373.         if (count > rainbow.length)  count = 0;
  374.         if(rainbowmodename)
  375.             MPP.addons.draw.customColor = rainbow[count]
  376.         if(rainbowmodenote){
  377.             id = MPP.client.getOwnParticipant();
  378.             id.color = rainbow[count];
  379.         }
  380.         if(rainbownick)
  381.             $("#namediv-"+MPP.client.getOwnParticipant().id).css({"background-color": rainbow[count]})
  382.         count++;
  383.     }, 33);
  384.  
  385.     setInterval(function() {
  386.         if (rainbowmode && MPP.client.isOwner()) {
  387.             if (count > rainbow.length) count = 0;
  388.             MPP.client.sendArray([{ m: "chset", set: { color: rainbow[count] } }]);
  389.         }
  390.         count++;
  391.     }, 500);
  392. });
  393. });