Greasy Fork

how do you activate? i pressed r but nothing happened

// hey colza, its layered behind the UI, i fixed the script by adding 2 lines to layer it properly for the new Diep.io interface. just copy-paste this whole message into your script until x03 updates it themself. your pal, -end.
// ==UserScript==
// @name Diep.io x03 Mod Menu
// @namespace http://tampermonkey.net/
// @version 1.0
// @homepage https://greasyfork.org/scripts/
// @description Loop upgrade custom builds, render aim line, render factory guide circle, and more.
// @author x03#2666 / x032205
// @match https://diep.io/
// @grant none
// @license GNU GPLv3
// @downloadURL https://update.greasyfork.org/scripts/464910/Diepio%20x03%20Mod%20Menu.user.js
// @updateURL https://update.greasyfork.org/scripts/464910/Diepio%20x03%20Mod%20Menu.meta.js
// ==/UserScript==

;(function () {
'use strict'

//== Basic Elements ==//
const main_panel = document.createElement('div')
main_panel.id = 'main_panel'

// Anchor
const anchor = document.createElement('a')
anchor.id = 'anchor'
anchor.style.zIndex = '10';

// Header
const header = document.createElement('h1')
header.textContent = 'x03 Mod Menu | Toggle: [R]'
anchor.appendChild(header)

// Holder panel
const holder_panel = document.createElement('div')
holder_panel.id = 'holder_panel'
anchor.appendChild(holder_panel)

// Tab side panel
const side_panel = document.createElement('div')
side_panel.classList.add('panel_1')
holder_panel.appendChild(side_panel)

// Display panel
const display_panel = document.createElement('div')
display_panel.classList.add('panel_1')
holder_panel.appendChild(display_panel)
display_panel.style.width = '100%'
display_panel.style.marginLeft = '4px'
display_panel.innerHTML = `

select a tab
`

//== Tab Panels ==//

//== VISUAL TAB
const view_line = document.createElement('div')
view_line.style.textAlign = 'left'
view_line.style.alignItems = 'center'
view_line.style.height = '33px'
view_line.style.display = 'flex'

const view_line_text = document.createElement('span')
view_line_text.style.fontWeight = 'bold'
view_line_text.textContent = 'View Aim Line'

const view_line_label = document.createElement('label')
view_line_label.classList.add('switch')

const view_line_toggle = document.createElement('INPUT')
view_line_toggle.setAttribute('type', 'checkbox')
view_line_label.appendChild(view_line_toggle)

const view_line_div = document.createElement('div')
view_line_label.appendChild(view_line_div)
view_line.appendChild(view_line_label)
view_line.appendChild(view_line_text)

// View Circle
const view_circle = document.createElement('div')
view_circle.style.textAlign = 'left'
view_circle.style.alignItems = 'center'
view_circle.style.height = '33px'
view_circle.style.display = 'flex'

const view_circle_text = document.createElement('span')
view_circle_text.style.fontWeight = 'bold'
view_circle_text.textContent = 'View Factory Cicle'

const view_circle_label = document.createElement('label')
view_circle_label.classList.add('switch')

const view_circle_toggle = document.createElement('INPUT')
view_circle_toggle.setAttribute('type', 'checkbox')
view_circle_label.appendChild(view_circle_toggle)

const view_circle_div = document.createElement('div')
view_circle_label.appendChild(view_circle_div)
view_circle.appendChild(view_circle_label)
view_circle.appendChild(view_circle_text)

// Tab Control
const visual_tab = document.createElement('button')
visual_tab.classList.add('tab_button')
side_panel.appendChild(visual_tab)
visual_tab.textContent = 'Visual'
visual_tab.onclick = function () {
display_panel.innerHTML = ``
display_panel.appendChild(view_line)
display_panel.appendChild(view_circle)
}

//== AUTO UPGRADES TAB
const au_label = document.createElement('span')
au_label.textContent = 'Custom Build'
au_label.style.fontWeight = 'bold'

const au_input = document.createElement('INPUT')
au_input.ariaReadOnly = 'true'
au_input.setAttribute('type', 'text')
au_input.style.borderColor = 'rgb(20 20 20)'
au_input.style.borderRadius = '5px'
au_input.style.marginTop = '4px'
au_input.style.outline = 'none'
au_input.style.color = 'white'
au_input.placeholder = '000000000000000000000000000000000'
au_input.style.backgroundColor = 'rgb(25 25 25)'

const au_set_button = document.createElement('button')
au_set_button.classList.add('button')
au_set_button.textContent = 'Set Build'

au_set_button.onclick = function () {
input.execute('game_stats_build ' + au_input.value)
}

// Autoset toggle
const au_autoset = document.createElement('div')
au_autoset.style.textAlign = 'left'
au_autoset.style.alignItems = 'center'
au_autoset.style.height = '33px'
au_autoset.style.display = 'flex'

const au_autoset_text = document.createElement('span')
au_autoset_text.style.fontWeight = 'bold'
au_autoset_text.textContent = 'Keep Build on Respawn'

const au_autoset_label = document.createElement('label')
au_autoset_label.classList.add('switch')

const au_autoset_toggle = document.createElement('INPUT')
au_autoset_toggle.setAttribute('type', 'checkbox')
au_autoset_label.appendChild(au_autoset_toggle)

const au_autoset_div = document.createElement('div')
au_autoset_label.appendChild(au_autoset_div)
au_autoset.appendChild(au_autoset_label)
au_autoset.appendChild(au_autoset_text)

// Tab Control
const auto_upgrades_tab = document.createElement('button')
auto_upgrades_tab.classList.add('tab_button')
side_panel.appendChild(auto_upgrades_tab)
auto_upgrades_tab.textContent = 'Auto Upgrades'
auto_upgrades_tab.onclick = function () {
display_panel.innerHTML = ``
display_panel.style.textAlign = 'left'
display_panel.appendChild(au_label)
display_panel.appendChild(au_input)
display_panel.appendChild(au_set_button)
display_panel.appendChild(au_autoset)
}

//== CREDITS TAB
const credits_tab = document.createElement('button')
credits_tab.classList.add('tab_button')
side_panel.appendChild(credits_tab)
credits_tab.textContent = 'Credits'
credits_tab.onclick = function () {
display_panel.style.textAlign = 'center'
display_panel.innerHTML = `


Mod menu made by x03
Discord: x03#2666

Github: x032205

`
}

//== Style ==//
const style = document.createElement('style')
style.textContent = `
#main_panel a {
position: absolute;

font-family: 'Outfit', sans-serif;
src: url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
}

#anchor {
display: inline-flex;
flex-direction: column;

width: 600px;
height: 300px;

text-align: center;

top: 300px;
right: 50px;
padding: 0 7px 14px 7px;

color: white;
background: rgb(15 15 15);

border-radius: 7px;
border-style: solid;
border-width: 2px;
border-color: rgb(60 60 60);
}

#holder_panel {
display: inline-flex;
flex-direction: row;
height: 100%;
}

h1 {
margin-top: 10px;
margin-bottom: 5px;
color: rgb(52 211 153);
}

.switch input {
position: absolute;
opacity: 0;
cursor: pointer;
}

.switch {
display: inline-block;
font-size: 20px; /* 1 */
height: 1em;
width: 2em;
background: rgb(50 50 50);
border-radius: 1em;
margin-right: 10px;
cursor: pointer;
}

.switch div {
height: 1em;
width: 1em;
border-radius: 1em;
background: rgb(100 100 100);
-webkit-transition: all 100ms;
-moz-transition: all 100ms;
transition: all 100ms;
cursor: pointer;
}

.switch input:checked + div {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
background: rgb(40 200 140)
}

.panel_1 {
display: inline-flex;
flex-direction: column;

padding: 4px;
width: fit-content;
height: 100%;
border-radius: 5px;

background: rgb(30 30 30);
white-space: nowrap;
}

.button {
font-family: 'Outfit', sans-serif;
src: url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
font-weight: bold;
cursor: pointer;
font-size: 14px;

padding: 2px 4px 2px 4px;
margin-top: 2px;
margin-bottom: 2px;

color: white;
background: rgb(50 50 50);

border-radius: 3px;
border-style: solid;
border-width: 2px;
border-color: rgb(60 60 60);

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 50ms;
}

.tab_button {
font-family: 'Outfit', sans-serif;
src: url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
font-weight: bold;
cursor: pointer;
font-size: 18px;

padding: 4px 8px 4px 8px;
margin-bottom: 4px;

color: white;
background: rgb(50 50 50);

border-radius: 3px;
border-style: solid;
border-width: 2px;
border-color: rgb(60 60 60);

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 50ms;
}

.tab_button:hover {
background: rgb(60 60 60);
border-color: rgb(80 80 80);
}

.button:hover {
background: rgb(60 60 60);
border-color: rgb(80 80 80);
}

.tab_button:focus {
background: rgb(50 60 50);
border-color: rgb(50 100 50);
}
`

//== Appends ==//
main_panel.appendChild(anchor)
document.body.appendChild(main_panel)
document.head.appendChild(style)

//== Funcs ==//
function ToggleDisplay(element_id) {
var element = document.getElementById(element_id)
element.style.display = element.style.display === 'none' ? 'block' : 'none'
}

//== Vars ==//
let X, Y, x, y
let Z = false
let radius = []

//== Events ==//
document.body.onkeyup = function (ctx) {
if (ctx.keyCode === 82) {
ToggleDisplay('main_panel')
} else if (document.activeElement === au_input && parseInt(ctx.key) >= 1 && parseInt(ctx.key) <= 8) {
au_input.value = au_input.value + ctx.key
} else if (document.activeElement === au_input && ctx.keyCode === 8) {
au_input.value = au_input.value.slice(0, -1)
}
}

document.onmousemove = function () {
x = event.clientX
y = event.clientY
}

document.onmousedown = function (e) {
if (e.button == 2) {
Z = true
}
}

document.onmouseup = function (e) {
if (e.button == 2) {
Z = false
}
}

//== Draw Funcs ==//
const canvas = document.createElement('canvas')

function get_Radius() {
X = window.innerWidth / 2
Y = window.innerHeight / 2
canvas.width = window.innerWidth
canvas.height = window.innerHeight
canvas.style.zIndex = '10';

// thx to "Licht_denker47" for these sets
radius[0] = window.innerWidth * 0.17681239669
radius[1] = window.innerWidth * 0.06545454545
radius[2] = window.innerWidth * 0.16751239669
radius[3] = window.innerWidth * 0.36
}
get_Radius()
window.addEventListener('resize', get_Radius)

canvas.style.position = 'absolute'
canvas.style.top = '0px'
canvas.style.left = '0px'
canvas.style.pointerEvents = 'none'

document.body.appendChild(canvas)
const ctx = canvas.getContext('2d')

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)

// Aim Line
if (view_line_toggle.checked) {
ctx.beginPath()
ctx.moveTo(X, Y)
ctx.lineTo(x, y)
ctx.lineWidth = 50
ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)'
ctx.stroke()

ctx.beginPath()
ctx.moveTo(X, Y)
ctx.lineTo(x, y)
ctx.lineWidth = 2
ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)'
ctx.stroke()
}

if (view_circle_toggle.checked) {
// Large Circle
ctx.lineWidth = 2
ctx.beginPath()
ctx.arc(X, Y, radius[3], 0, 2 * Math.PI)
ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)'
ctx.stroke()

// Inner Circle
ctx.beginPath()
ctx.arc(x, y, radius[1], 0, 2 * Math.PI)
ctx.stroke()

// Outer Circle
ctx.beginPath()
if (Z) {
ctx.arc(x, y, radius[0], 0, 2 * Math.PI)
} else {
ctx.arc(x, y, radius[2], 0, 2 * Math.PI)
}
ctx.stroke()
}

if (au_autoset_toggle.checked) {
input.execute('game_stats_build ' + au_input.value)
}
requestAnimationFrame(draw)
}
draw()
})()