Greasy Fork is available in English.
change the colors of the menu and your name
当前为
// ==UserScript==
// @name Vanis.io menu + name color
// @namespace http://tampermonkey.net/
// @version 1.0
// @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==
/*
The default hotkey to bring up the oiptions is SHIFT (only works while your playing)
Original script by Nuro#9999 I think ive made enough improvements to post this
You can change the hotkey that pulls up the menu on line 175
You can change how fast wave gradients move on line 48
It should be fairly easy to add more premade gradients if you know some html (200 && 297)
I play vanis with the name ash say hi if you see me <3
*/
(function() {
var local = {
MENU_CONFIG: {
RAINBOW: false,
PULSOR: false,
},
COLOR_HUE: 0,
COLOR_HUE2: 300,
COLOR_HUE3: 0,
COLOR_HUE4: 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()
}
}
var time = 10
var nameclr
var gcolor1
var gcolor2
document.addEventListener('keyup', (open)=>{
if (open.keyCode == 37){
}
});
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)
}
function changeHue2() {
355 == local.COLOR_HUE3 && (local.COLOR_HUE = 0), local.COLOR_HUE3++;
355 == local.COLOR_HUE4 && (local.COLOR_HUE2 = 0), local.COLOR_HUE4++;
$('.fade-box').css({
background: 'linear-gradient(to right bottom,hsl('+local.COLOR_HUE3+', 50%, 50%),hsl('+local.COLOR_HUE4+', 50%, 50%)'
})
}
function ready2() {
setInterval(() => {
if(local.MENU_CONFIG.PULSOR) {
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) { //Replace 16 with the keycode of whatever key you want. Here are some other options if your to lazy | shift = 16 | escape = 27 | up arrow = 38 | backspace = 8 XX
$('#test').toggle();
document.getElementById("nametog").checked = false;
document.getElementById("aplyg").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<input type="checkbox" id="nametog">
<br>
<br>
</label><input type="text" style="width: 65px;" class="inputTxt" id="nameclr2" placeholder="pink">
<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>
<br>
<h2 style="font-size: 25px; color: #00FFFF;">Custom gradient</h2>
</label>Apply<input type="checkbox" id="aplyg"><br>
</label><input type="text" style="width: 65px;" class="inputTxt" id="cg1" placeholder="pink">
</label><input type="text" style="width: 65px;" class="inputTxt" id="cg2" placeholder="red">
`;
var check1 = document.querySelector("#wg001")
check1.addEventListener('change', function() {
if (this.checked) {
local.MENU_CONFIG.RAINBOW = true;
} else {
local.MENU_CONFIG.RAINBOW = false;
}
});
var check2 = document.querySelector("#nametog")
check2.addEventListener('change', function() {
if (this.checked) {
let nameclr3 = document.getElementById('nameclr2').value
nameclr = nameclr3
} else {
nameclr = "white"
}
});
var check3 = document.querySelector("#sg001")
check3.addEventListener('change', function() {
if (this.checked) {
gcolor1 = "pink"
gcolor2 = "yellow"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
var check4 = document.querySelector("#aplyg")
check4.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 = "pink"
gcolor2 = "red"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
var check5 = document.querySelector("#sg002")
check5.addEventListener('change', function() {
if (this.checked) {
gcolor1 = "#d774ed"
gcolor2 = "#db3030"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
var check6 = document.querySelector("#sg003")
check6.addEventListener('change', function() {
if (this.checked) {
gcolor1 = "#5091f2"
gcolor2 = "#0b0380"
$('.fade-box').css({
background: `linear-gradient(to right bottom,${gcolor1},${gcolor2})`
})
}
});
var check7 = document.querySelector("#wg002")
check7.addEventListener('change', function() {
if (this.checked) {
local.MENU_CONFIG.PULSOR = true;
} else {
local.MENU_CONFIG.PULSOR = false;
}
});
})();