☰

Vanis.io Extended

VEX - Vanis.io Extended

  1. // ==UserScript==
  2. // @name         Vanis.io Extended
  3. // @namespace    VEX
  4. // @version      0.1
  5. // @description  VEX - Vanis.io Extended
  6. // @author       l3mpik, Diszy
  7. // @match        https://vanis.io/
  8. // @grant        none
  9. // @run-at       document-end
  10. // @resource     https://cdn.jsdelivr.net/npm/sweetalert2@9
  11. // ==/UserScript==
  12. /*
  13. Please do not skid our code, we worked hard on this. If you want to copy something, message us first on Discord to get permission.
  14. */
  15. /*
  16. Please do not skid our code, we worked hard on this. If you want to copy something, message us first on Discord to get permission.
  17. */
  18. /*
  19. Please do not skid our code, we worked hard on this. If you want to copy something, message us first on Discord to get permission.
  20. */
  21. /*
  22. Please do not skid our code, we worked hard on this. If you want to copy something, message us first on Discord to get permission.
  23. */
  24. /*
  25. Please do not skid our code, we worked hard on this. If you want to copy something, message us first on Discord to get permission.
  26. */
  27.  
  28. const VEX = `
  29. <style>
  30.  
  31. .vex {
  32.  
  33.   width : 350px;
  34.   height: 800px;
  35.   right: 2%;
  36.   position: fixed;
  37.   top: calc(50% - 400px);
  38.  
  39.   display: none;
  40.   flex-wrap : wrap;
  41.   justify-content: center;
  42.  
  43.   background: rgba(30, 30, 30, .75);
  44.   border: 1px solid red;
  45.  
  46.   font-family : Monospace;
  47.  
  48.   z-index: 9999;
  49. }
  50.  
  51. .vex > .vex-hud {
  52.  
  53.   width: 90%;
  54.  
  55.   display : flex;
  56.   flex-wrap: wrap;
  57.   justify-content: center;
  58. }
  59.  
  60. .vex > .vex-hud > p {
  61.  
  62.   width: 100%;
  63.   text-align: center;
  64.  
  65.   color : white;
  66. }
  67. .vex > .vex-hud > input {
  68.  
  69.   width: 100%;
  70.  
  71.   background : rgba(30, 30, 30, .65);
  72.   border: 1px solid rgba(30, 30, 30, 1);
  73.  
  74.   text-align: center;
  75.   color: #ffffff;
  76.  
  77.   outline : 0;
  78.   box-shadow: none;
  79. }
  80.  
  81. .vex > .vex-skins {
  82.  
  83.   width: 90%;
  84.  
  85.   display : flex;
  86.   flex-wrap: wrap;
  87.   justify-content: center;
  88. }
  89.  
  90. .vex > .vex-skins > .vex-skins-item {
  91.  
  92.   width: 100%;
  93. }
  94. .vex > .vex-skins > .vex-skins-item > p {
  95.  
  96.   width: 100%;
  97.   text-align: center;
  98.  
  99.   color : white;
  100. }
  101.  
  102. .vex > .vex-skins > .vex-skins-item > input {
  103.  
  104.   width: 100%;
  105.  
  106.   background : rgba(30, 30, 30, .65);
  107.   border: 1px solid rgba(30, 30, 30, 1);
  108.  
  109.   text-align: center;
  110.   color: #ffffff;
  111.  
  112.   outline : 0;
  113.   box-shadow: none;
  114. }
  115.  
  116. .vex > .vex-controls {
  117.  
  118.   width: 90%;
  119.  
  120.   display : flex;
  121.   flex-wrap: wrap;
  122.   justify-content: center;
  123. }
  124.  
  125. .vex > .vex-controls > p {
  126.  
  127.   width: 100%;
  128.   text-align: center;
  129.  
  130.   color : white;
  131. }
  132.  
  133. .vex > .vex-controls > button {
  134.  
  135.   width: 50%;
  136.  
  137.   background : rgba(30, 30, 30, .65);
  138.   border: 1px solid rgba(30, 30, 30, 1);
  139.  
  140.   text-align: center;
  141.   color: #ffffff;
  142.  
  143.   outline : 0;
  144.   box-shadow: none;
  145. }
  146.  
  147. #vex-r-start {}
  148. #vex-r-start.active {
  149.  
  150.   color: lime;
  151. }
  152. #vex-r-start:hover {
  153.  
  154.   color: lime;
  155. }
  156.  
  157. #vex-r-stop {}
  158. #vex-r-stop.active {
  159.  
  160.   color: tomato;
  161. }
  162. #vex-r-stop:hover {
  163.  
  164.   color: tomato;
  165. }
  166.  
  167. .vex > .vex-extras {
  168.  
  169.   width: 90%;
  170.  
  171.   display : flex;
  172.   flex-wrap: wrap;
  173.   justify-content: center;
  174. }
  175.  
  176. .vex > .vex-extras {
  177.  
  178.   width: 90%;
  179.  
  180.   text-align: center;
  181.   color: white;
  182. }
  183. .vex > .vex-extras > .vex-extras-item {
  184.  
  185.   width: 100%;
  186.   display: inline-flex;
  187. }
  188. .vex > .vex-extras > .vex-extras-item > p {
  189.  
  190.   width: 80%;
  191.   text-align: center;
  192.  
  193.   color : white;
  194. }
  195.  
  196. .vex > .vex-extras > .vex-extras-item > input {
  197.  
  198.   margin-left: 10px;
  199.  
  200.   background : rgba(30, 30, 30, .65);
  201.   border: 1px solid rgba(30, 30, 30, 1);
  202.  
  203.   text-align: center;
  204.   color: #ffffff;
  205.  
  206.   outline : 0;
  207.   box-shadow: none;
  208. }
  209.  
  210. </style>
  211.  
  212. <div class="vex">
  213.   <div class="vex-hud">
  214. <h1>HUD WILL BE UPDATED LATER</h1>
  215.     <p>Vanis HUD Color</p>
  216.     <input id="vex-hc" type="text" placeholder="hex/rgb/rgba ex. #ff0000 rgb(255, 0, 0)">
  217.   </div>
  218.  
  219.   <div class="vex-skins">
  220.  
  221.     <div class="vex-skins-item">
  222.       <p>Skin URL 1</p>
  223.       <input id="vex-s1" type="text" placeholder="https://skins.vanis.io">
  224.     </div>
  225.  
  226.         <div class="vex-skins-item">
  227.       <p>Skin URL 2</p>
  228.       <input id="vex-s2" type="text" placeholder="https://skins.vanis.io">
  229.     </div>
  230.         <div class="vex-skins-item">
  231.       <p>Skin URL 3</p>
  232.       <input id="vex-s3" type="text" placeholder="https://skins.vanis.io">
  233.     </div>
  234.  
  235.         <div class="vex-skins-item">
  236.       <p>Skin URL 4</p>
  237.       <input id="vex-s4" type="text" placeholder="https://skins.vanis.io">
  238.     </div>
  239.   </div>
  240.  
  241.   <div class="vex-controls">
  242.     <button id="vex-r-start">Start Skinchanger</button>
  243.     <button id="vex-r-stop">Stop Skinchanger</button>
  244.   </div>
  245.  
  246.   <div class="vex-extras">
  247.     <div class="vex-extras-item">
  248.       <p>Auto respawn</p>
  249.       <input id="vex-e-ar" type="checkbox">
  250.     </div>
  251.  
  252.     <div class="vex-extras-item">
  253.       <p>Skip stats</p>
  254.       <input id="vex-e-ss" type="checkbox">
  255.     </div>
  256.  
  257.   </div>
  258. <p>Credits to l3mpik & Diszy</p>
  259. </div>
  260. `;
  261.  
  262.  
  263.  
  264. setTimeout(()=>{
  265. window.showHud = () => {
  266. document.querySelector(".vex").style.display ="block";
  267. document.querySelector("#toggleHud").setAttribute("onclick", "hideHud()");
  268.  
  269. }
  270.  
  271. window.hideHud = () => {
  272. document.querySelector(".vex").style.display ="none";
  273. document.querySelector("#toggleHud").setAttribute("onclick", "showHud()");
  274. }
  275.  
  276.   document.querySelectorAll("#vanis-io_300x250")[0].innerHTML += VEX;
  277.   document.querySelector(".social-container").innerHTML += '<a id="toggleHud" style="background:#c00;cursor:pointer;outline:none;border:0;padding:5px;color:#dadada;box-shadow:0 0 1px 1px #000;border-radius:4px;font-size:16px;text-shadow:1px 1px 2px #000;margin-left:10px;" onclick="showHud()">Toggle Hud</a>';
  278.  
  279.     window._$ = selector => {
  280.  
  281.     const nodes = document.querySelectorAll(selector);
  282.  
  283.     return nodes.length == 1 ? nodes[0] : nodes;
  284. }
  285.  
  286. let VEX_HUD_COLOR = "";
  287.  
  288. let VEX_SKIN1 = "";
  289. let VEX_SKIN2 = "";
  290. let VEX_SKIN3 = "";
  291. let VEX_SKIN4 = "";
  292.  
  293. let VEX_ROTATOR_STATE = false;
  294. const VEX_ROTATOR_DELAY = 1000;
  295.  
  296.  
  297. let VEX_EXTRAS_AR = false;
  298. let VEX_EXTRAS_AR_INTERVAL = null;
  299.  
  300. let VEX_EXTRAS_SS = false;
  301. let VEX_EXTRAS_SS_INTERVAL = null;
  302.  
  303. const VEX_DOM_OVERLAY = _$(".vex");
  304.  
  305. const VEX_DOM_HC = _$("#vex-hc");
  306.  
  307. const VEX_DOM_SKIN_INPUT = _$("#skinurl");
  308. const VEX_DOM_SKIN1 = _$("#vex-s1");
  309. const VEX_DOM_SKIN2 = _$("#vex-s2");
  310. const VEX_DOM_SKIN3 = _$("#vex-s3");
  311. const VEX_DOM_SKIN4 = _$("#vex-s4");
  312.  
  313. const VEX_DOM_ROTATOR_START = _$("#vex-r-start");
  314. const VEX_DOM_ROTATOR_STOP = _$("#vex-r-stop");
  315.  
  316. const VEX_DOM_EXTRAS_AR = _$("#vex-e-ar");
  317. const VEX_DOM_EXTRAS_SS = _$("#vex-e-ss");
  318.  
  319. const VEX_HUD_COLOR_FUNC = () => {
  320.  
  321.   for(const element of _$(".fade"))
  322.     element.style.background = VEX_HUD_COLOR;
  323.  
  324.   _$("#overlay").style.background = "radial-gradient("+VEX_HUD_COLOR+" 300px,"+VEX_HUD_COLOR+")";
  325. };
  326.  
  327. let VEX_ROTATOR_INTERVAL = null;
  328. let VEX_ROTATOR_CURRENT = 1;
  329.  
  330. const VEX_ROTATOR_FUNC_NEXT = () => {
  331.  
  332.   if(VEX_ROTATOR_CURRENT < 5)
  333.     VEX_ROTATOR_CURRENT += 1;
  334.  
  335.   if(VEX_ROTATOR_CURRENT == 5)
  336.     VEX_ROTATOR_CURRENT = 1;
  337.  
  338.   VEX_DOM_SKIN_INPUT.value = localStorage.getItem("vex-s"+VEX_ROTATOR_CURRENT);
  339. };
  340.  
  341. const VEX_ROTATOR_FUNC_PREV = () => {
  342.  
  343.   if(VEX_ROTATOR_CURRENT < 5)
  344.     VEX_ROTATOR_CURRENT -= 1;
  345.  
  346.   if(VEX_ROTATOR_CURRENT == 0)
  347.     VEX_ROTATOR_CURRENT = 1;
  348.  
  349.   VEX_DOM_SKIN_INPUT.value = localStorage.getItem("vex-s"+VEX_ROTATOR_CURRENT);
  350. };
  351.  
  352.  
  353.  
  354. VEX_DOM_HC.addEventListener("change", event => {
  355.  
  356.   if(event.target.value == localStorage.getItem("vex-hc"))
  357.     return;
  358.  
  359.   localStorage.setItem("vex-hc", event.target.value);
  360.  
  361.   VEX_HUD_COLOR = localStorage.getItem("vex-hc");
  362.  
  363.   VEX_HUD_COLOR_FUNC();
  364. }, false)
  365.  
  366. VEX_DOM_SKIN1.addEventListener("change", event => {
  367.  
  368.   if(event.target.value == localStorage.getItem("vex-s1"))
  369.     return;
  370.  
  371.   localStorage.setItem("vex-s1", event.target.value);
  372.  
  373.   VEX_SKIN1 = localStorage.getItem("vex-s1");
  374. }, false)
  375.  
  376. VEX_DOM_SKIN2.addEventListener("change", event => {
  377.  
  378.   if(event.target.value == localStorage.getItem("vex-s1"))
  379.     return;
  380.  
  381.   localStorage.setItem("vex-s2", event.target.value);
  382.  
  383.   VEX_SKIN2 = localStorage.getItem("vex-s2");
  384. }, false)
  385.  
  386. VEX_DOM_SKIN3.addEventListener("change", event => {
  387.  
  388.   if(event.target.value == localStorage.getItem("vex-s1"))
  389.     return;
  390.  
  391.   localStorage.setItem("vex-s3", event.target.value);
  392.  
  393.   VEX_SKIN3 = localStorage.getItem("vex-s3");
  394. }, false)
  395.  
  396. VEX_DOM_SKIN4.addEventListener("change", event => {
  397.  
  398.   if(event.target.value == localStorage.getItem("vex-s1"))
  399.     return;
  400.  
  401.   localStorage.setItem("vex-s4", event.target.value);
  402.  
  403.   VEX_SKIN4 = localStorage.getItem("vex-s4");
  404. }, false)
  405.  
  406. VEX_DOM_ROTATOR_START.addEventListener('click', event => {
  407.  
  408.   VEX_ROTATOR_STATE = true;
  409.  
  410.   VEX_DOM_ROTATOR_STOP.className = "";
  411.   event.target.className += " active";
  412.  
  413.   VEX_ROTATOR_CURRENT = 1;
  414.   VEX_ROTATOR_INTERVAL = setInterval(VEX_ROTATOR_FUNC_NEXT, VEX_ROTATOR_DELAY);
  415. }, false);
  416.  
  417. VEX_DOM_ROTATOR_STOP.addEventListener('click', event => {
  418.  
  419.   VEX_ROTATOR_STATE = false;
  420.  
  421.   VEX_DOM_ROTATOR_START.className = "";
  422.   event.target.className += " active";
  423.  
  424.   VEX_ROTATOR_CURRENT = 1;
  425.   clearInterval(VEX_ROTATOR_INTERVAL);
  426. }, false);
  427.  
  428. VEX_DOM_EXTRAS_AR.addEventListener('change', event => {
  429.  
  430.   const state = event.target.checked;
  431.  
  432.   if(state == true){
  433.  
  434.     VEX_EXTRAS_AR_INTERVAL = setInterval(()=>{
  435.  
  436.       if(!_$(".container")[2].style.display){
  437.  
  438.         _$("button.continue").click();
  439.         _$("button#play-button").click();
  440.       }
  441.  
  442.     }, 500);
  443.  
  444.     return;
  445.   }
  446.  
  447.   clearInterval(VEX_EXTRAS_AR_INTERVAL);
  448.   VEX_EXTRAS_AR_INTERVAL = null;
  449. }, false);
  450.  
  451. VEX_DOM_EXTRAS_SS.addEventListener('change', event => {
  452.  
  453.   const state = event.target.checked;
  454.  
  455.   if(state == true){
  456.  
  457.     VEX_EXTRAS_SS_INTERVAL = setInterval(()=>{
  458.  
  459.       if(!_$(".container")[2].style.display){
  460.  
  461.         _$("button.continue").click();
  462.         _$("button#play-button").click();
  463.       }
  464.  
  465.     }, 500);
  466.  
  467.     return;
  468.   }
  469.  
  470.   clearInterval(VEX_EXTRAS_SS_INTERVAL);
  471.   VEX_EXTRAS_SS_INTERVAL = null;
  472. }, false);
  473.  
  474. const init = () => {
  475.  
  476.   VEX_DOM_HC.value = localStorage.getItem("vex-hc") || "";
  477.   VEX_HUD_COLOR = VEX_DOM_HC.value;
  478.   VEX_HUD_COLOR_FUNC();
  479.  
  480.   VEX_DOM_SKIN1.value = localStorage.getItem("vex-s1") || "";
  481.   VEX_DOM_SKIN2.value = localStorage.getItem("vex-s2") || "";
  482.   VEX_DOM_SKIN3.value = localStorage.getItem("vex-s3") || "";
  483.   VEX_DOM_SKIN4.value = localStorage.getItem("vex-s4") || "";
  484.  
  485.   VEX_DOM_ROTATOR_STOP.click();
  486.  
  487.   VEX_DOM_EXTRAS_AR.checked = localStorage.getItem("vex-e-ar") || false;
  488.   VEX_DOM_EXTRAS_SS.checked = localStorage.getItem("vex-e-ss") || false;
  489. };
  490.  
  491.  
  492.  
  493. init();
  494.  
  495. }, 5000);