// ==UserScript==
// @name Vanis.io change menu and name color
// @namespace http://tampermonkey.net/
// @version 1.1
// @description change the colors of the menu and your name
// @author Yo7
// @match *://vanis.io/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=vanis.io
// @require http://code.jquery.com/jquery-3.3.1.min.js
// @require https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js
// @run-at document-start
// @grant none
// ==/UserScript==
/*
Menu hotkey is shift you can change this on line 157
Original script by Nuro#9999
I play vanis with the name ash say hi if you see me <3
*/
(function() {
var time = 10 //how fast wave gradients move
var nameclr
var gcolor1
var gcolor2
var local = {
MENU_CONFIG: {
RAINBOW: false,
},
COLOR_HUE: 0,
COLOR_HUE2: 300,
GAME_WS: null,
GAME_INIT: false,
PLAYER_PACKET_SPAWN: [],
PLAYER_SOCKET: null,
PLAYER_IS_DEAD: false,
PLAYER_MOUSE: {
x: null,
y: null,
},
GAME_BYPASS: {
mouseFrozen: Symbol(),
utf8: new TextEncoder()
}
}
function changeHue() {
355 == local.COLOR_HUE && (local.COLOR_HUE = 0), local.COLOR_HUE++;
355 == local.COLOR_HUE2 && (local.COLOR_HUE2 = 0), local.COLOR_HUE2++;
$('.fade-box').css({
background: 'linear-gradient(to right bottom,hsl('+local.COLOR_HUE+', 50%, 50%),hsl('+local.COLOR_HUE2+', 50%, 50%)'
})
}
function ready() {
setInterval(() => {
if(local.MENU_CONFIG.RAINBOW) {
changeHue()
}
}, time)
}
const { fillText } = CanvasRenderingContext2D.prototype;
CanvasRenderingContext2D.prototype.fillText = function(text, x, y) {
let config = local.SCRIPT_CONFIG
if(text == document.getElementById("nickname").value) {
this.fillStyle = nameclr;
}
fillText.call(this, ...arguments);
}
document.addEventListener("DOMContentLoaded", ready)
var styleItem = document.createElement("style");
styleItem.type = "text/css";
styleItem.appendChild(document.createTextNode(`
.test {
position: absolute;
z-index: 1;
overflow: auto;
position: relative;
height: 510px;
padding: 10px;
font-size: 5px;
z-index: 1;
right: 850px;
top: 80px;
overflow: auto;
height: 100%;
width: 100%;
}
.test {
position: absolute;
z-index: 1;
left: 0;
top: 0;
overflow: auto;
height: 100%;
width: 100%;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 29%), 0 2px 10px 0 rgb(0 0 0 / 29%);
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 29%), 0 2px 10px 0 rgb(0 0 0 / 29%);
}
}
#test {
padding: 10px;
box-shadow: 0px 0px 10px #FFFFFF;
text-shadow: 0 0 0px #000000, 0 0 0px #000000, 0 0 50px #000000;
background: linear-gradient(55deg, #0fb8ad 0%, #1fc8db 51%, rgba(0,0,0,.5); 85%);
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 29%), 0 2px 10px 0 rgb(0 0 0 / 29%);
box-shadow: 0 0 2px #6dd1ff,0 10 10 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2);
}
#test2 {
padding: 10px;
box-shadow: 0px 0px 10px #FFFFFF;
text-shadow: 0 0 0px #000000, 0 0 0px #000000, 0 0 50px #000000;
background: linear-gradient(55deg, #0fb8ad 0%, #1fc8db 51%, rgba(0,0,0,.5); 85%);
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 29%), 0 2px 10px 0 rgb(0 0 0 / 29%);
box-shadow: 0 0 2px #6dd1ff,0 10 10 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2);
}
#test {
padding: 10px;
box-shadow: 3px 3px 10px #000000;
border: 3.5px solid black;
}
.indent {
margin-left: 10px;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,1.0);
}
`))
document.head.appendChild(styleItem);
document.addEventListener("keydown", function(e) {
if (e.keyCode == 16) { //this is the key that brings up the menu you can change this to whatever you want. Here are some good alternatives | shift = 16 | escape = 27 | backspace = 8 | up arrow = 38 | tab = 9 | enter = 13|
$('#test').toggle();
document.getElementById("nametog").checked = false;
document.getElementById("aplyg").checked = false;
document.getElementById("sg001").checked = false;
document.getElementById("sg002").checked = false;
document.getElementById("sg003").checked = false;
document.getElementById("wg001").checked = false;
document.getElementById("wg002").checked = false;
};
});
let cursorDisplay = document.createElement("div");
cursorDisplay.id = "test"
document.body.prepend(cursorDisplay);
document.getElementById('test').style.position='absolute'
document.getElementById('test').style.textAlign='left'
document.getElementById('test').style.display='none'
document.getElementById('test').style.width='190px'
document.getElementById('test').style.height='800px'
document.getElementById('test').style.top = "0%";
document.getElementById('test').style.left = "67%";
document.getElementById('test').style.backgroundColor='rgb(0,0,0,.7)'
document.getElementById('test').style.color = 'white'
document.getElementById('test').innerHTML =
`
<body>
<h2 style="font-size: 25px; color: #ADFF2F;">Name color</h2>
</label>Apply name color<input type="checkbox" id="nametog">
</label><input type="text" style="width: 65px;" class="inputTxt" id="nameclr2" placeholder="white">
<br>
<br>
<h2 style="font-size: 25px; color: #FFD700;">Wave gradients</h2>
</label">Rainbow<input type="checkbox" id="wg001"> <br>
</label">Pulsor<input type="checkbox" id="wg002"> <br>
<br>
<br>
<h2 style="font-size: 25px; color: #FF0000;">Static gradients</h2>
</label">Sunrise<input type="checkbox" id="sg001"> <br>
</label">Sunset<input type="checkbox" id="sg002"> <br>
</label">Ocean<input type="checkbox" id="sg003"> <br>
</label">Nebula<input type="checkbox" id="sg004">
<br>
<br>
<h2 style="font-size: 25px; color: #00FFFF;">Custom gradient</h2>
</label>Apply gradient<input type="checkbox" id="aplyg"> <br>
</label><input type="text" style="width: 65px;" class="inputTxt" id="cg1" placeholder="black">
</label><input type="text" style="width: 65px;" class="inputTxt" id="cg2" placeholder="black">
`;
var namecheck = document.querySelector("#nametog")
namecheck.addEventListener('change', function() {
if (this.checked) {
let nameclr3 = document.getElementById('nameclr2').value
nameclr = nameclr3
} else {
nameclr = "white"
}
});
var sgcheck = document.querySelector("#aplyg")
sgcheck.addEventListener('change', function() {
if (this.checked) {
let aplyg2 = document.getElementById('cg1').value
gcolor1 = aplyg2
let aplyg3 = document.getElementById('cg2').value
gcolor2 = aplyg3
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}else {
gcolor1 = "black"
gcolor2 = "black"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
var wgcheck001 = document.querySelector("#wg001")
wgcheck001.addEventListener('change', function() {
if (this.checked) {
local.MENU_CONFIG.RAINBOW = true;
} else {
local.MENU_CONFIG.RAINBOW = false;
}
});
var sgcheck001 = document.querySelector("#sg001")
sgcheck001.addEventListener('change', function() {
if (this.checked) {
gcolor1 = "#ff54f9"
gcolor2 = "#eff542"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
var sgcheck002 = document.querySelector("#sg002")
sgcheck002.addEventListener('change', function() {
if (this.checked) {
gcolor1 = "#d774ed"
gcolor2 = "#db3030"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
var sgcheck003 = document.querySelector("#sg003")
sgcheck003.addEventListener('change', function() {
if (this.checked) {
gcolor1 = "#5091f2"
gcolor2 = "#0b0380"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
var sgcheck004 = document.querySelector("#sg004")
sgcheck004.addEventListener('change', function() {
if (this.checked) {
gcolor1 = "#000000"
gcolor2 = "#490fdb"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
})();