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.

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==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();
}