Neon theme

Neon theme for diep.io. Press G to change glow layers count (less glow layers = less lag). This theme currently works only in FFA, Maze and Sandbox.

// ==UserScript==
// @name         Neon theme
// @author       Nimdac#0648, rewritten by Shädam
// @description  Neon theme for diep.io. Press G to change glow layers count (less glow layers = less lag). This theme currently works only in FFA, Maze and Sandbox.
// @version      1.4.11
// @match        *://diep.io/*
// @namespace    https://greasyfork.org/users/668919
// @grant        none
// ==/UserScript==

var int = window.setInterval(function() {
  if(window.input != null) {
    window.clearInterval(int);
    onready();
  }
}, 100)

function onready() {
  const regexpC = new RegExp(`^(${[
    "Score: ([0-9]{1,3})(,[0-9]{1,3})?(,[0-9]{1,3})?",
    "Scoreboard",
    "diep\\.io",
    "[0-9]+\\.[0-9] ms vultr-(amsterdam|miami|la|singapore|sydney)",
    "[0-9]+\\.[0-9] FPS",
    "([0-9]+h )?([0-9]{1,2}m )?[0-9]{1,2}s",
    "([0-9]{1,3})(,[0-9]{1,3})(,[0-9]{1,3})?",
    "You were killed by:",
    "\\(press enter to continue\\)",
    "\\(they seem to prefer to keep an air of mystery about them\\)",
    "You've killed [^]+",
    "Game mode"
  ].join("|")})$`);
  const regexpR = new RegExp(`^(${[
    "\\[[0-8]\\]",
    "Health Regen",
    "Max Health",
    "Body Damage",
    "(Bullet|Drone) Speed",
    "(Bullet|Drone) (Health|Penetration)",
    "(Bullet|Drone) Damage",
    "Drone Count",
    "Reload",
    "Movement Speed",
    "More games"
  ].join("|")})$`);
  const fillColors = [
    { color: "#000001", cmd: ["net_replace_color 2", "net_replace_color 3"] },
    { color: "#000002", new: "#00c0ff" },
    { color: "#000100", cmd: ["net_replace_color 0", "net_replace_color 1", "net_replace_color 10"] },
    { color: "#000200", new: "#cf33ff" },
    { color: "#010000", cmd: ["net_replace_color 8", "net_replace_color 12", "net_replace_color 6"] },
    { color: "#000003", cmd: ["net_replace_color 4", "net_replace_color 9", "net_replace_color 15", "ren_health_fill_color"] },
    { color: "#000006", new: "#ff0080" },
    { color: "#010001", cmd: ["net_replace_color 11"] },
    { color: "#010100", cmd: ["net_replace_color 14"], new: "#030006" },
    { color: "#030000", cmd: ["net_replace_color 17"] },
    { color: "#020000", new: "#ffff33" },
    { color: "#000300", cmd: ["net_replace_color 7"] },
    { color: "#000101", cmd: ["net_replace_color 16"] },
    { color: "#060000", new: "#ffffff" },
    { color: "#010002", cmd: ["net_replace_color 5"] },
    { color: "#020004", new: "#ca80ff" }
  ];
  const strokeColors = [
    { color: "#123456", cmd: ["ren_xp_bar_fill_color"] },
    { color: "#123321", cmd: ["ren_health_background_color"] },
    { color: "#010101", cmd: ["ren_score_bar_fill_color", "net_replace_color 13"] },
    { color: "#000200", new: "#cf33ff" },
    { color: "#321123", cmd: ["ren_bar_background_color"] },
    { color: "#000002", new: "#00c0ff" },
    { color: "#020000", new: "#ffff33" },
    { color: "#000003", new: "#ff0080" },
    { color: "#000006", new: "#ff0080" },
    { color: "#020002", new: "#ff33bb" },
    { color: "#020200", new: "#cf33ff" },
    { color: "#060000", new: "#ffffff" },
    { color: "#000600", new: "#00ff00" },
    { color: "#000202", new: "#ff8000" },
    { color: "#020004", new: "#ca80ff" }
  ];
  const darkenColor = (color, m) => {
    m = m || 1;
    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
    return result ? `rgb(${parseInt(result[1], 16) / (2.5*m)},${parseInt(result[2], 16) / (2.5*m)},${parseInt(result[3], 16) / (2.5*m)})` : null;
  };
  strokeColors[1].new = darkenColor(strokeColors[7].new, 2);

  const cc = CanvasRenderingContext2D.prototype;
  const UIColors = ["#987789", "#789987", "#4c3b44", "#3c4c43", "#ac92a0", "#93ad9f", "#795f6d", "#607a6c"];
  const realStroke = cc.stroke;
  const realFillRect = cc.fillRect;

  cc.fill = new Proxy(cc.fill, {
    apply: function(to, what, args) {
      if(["#888888", "#eeeeee"].includes(what.fillStyle)) return;
      if(what.fillStyle == "#000000") what.fillStyle = strokeColors[7].new;
      if(what.fillStyle == "#4c4c4d") what.fillStyle = fillColors[1].new;
      if(what.fillStyle == "#4c4d4c") what.fillStyle = fillColors[3].new;
      if(what.fillStyle == "#4c4c4e") what.fillStyle = fillColors[6].new;
      if(UIColors.includes(what.fillStyle)) {
        let i = UIColors.indexOf(what.fillStyle);
        let color = [
          strokeColors[3].new, strokeColors[7].new,
          darkenColor(strokeColors[3].new), darkenColor(strokeColors[7].new),
          strokeColors[3].new, strokeColors[7].new,
          strokeColors[3].new, strokeColors[7].new
        ][i];
        if(i < UIColors.length - 4) {
          what.strokeStyle = color;
          what.save();
          what.clip();
          what.lineWidth *= 0.4;
          realStroke.apply(what);
          what.restore();
          return;
        }
        what.fillStyle = color;
      }
      for(let x of fillColors) {
        if(x.color == what.fillStyle) {
          what.fillStyle = (x.new || "#000000");
          break;
        }
      }
      if(what.fillStyle == "#030006") {
        what.strokeStyle = strokeColors[3].new;
        what.save();
        what.clip();
        what.lineWidth = c.height/100;
        realStroke.apply(what);
        what.restore();
        what.globalCompositeOperation = "lighten";
      }
      return to.apply(what, args);
    }
  });

  cc.stroke = new Proxy(cc.stroke, {
    apply: function(to, what, args) {
      if(!strokeColors.map(x => x.color).includes(what.strokeStyle)) return;
      if(["#123456", "#321123", "#010101"].includes(what.strokeStyle)) return;
      for(let x of strokeColors) {
        if(x.color == what.strokeStyle) {
          what.strokeStyle = (x.new || "#000000");
          break;
        }
      }
      return to.apply(what, args);
    }
  });

  cc.fillText = new Proxy(cc.fillText, {
    apply: function(to, what, args) {
      if(regexpR.test(args[0])) return;
      let i;
      if(regexpC.test(args[0]) || what.fillStyle == "#ffff90") {
        what.fillStyle = strokeColors[7].new;
        i = 1;
      } else {
        what.fillStyle = strokeColors[3].new;
      }
      i ^= 1;
      if(/^[0-9]+(\.[0-9][km])?$/.test(args[0])) what.fillStyle = [strokeColors[3].new, strokeColors[7].new][i];
      return to.apply(what, args);
    }
  });

  cc.strokeText = new Proxy(cc.strokeText, {
    apply: function(to, what, args) {
      return;
    }
  });

  cc.fillRect = new Proxy(cc.fillRect, {
    apply: function(to, what, args) {
      if(["#456654", "#321123", "#0000ff", "#f3f1a9", "#c1adb8", "#aec1b7", "#becdc5", "#cdbdc6", "#8b9a92", "#9a8a93", "#adadad", "#bdbdbd", "#8a8a8a", "#ff0000"].includes(what.fillStyle)) return;
      return to.apply(what, args);
    }
  });

  cc.setTransform = new Proxy(cc.setTransform, {
    apply: function(to, what, args) {
      if(what.fillStyle == "#456654") return realFillRect.apply(ctx7, [args[4], args[5], args[0], args[3]]);
      if(["#8b9a92", "#9a8a93", "#8a8a8a"].includes(what.fillStyle)) {
        what.shadowColor = "#ff0000";
        what.shadowBlur = 1;
      }
      return to.apply(what, args);
    }
  });

  cc.drawImage = new Proxy(cc.drawImage, {
    apply: function(to, what, args) {
      if(args[0].src == `https://static.diep.io/title.png`) args[0].src = `https://i.imgur.com/hTy66ES.png`;
      return to.apply(what, args);
    }
  });

  let c = document.getElementById("canvas"),
      c2 = document.createElement("canvas"),
      ctx2 = c2.getContext("2d"),
      c3 = document.createElement("canvas"),
      ctx3 = c3.getContext("2d"),
      c4 = document.createElement("canvas"),
      ctx4 = c4.getContext("2d"),
      c5 = document.createElement("canvas"),
      ctx5 = c5.getContext("2d"),
      c6 = document.createElement("canvas"),
      ctx6 = c6.getContext("2d"),
      c7 = document.createElement("canvas"),
      ctx7 = c7.getContext("2d"),
      t = document.getElementById("textInput"),
      body = document.getElementsByTagName("body")[0];

  t.style.color = strokeColors[7].new;
  c.style["mix-blend-mode"] = "screen";

  c2.width = c.width;
  c2.height = c.height;
  c2.style.width = "100%";
  c2.style.height = "100%";
  c2.style.position = "absolute";
  c2.style.top = "0px";
  c2.style.left = "0px";
  c2.style.zIndex = -3;

  ctx2.fillStyle = "#1a0626";
  ctx2.fillRect(0, 0, c.width, c.height);

  c3.width = c.width;
  c3.height = c.height;
  c3.style.width = "100%";
  c3.style.height = "100%";
  c3.style.position = "absolute";
  c3.style.top = "0px";
  c3.style.left = "0px";
  c3.style.zIndex = -1;
  c3.style.filter = "blur(0.15vw)";
  c3.style["mix-blend-mode"] = "screen";

  c4.width = c.width;
  c4.height = c.height;
  c4.style.width = "100%";
  c4.style.height = "100%";
  c4.style.position = "absolute";
  c4.style.top = "0px";
  c4.style.left = "0px";
  c4.style.zIndex = -1;
  c4.style.filter = "blur(0.3vw)";
  c4.style["mix-blend-mode"] = "screen";

  c5.width = c.width;
  c5.height = c.height;
  c5.style.width = "100%";
  c5.style.height = "100%";
  c5.style.position = "absolute";
  c5.style.top = "0px";
  c5.style.left = "0px";
  c5.style.zIndex = -1;
  c5.style.filter = "blur(0.9vw)";
  c5.style["mix-blend-mode"] = "screen";

  c6.width = c.width;
  c6.height = c.height;
  c6.style.width = "100%";
  c6.style.height = "100%";
  c6.style.position = "absolute";
  c6.style.top = "0px";
  c6.style.left = "0px";
  c6.style.zIndex = -1;
  c6.style.filter = "blur(1.8vw)";
  c6.style["mix-blend-mode"] = "screen";

  c7.width = c.width;
  c7.height = c.height;
  c7.style.width = "100%";
  c7.style.height = "100%";
  c7.style.position = "absolute";
  c7.style.top = "0px";
  c7.style.left = "0px";
  c7.style.zIndex = -2;

  ctx7.fillStyle = "#15051f";

  body.appendChild(c2);
  body.appendChild(c3);
  body.appendChild(c4);
  body.appendChild(c5);
  body.appendChild(c6);
  body.appendChild(c7);

  window.addEventListener("resize", () => {

    c2.width = c.width;
    c2.height = c.height;
    ctx2.fillStyle = "#1a0626";
    ctx2.fillRect(0, 0, c.width, c.height);

    c3.width = c.width;
    c3.height = c.height;

    c4.width = c.width;
    c4.height = c.height;

    c5.width = c.width;
    c5.height = c.height;

    c6.width = c.width;
    c6.height = c.height;

    c7.width = c.width;
    c7.height = c.height;
    ctx7.fillStyle = "#15051f";

  }, false);
  [
    "ui_replace_colors" + " 0x987789 0x789987".repeat(4),
    "ren_fps true",
    "ren_changelog false",
    "ren_achievements false",
    "ren_background_solid_color true",
    "ren_background_color 0x000000",
    "ren_border_color_alpha 1",
    "ren_border_color 0x456654",
    "ren_minimap_border_color 0xcf33ff",
    "ren_minimap_background_color 0x321123",
    "ren_stroke_soft_color_intensity -1"
  ].forEach(x => window.input.execute(x));
  for(let x of fillColors.concat(strokeColors)) {
    if(!x.cmd) continue;
    x.cmd.forEach(cmd => window.input.execute(`${cmd} 0x${x.color.slice(1)}`));
  }

  const contexts = [ctx3, ctx4, ctx5, ctx6];
  const canvases = [c3, c4, c5, c6];
  let mode = localStorage.diepNeonMode;
  if (mode === undefined) {
    mode = contexts.length-1;
    localStorage.setItem("diepNeonMode", contexts.length-1);
  };
  let loop;
  const getLoop = (e, f) => {
    if(e.code === "KeyG") {
      !f && mode++;
      if(mode > contexts.length) mode = 0;
      localStorage.setItem("diepNeonMode", mode);
      loop = () => {
        contexts.slice(0, mode).forEach(ctx => ctx.drawImage(c, 0, 0));
        ctx7.clearRect(0,0, c.width*2, c.height*2);
        requestAnimationFrame(loop);
      }
      canvases.slice(0, mode).forEach(el => body.appendChild(el));
      canvases.slice(mode, canvases.length).forEach(el => body.removeChild(el));
    }
  }
  getLoop({code: "KeyG"}, true);
  document.addEventListener("keydown", getLoop);
  loop();
}