GlassMPP.user.js

// ==UserScript==
// @name        GlassMPP
// @namespace   Violentmonkey Scripts
// @match       https://mppclone.com/*
// @match       https://www.multiplayerpiano.org/*
// @match       https://multiplayerpiano.net/*
// @grant       none
// @version     1.0
// @author      Hri7566
// @description 8/12/2023, 4:53:24 PM
// ==/UserScript==

$(document.body).prepend(`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style>
  * {
    font-family: 'Open Sans', sans-serif;
  }

  .ugly-button {
    border: 1px solid #ffffff10;
    border-radius: 5px;
    background-color: #ffffff10;
    transition: 300ms;
  }

  .ugly-button:hover {
    background-color: #ffffff20;
  }

  #modal .bg {
    background-color: #ffffff40;
  }

  .dialog {
    background-color: #ffffff10;
    border: 1px solid #ffffff20;
    border-radius: 10px;
    box-shadow: unset;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    backdrop-filter: blur(10px);
  }

  .dialog .submit {
    background-color: #ffffff40;
    text-shadow: 1px 1px #00000020;
    color: white;
    border: 2px solid #ffffff10;
    border-radius: 10px;
    box-shadow: unset;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    transition: 300ms;
  }

  .dialog .submit:hover {
    background-color: #ffffff80;
  }

  .dialog .client-settings-button {
    background-color: #ffffff10;
    border: 1px solid #ffffff10;
    border-radius: 10px;
    transition: 300ms;
  }

  .dialog .client-settings-button:hover {
    background-color: #ffffff40;
  }

  #client-settings-ok-btn:hover {
    background-color: #ffffff40;
  }

  .notification.classic .notification-body {
    background-color: #ffffff10;
    border: 1px solid #ffffff20;
    backdrop-filter: blur(10px);
  }

  .notification .title {
    border-bottom: 1px solid #ffffff20;
  }

  .notification .pack {
    border: 1px solid #ffffff10;
    transition: 300ms;
  }

  .notification .pack.enabled {
    font-weight: unset;
    background: #00ff0020;
  }

  .notification .pack:hover {
    font-weight: unset;
    background-color: #ffffff40;
  }

  .notification .connection {
    background: #ffffff10;
    border: 1px solid #ffffff10;
    border-radius: 5px;
    transition: 300ms;
  }

  .notification .connection:hover {
    font-weight: unset;
    background: #ffffff40;
  }

  .notification .connection.enabled {
    font-weight: unset;
    background: #00ff0020;
  }

  .notification .connection.enabled:hover {
    background: #00ff0040;
    border: 1px solid #00ff0010;
  }

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

  .notification .x {
    color: #ffffff80;
    transition: 300ms;
  }

  .notification .x:hover {
    color: #ffffffff;
  }

  #room {
    background-color: #ffffff10;
    border: 1px solid #ffffff20;
    border-radius: 5px;
    backdrop-filter: blur(10px);
  }

  #room .expand {
    background-color: #ffffff10;
    border: 1px solid #ffffff20;
    border-radius: 5px;
  }

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

  #room .more .info {
    transition: 300ms;
  }

  #room .more .info:hover {
    background: #ffffff20;
  }

  #room .more .new {
    background: #ffffff40;
    transition: 300ms;
  }

  #room .more .new:hover {
    background: #ffffff80;
  }

  .top-button {
    background: #ffffff10;
    border: 1px solid #ffffff10;
    border-radius: 5px;
    transition: 300ms;
  }

  .top-button:hover {
    background: #ffffff20;
  }

  #quota {
    background: #ffffff40;
  }

  #quota .value {
    background: #ffffffff;
    transition: 300ms;
  }

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

  #names .nametag {
    border: 1px solid #ffffff20;
    border-radius: 5px;
  }

  .discord-button img {
    height: unset;
  }

  #chat input {
    border: 1px solid #ffffff10;
    background: #ffffff10;
    transition: 300ms;
  }

  #chat input:focus {
    border: 1px solid #ffffff80;
    background: #ffffff20;
  }

  #chat.chatting {
    background: #ffffff10;
    box-shadow: unset;
    border: 1px solid #ffffff20;
    border-radius: 10px;
    backdrop-filter: blur(10px);
  }

  #chat li .reply {
    border: 1px solid #ffffff10;
    border-radius: 5px;
    background: #ffffff10;
  }

  #volume-slider {
    filter: invert(1);
  }

  #names .name {
    color: #eee;
  }

  #cursors .cursor {
    filter: invert(1);
  }

  #cursors .cursor .name {
    /* reverse invert */
    filter: invert(1);
  }
</style>
`);

$(".discord-button img").prop("src", "https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a69f118df70ad7828d4_icon_clyde_blurple_RGB.svg");

function setParticipantStyle(p) {
  $(p.nameDiv).css({
      "background": `${p.color}40`,
      "backdrop-filter": `blur(10px)`
    });

    $(`#names #namediv-${p._id}:hover`).css({
      "background": `${p.color}80`
    });

    $(p.cursorDiv).find(`.name`).css({
      "background": `${p.color}40`,
      "backdrop-filter": `blur(10px)`,
      "border": `1px solid #ffffff10`,
      "border-radius": `5px`
    });
}

globalThis.MPP.client.on("participant added", p => {
  setTimeout(() => {
    setParticipantStyle(p);
  }, 50);
});

globalThis.MPP.client.on("participant update", p => {
  setTimeout(() => {
    setParticipantStyle(p);
  }, 50);
});

function setReplyStyle(msg) {
  // Change reply style
  $(`#msg-${msg.r} .replyLink`).css({
    "background": `#000000`
  });
}

globalThis.MPP.client.on("a", msg => {
  if (!msg.id) return;
  setReplyStyle(msg);
});

globalThis.MPP.client.on("c", msg => {
  for (const a of msg.c) {
    if (!a.r) continue;
    setReplyStyle(a);
  }
});