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


    })();