Hri7566's PrismaticMPP.user.js

// ==UserScript==
// @name        Hri7566's PrismaticMPP
// @namespace   Violentmonkey Scripts
// @match       https://mppclone.com/*
// @match       https://multiplayerpiano.net/*
// @grant       none
// @version     1.0
// @author      Hri7566
// @description 2/25/2023, 6:52:16 PM
// ==/UserScript==

class Rect {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.x2 = x + w;
    this.y2 = y + h;
  }

  contains(x, y) {
    return (x >= this.x && x <= this.x2 && y >= this.y && y <= this.y2);
  }
}

function debounce() {
  if (!window.MPP) {
    requestAnimationFrame(() => {
      debounce();
    });

    return;
  }

  start();
}

debounce();

function start() {
  const PianoRenderer = {
    resize: function(width, height) {
      if (typeof width == "undefined") width = $(this.piano.rootElement).width();
      if (typeof height == "undefined") height = Math.floor(width * 0.2);
      $(this.piano.rootElement).css({ "height": height + "px", marginTop: Math.floor($(window).height() / 2 - height / 2) + "px" });
      this.width = width * window.devicePixelRatio;
      this.height = height * window.devicePixelRatio;
      // Renderer.prototype.resize.call(this, width, height);
      if (this.width < 52 * 2) this.width = 52 * 2;
      if (this.height < this.width * 0.2) this.height = Math.floor(this.width * 0.2);
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      this.canvas.style.width = this.width / window.devicePixelRatio + "px";
      this.canvas.style.height = this.height / window.devicePixelRatio + "px";

      // calculate key sizes
      this.whiteKeyWidth = Math.floor(this.width / 52);
      this.whiteKeyHeight = Math.floor(this.height * 0.9);
      this.blackKeyWidth = Math.floor(this.whiteKeyWidth * 0.75);
      this.blackKeyHeight = Math.floor(this.height * 0.5);

      this.blackKeyOffset = Math.floor(this.whiteKeyWidth - (this.blackKeyWidth / 2));
      this.keyMovement = Math.floor(this.whiteKeyHeight * 0.015);

      this.whiteBlipWidth = Math.floor(this.whiteKeyWidth * 0.7);
      this.whiteBlipHeight = Math.floor(this.whiteBlipWidth * 0.8);
      this.whiteBlipX = Math.floor((this.whiteKeyWidth - this.whiteBlipWidth) / 2);
      this.whiteBlipY = Math.floor(this.whiteKeyHeight - this.whiteBlipHeight * 1.2);
      this.blackBlipWidth = Math.floor(this.blackKeyWidth * 0.7);
      this.blackBlipHeight = Math.floor(this.blackBlipWidth * 0.8);
      this.blackBlipY = Math.floor(this.blackKeyHeight - this.blackBlipHeight * 1.2);
      this.blackBlipX = Math.floor((this.blackKeyWidth - this.blackBlipWidth) / 2);

      // prerender white key
      this.whiteKeyRender = document.createElement("canvas");
      this.whiteKeyRender.width = this.whiteKeyWidth;
      this.whiteKeyRender.height = this.height + 10;
      var ctx = this.whiteKeyRender.getContext("2d");
      /*
      if (ctx.createLinearGradient) {
        var gradient = ctx.createLinearGradient(0, 0, 0, this.whiteKeyHeight);
        gradient.addColorStop(0, "#eee");
        gradient.addColorStop(0.75, "#fff");
        gradient.addColorStop(1, "#dad4d4");
        ctx.fillStyle = gradient;
      } else {
        ctx.fillStyle = "#fff";
      }
      */
      // ctx.strokeStyle = "#000";
      // ctx.lineJoin = "round";
      // ctx.lineCap = "round";
      // ctx.lineWidth = 10;
      // ctx.strokeRect(ctx.lineWidth / 2, ctx.lineWidth / 2, this.whiteKeyWidth - ctx.lineWidth, this.whiteKeyHeight - ctx.lineWidth);
      // ctx.lineWidth = 4;

      let channelColor;
      let hexStr;

      if (MPP.client.channel) {
        hexStr = MPP.client.getChannelSetting('color2');

        if (!hexStr || hexStr == '#000000') {
          let c = new Color(MPP.client.getChannelSetting('color'));
          c.add(-0x10, -0x10, -0x10);
          hexStr = c.toHexa();
          // console.log(hexStr, c);
        }

        if (!hexStr) {
          hexStr = "#8d3f50";
        }
      } else {
        hexStr = "#8d3f50";
      }

      channelColor = parseInt(hexStr.substring(1), 16);

      // const clr = channelColor + 0x333333;
      const clr = channelColor + 0x151515;
      const clr2 = Math.min(clr - 0x151515, 0);
      ctx.fillStyle = '#'+('000000'+clr.toString(16)).slice(-6);
      ctx.fillRect(ctx.lineWidth / 2, ctx.lineWidth / 2, this.whiteKeyWidth - ctx.lineWidth, this.whiteKeyHeight - ctx.lineWidth);

      // prerender black key
      this.blackKeyRender = document.createElement("canvas");
      this.blackKeyRender.width = this.blackKeyWidth + 10;
      this.blackKeyRender.height = this.blackKeyHeight + 10;
      var ctx = this.blackKeyRender.getContext("2d");
      /*
      if (ctx.createLinearGradient) {
        var gradient = ctx.createLinearGradient(0, 0, 0, this.blackKeyHeight);
        gradient.addColorStop(0, "#000");
        gradient.addColorStop(1, "#444");
        ctx.fillStyle = gradient;
      } else {
        ctx.fillStyle = "#000";
      }
      */
      // ctx.strokeStyle = "#222";
      // ctx.lineJoin = "round";
      // ctx.lineCap = "round";
      // ctx.lineWidth = 8;
      // ctx.strokeRect(ctx.lineWidth / 2, ctx.lineWidth / 2, this.blackKeyWidth - ctx.lineWidth, this.blackKeyHeight - ctx.lineWidth);
      // ctx.lineWidth = 4;
      ctx.fillStyle = "#111";
      ctx.fillRect(ctx.lineWidth / 2, ctx.lineWidth / 2, this.blackKeyWidth - ctx.lineWidth, this.blackKeyHeight - ctx.lineWidth);

      // prerender shadows
      this.shadowRender = [];
      var y = -this.canvas.height * 2;
      for (var j = 0; j < 2; j++) {
        var canvas = document.createElement("canvas");
        this.shadowRender[j] = canvas;
        canvas.width = this.canvas.width;
        canvas.height = this.canvas.height;
        var ctx = canvas.getContext("2d");
        var sharp = j ? true : false;
        // ctx.lineJoin = "round";
        // ctx.lineCap = "round";
        ctx.lineWidth = 1;
        ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
        ctx.shadowBlur = this.keyMovement * 3;
        ctx.shadowOffsetY = -y + this.keyMovement;
        if (sharp) {
          ctx.shadowOffsetX = this.keyMovement;
        } else {
          ctx.shadowOffsetX = 0;
          ctx.shadowOffsetY = -y + this.keyMovement;
        }
        for (var i in this.piano.keys) {
          if (!this.piano.keys.hasOwnProperty(i)) continue;
          var key = this.piano.keys[i];
          if (key.sharp != sharp) continue;

          if (key.sharp) {
            ctx.fillRect(this.blackKeyOffset + this.whiteKeyWidth * key.spatial + ctx.lineWidth / 2,
              y + ctx.lineWidth / 2,
              this.blackKeyWidth - ctx.lineWidth, this.blackKeyHeight - ctx.lineWidth);
          } else {
            ctx.fillRect(this.whiteKeyWidth * key.spatial + ctx.lineWidth / 2,
              y + ctx.lineWidth / 2,
              this.whiteKeyWidth - ctx.lineWidth, this.whiteKeyHeight - ctx.lineWidth);
          }
        }
      }

      // update key rects
      for (var i in this.piano.keys) {
        if (!this.piano.keys.hasOwnProperty(i)) continue;
        var key = this.piano.keys[i];
        if (key.sharp) {
          key.rect = new Rect(this.blackKeyOffset + this.whiteKeyWidth * key.spatial, 0,
            this.blackKeyWidth, this.blackKeyHeight);
        } else {
          key.rect = new Rect(this.whiteKeyWidth * key.spatial, 0,
            this.whiteKeyWidth, this.whiteKeyHeight);
        }
      }
    }
  }

  Object.assign(MPP.piano.renderer, PianoRenderer);
  MPP.piano.renderer.resize();

  MPP.client.on('ch', msg => {
    MPP.piano.renderer.resize();
  });

  console.log("Injected piano renderer");

  $(document.head).append(`
<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap');

  body {
      font: 20pt 'Open Sans', verdana, "DejaVu Sans", sans-serif;
      text-shadow: #444444aa 1px 1px 1px;
  }

  .ugly-button {
      border-radius: 5px;
      background: #44444444;
      backdrop-filter: blur(5px);
      transition: 150ms background;
  }

  .ugly-button:hover {
      background: #44444488;
  }

  #room {
      background: #44444444;
      backdrop-filter: blur(5px);
      border: 1px solid #ffffff22;
      border-radius: 5px;
  }

  #room .expand {
      background-color: #22222222;
      border: 1px solid #ffffff11;
      border-radius: 5px;
      transition: 300ms all ease-in-out;
  }

  #room .more {
      background: #22222288;
      border-radius: 5px;
      border: 1px solid #22222222;
      backdrop-filter: blur(5px);
  }

  #room .more .new {
      border: 1px solid #ffffff22;
      border-radius: 5px;
      background: #44444444;
  }

  #room .more .info {
      border-radius: 5px;
  }

  #room .more .info:hover {
      background: #88888822;
      transition: 300ms all;
  }

  #names .name {
      border-radius: 5px;
      border: 1px solid #ffffff22;
  }

  .participant-menu {
      border: 1px solid #ffffff22;
      border-radius: 5px;
  }

  .participant-menu .menu-item {
      border: 1px solid #ffffff22;
      border-radius: 5px;
      transition: 150ms all;
  }

  #chat {
      transition: 300ms all ease-in-out;
      text-shadow: #88888844 1px 1px 1px;
  }

  #chat.chatting {
      background-color: #22222288;
      backdrop-filter: blur(5px);
      border: 1px solid #ffffff22;
      box-shadow: unset;
  }

  #chat input {
      background: #44444422;
      backdrop-filter: blur(5px);
      border: 1px solid #ffffff22;
  }

  #chat.chatting input {
      border: 1px solid #ffffff66;
  }

  #chat.chatting input:focus {
      border: 1px solid #ffffffcc
  }

  #chat li {
      text-shadow: unset;
  }

  #chat.chatting li {
      text-shadow: unset;
  }

  .client-settings-button {
      transition: 150ms background;
  }

  .notification.classic .notification-body {
      border: 1px solid #ffffff22;
      border-radius: 5px;
      background: #22222288;
      backdrop-filter: blur(5px);
  }

  .notification.classic .notification-body:after {
      content: none;
  }

  .notification.classic .notification-body .title {
      border-bottom: 1px solid #ffffff22;
  }

  .notification.classic .notification-body .pack {
      border: 1px solid #ffffff22;
      background: #ffffff0a;
  }

  .notification.classic .notification-body .pack.enabled {
      background: #ffffff11;
  }

  #modal .bg {
      background: #22222225;
      opacity: 1;
      transition: 150ms all;
      backdrop-filter: blur(2px);
  }

  .dialog {
      background: #222222c0;
      border: 1px solid #ffffff22;
      display: flex;
  }

  .dialog .submit {
      background: #ffffff22;
      color: #fff;
      transition: 150ms all;
  }

  .dialog .submit:hover {
      background: #ffffff44;
      transition: 150ms all;
  }

  input[type="color"] {
      background: #ffffff44;
      border: none;
      height: 4vh;
      width: 4vh;
  }

  .top-button {
      background: #ffffff11;
      backdrop-filter: blur(5px);
      border: 1px solid #ffffff22;
      border-radius: 5px;
  }

  #volume {
      top: -16px;
  }

  #volume-label {
      top: 18px;
  }

  #volume input[type="range"] {
      background-image: url("volume2.png");
      filter: grayscale(1.0) brightness(50%);
      opacity: 0.75;
  }

  .cursor {
      filter: invert();
  }

  .cursor .name {
      border-radius: 5px;
      border: 1px solid #ffffff22;
      font-size: 8pt;
      filter: invert();
  }

  .cursor.owner .name:after {
      position: absolute;
      left: unset;
      right: 0;
  }

  #quota {
      height: 2px;
      background: #ffffff66;
  }

  #quota .value {
      background: #ffffffaa;
  }
</style>
`);
}

cool