☰

Advanced Servers Selector for Diep.io

Let you to see Diep.io online and select servers!

安装此脚本？
作者推荐脚本

您可能也喜欢Themes for Diep.io。

安装此脚本 
  1. // ==UserScript==
  2. // @name         Advanced Servers Selector for Diep.io
  3. // @version      1.0.4
  4. // @description  Let you to see Diep.io online and select servers!
  5. // @author       @jaja.morgan
  6. // @match        https://diep.io/*
  7. // @grant        GM_addStyle
  8. // @license      MIT
  9. // @namespace    *://diep.io/
  10. // ==/UserScript==
  11.  
  12. const toggleKeys = ["t", "е"]; // toggle hotKeys
  13. const refreshTiming = 60; // autoRefresing in seconds
  14.  
  15. let users_lsData = getUserLSData();
  16.  
  17. const SVGS = {
  18.   sgp: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sg" viewBox="0 0 512 512">
  19.   <defs>
  20.     <clipPath id="sg-a">
  21.       <path fill-opacity=".7" d="M27.7 0h708.6v708.7H27.7z"></path>
  22.     </clipPath>
  23.   </defs>
  24.   <g fill-rule="evenodd" clip-path="url(#sg-a)" transform="translate(-20) scale(.72249)">
  25.     <path fill="#fff" d="M0 0h1063v708.7H0z"></path>
  26.     <path fill="#df0000" d="M0 0h1063v354.3H0z"></path>
  27.     <path fill="#fff" d="M245.2 59.4a124.6 124.6 0 0 0 1.1 243.9 126.9 126.9 0 1 1-1.1-243.9z"></path>
  28.     <path fill="#fff" d="m202 162.4-18.9-13.8 23.5-.2 7.2-22.3 7.5 22.3h23.4l-18.8 14 7.2 22.3L214 171l-19 13.8zm26 76.9-19-13.8 23.5-.2 7.3-22.3 7.4 22.2h23.5l-19 14 7.3 22.3-19-13.6-19 13.8zm86.3-.6-19-13.8 23.4-.2 7.3-22.3 7.4 22.3H357l-18.9 14 7.3 22.3-19.1-13.7-19 13.8zm25.7-76.2-19-13.8 23.5-.2 7.2-22.3 7.5 22.2h23.4l-18.8 14 7.2 22.3-19.1-13.6-19 13.8zM271.7 112l-19-13.8 23.5-.2 7.3-22.3 7.4 22.3h23.5l-19 14 7.3 22.2-19-13.6-19 13.8z"></path>
  29.   </g>
  30. </svg>`,
  31.   fra: `<svg
  32.                 xmlns="http://www.w3.org/2000/svg"
  33.                 id="flag-icons-de"
  34.                 viewBox="0 0 512 512"
  35.               >
  36.                 <path fill="#ffce00" d="M0 341.3h512V512H0z"></path>
  37.                 <path fill="#000" d="M0 0h512v170.7H0z"></path>
  38.                 <path fill="#d00" d="M0 170.7h512v170.6H0z"></path>
  39.               </svg>`,
  40.   atl: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 512 512">
  41.   <g fill-rule="evenodd">
  42.     <g stroke-width="1pt">
  43.       <path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"></path>
  44.       <path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"></path>
  45.     </g>
  46.     <path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"></path>
  47.     <path fill="#fff" d="m8.2 3 1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0 1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7 .8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0 1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7 .8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0 1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7 .8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0 1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7 .8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"></path>
  48.   </g>
  49. </svg>`,
  50.   syd: ` <svg
  51.                 xmlns="http://www.w3.org/2000/svg"
  52.                 id="flag-icons-au"
  53.                 viewBox="0 0 512 512"
  54.               >
  55.                 <path
  56.                   id="path598"
  57.                   fill="#006"
  58.                   stroke-width="1.3"
  59.                   d="M0 0h512v512H0z"
  60.                 ></path>
  61.                 <path
  62.                   id="path606"
  63.                   fill="#fff"
  64.                   fill-rule="evenodd"
  65.                   stroke-width="1.3"
  66.                   d="M54.9 368.6 95.5 384l13.4-41.4 13.3 41.4 40.7-15.4-24.1 36.3 37.4 22.2-43.3 3.7 6 43.1-30-31.5-30 31.5 6-43-43.4-3.8L79 404.9m325 71.5-19 1.6 2.7 18.8-13-13.7-13 13.7L364 478l-18.8-1.6 16.3-9.6L351 451l17.7 6.7 5.8-18 5.7 18L398 451l-10.4 15.8m16.2-270.4L385 198l2.6 18.8-13-13.7-13 13.7L364 198l-18.8-1.6 16.3-9.6L351 171l17.7 6.7 5.8-18 5.7 18L398 171l-10.4 15.8m-88.8 123.4-18.8 1.6 2.6 18.7-13-13.7-13 13.7 2.5-18.7-18.8-1.6 16.3-9.7-10.5-15.7 17.7 6.7 5.8-18 5.7 18 17.7-6.7-10.4 15.7M497 282.2l-18.8 1.6 2.6 18.7-13-13.7-13 13.7 2.5-18.7-18.8-1.6 16.3-9.7-10.5-15.7 17.7 6.7 5.8-18 5.8 18 17.6-6.7-10.4 15.7M416.6 355l-10.3 6.4 2.9-11.8-9.3-7.8 12-.9 4.7-11.2L421 341l12.1 1-9.2 7.7 2.9 11.8"
  67.                 ></path>
  68.                 <g id="g1582" transform="scale(.5)">
  69.                   <path id="path1560" fill="#006" d="M0 0h512v512H0z"></path>
  70.                   <path
  71.                     id="path1562"
  72.                     fill="#fff"
  73.                     d="M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z"
  74.                   ></path>
  75.                   <path
  76.                     id="path1564"
  77.                     fill="#c8102e"
  78.                     d="m184 324 11 34L42 512H0v-3zm124-12 54 8 150 147v45zM512 0 320 196l-4-44L466 0zM0 1l193 189-59-8L0 49z"
  79.                   ></path>
  80.                   <path
  81.                     id="path1566"
  82.                     fill="#fff"
  83.                     d="M176 0v512h160V0zM0 176v160h512V176z"
  84.                   ></path>
  85.                   <path
  86.                     id="path1568"
  87.                     fill="#c8102e"
  88.                     d="M0 208v96h512v-96zM208 0v512h96V0z"
  89.                   ></path>
  90.                 </g>
  91.               </svg>`,
  92. };
  93. const INDICES = {
  94.   regions: {
  95.     atl: 1,
  96.     fra: 2,
  97.     sgp: 3,
  98.     syd: 4,
  99.   },
  100.   gameModes: {
  101.     ffa: 1,
  102.     teams: 2,
  103.     "4teams": 3,
  104.     maze: 4,
  105.     event: 5,
  106.     sandbox: 6,
  107.   },
  108. };
  109. const VERSION = "1.0.4";
  110. let latestVerison = false;
  111.  
  112. let lobbiesArr = [];
  113. let inRefreshing = false;
  114. let selectedLobbyURL = null;
  115. let preferTeam = "";
  116. let refInterval;
  117.  
  118. const list = document.createElement("div");
  119. list.id = "list";
  120. list.innerHTML = `<div class="list__headers ">
  121.     <h3 class="lobby__region  sortable">Region</h3>
  122.     <h3 class="lobby__name ">IP</h3>
  123.     <h3 class="lobby__onl  sortable">Players</h3>
  124.     <h3 class="lobby__gm  sortable">Game Mode</h3>
  125.     <span class="list__current-version">Current Version: ${VERSION}</span>
  126.   </div>
  127. <div class="list__container">
  128.   <div class="list__lobbies">
  129.     <div class="scanning">
  130.       <div>SCANNING ALL FREQUENCIES</div>
  131.       <div>
  132.         <span class="circle circle-1"></span>
  133.         <span class="circle circle-2"></span>
  134.         <span class="circle circle-3"></span>
  135.         <span class="circle circle-4"></span>
  136.         <span class="circle circle-5"></span>
  137.         <span class="circle circle-6"></span>
  138.         <span class="circle circle-7"></span>
  139.         <span class="circle circle-8"></span>
  140.         <span class="circle circle-9"></span>
  141.         <span class="circle circle-10"></span>
  142.       </div>
  143.     </div>
  144.   </div>
  145.   <div class="list__filter">
  146.   <div class="filter__container">
  147.     <h3>Filter</h3>
  148.     <ul class="filter__cbs"></ul>
  149.     <h3>Options</h3>
  150.     <ul class="filter__opts"></ul>
  151.     </div>
  152.     <ul class="filter__buttons">
  153.       <button class="green-btn btn-blocked">Connect</button>
  154.       <button class="yellow-btn">Refresh</button>
  155.     </ul>
  156.   </div>
  157. </div>`;
  158. document.body.append(list);
  159. const list_header_players = list.querySelector(".list__headers .lobby__onl");
  160. const list_header_region = list.querySelector(".list__headers .lobby__region");
  161. const list_header_gamemode = list.querySelector(".list__headers .lobby__gm");
  162. list_header_players.onclick = () => {
  163.   if (users_lsData.sortMode !== "p_increase") {
  164.     users_lsData.sortMode = "p_increase";
  165.   } else {
  166.     users_lsData.sortMode = "p_decrease";
  167.   }
  168.   sort();
  169. };
  170. list_header_region.onclick = () => {
  171.   if (users_lsData.sortMode !== "regions") {
  172.     users_lsData.sortMode = "regions";
  173.     sort();
  174.   }
  175. };
  176. list_header_gamemode.onclick = () => {
  177.   if (users_lsData.sortMode !== "gms") {
  178.     users_lsData.sortMode = "gms";
  179.     sort();
  180.   }
  181. };
  182. const list_lobbies = list.querySelector(".list__lobbies");
  183. const scanning = list.querySelector(".list__lobbies .scanning");
  184.  
  185. const connect_btn = list.querySelector("button.green-btn");
  186. connect_btn.isBlocked = true;
  187. connect_btn.onclick = () => {
  188.   if (connect_btn.isBlocked) return;
  189.   localStorage.setItem("recon", "true");
  190.   if (["teams", "4teams", "event"].includes(lobby_gamemode)) {
  191.     selectedLobbyURL = selectedLobbyURL + preferTeam;
  192.   }
  193.   window.location.href = selectedLobbyURL;
  194. };
  195. const refresh_btn = list.querySelector("button.yellow-btn");
  196. refresh_btn.onclick = () => {
  197.   if (inRefreshing) return;
  198.   connect_btn.isBlocked = true;
  199.   connect_btn.classList.add("btn-blocked");
  200.   selectedLobbyURL = "";
  201.  
  202.   clearInterval(refInterval);
  203.   refresh();
  204.   refInterval = setInterval(() => {
  205.     refresh();
  206.   }, refreshTiming * 1000);
  207. };
  208.  
  209. class BaseEl {
  210.   constructor(tag, parent, blockPrev = false, isLast = false) {
  211.     this.el = document.createElement(tag);
  212.     if (blockPrev)
  213.       this.el.addEventListener("mousedown", (event) => {
  214.         event.stopImmediatePropagation();
  215.       });
  216.     if (isLast) this.el.style.marginBottom = "30px";
  217.  
  218.     parent.append(this.el);
  219.   }
  220.   initFn(id, el) {
  221.     switch (id) {
  222.       case "showFra":
  223.         el.onclick = () => {
  224.           if (!el.checked) {
  225.             users_lsData.hideRegions.push("fra");
  226.           } else
  227.             users_lsData.hideRegions = users_lsData.hideRegions.filter(
  228.               (e) => e !== "fra"
  229.             );
  230.           sort();
  231.         };
  232.         break;
  233.       case "showAtl":
  234.         el.onclick = () => {
  235.           if (!el.checked) {
  236.             users_lsData.hideRegions.push("atl");
  237.           } else
  238.             users_lsData.hideRegions = users_lsData.hideRegions.filter(
  239.               (e) => e !== "atl"
  240.             );
  241.           sort();
  242.         };
  243.         break;
  244.       case "showSgp":
  245.         el.onclick = () => {
  246.           if (!el.checked) {
  247.             users_lsData.hideRegions.push("sgp");
  248.           } else
  249.             users_lsData.hideRegions = users_lsData.hideRegions.filter(
  250.               (e) => e !== "sgp"
  251.             );
  252.           sort();
  253.         };
  254.         break;
  255.       case "showSyd":
  256.         el.onclick = () => {
  257.           if (!el.checked) {
  258.             users_lsData.hideRegions.push("syd");
  259.           } else
  260.             users_lsData.hideRegions = users_lsData.hideRegions.filter(
  261.               (e) => e !== "syd"
  262.             );
  263.           sort();
  264.         };
  265.  
  266.         break;
  267.       case "showFfa":
  268.         el.onclick = () => {
  269.           if (!el.checked) {
  270.             users_lsData.hideModes.push("ffa");
  271.           } else
  272.             users_lsData.hideModes = users_lsData.hideModes.filter(
  273.               (e) => e !== "ffa"
  274.             );
  275.           sort();
  276.         };
  277.  
  278.         break;
  279.       case "showTdm":
  280.         el.onclick = () => {
  281.           if (!el.checked) {
  282.             users_lsData.hideModes.push("teams");
  283.           } else
  284.             users_lsData.hideModes = users_lsData.hideModes.filter(
  285.               (e) => e !== "teams"
  286.             );
  287.           sort();
  288.         };
  289.  
  290.         break;
  291.       case "show4tdm":
  292.         el.onclick = () => {
  293.           if (!el.checked) {
  294.             users_lsData.hideModes.push("4teams");
  295.           } else
  296.             users_lsData.hideModes = users_lsData.hideModes.filter(
  297.               (e) => e !== "4teams"
  298.             );
  299.           sort();
  300.         };
  301.  
  302.         break;
  303.       case "showMaze":
  304.         el.onclick = () => {
  305.           if (!el.checked) {
  306.             users_lsData.hideModes.push("maze");
  307.           } else
  308.             users_lsData.hideModes = users_lsData.hideModes.filter(
  309.               (e) => e !== "maze"
  310.             );
  311.           sort();
  312.         };
  313.  
  314.         break;
  315.       case "showEv":
  316.         el.onclick = () => {
  317.           if (!el.checked) {
  318.             users_lsData.hideModes.push("event");
  319.           } else
  320.             users_lsData.hideModes = users_lsData.hideModes.filter(
  321.               (e) => e !== "event"
  322.             );
  323.           sort();
  324.         };
  325.  
  326.         break;
  327.       case "showSnd":
  328.         el.onclick = () => {
  329.           if (!el.checked) {
  330.             users_lsData.hideModes.push("sandbox");
  331.           } else
  332.             users_lsData.hideModes = users_lsData.hideModes.filter(
  333.               (e) => e !== "sandbox"
  334.             );
  335.           sort();
  336.         };
  337.  
  338.         break;
  339.       case "selectTeam":
  340.         el.innerHTML = `
  341.         <option value="" selected>Random</option>
  342.         <option value="0x0">Blue</option>
  343.         <option value="0x1">Red</option>
  344.         <option value="0x2">Purple</option>
  345.         <option value="0x3">Green</option>`;
  346.  
  347.         el.onchange = () => {
  348.           preferTeam = el.value;
  349.         };
  350.         el.onchange();
  351.         break;
  352.     }
  353.   }
  354. }
  355.  
  356. class CheckBox extends BaseEl {
  357.   constructor(id, parent, text, isChecked, isLast = false) {
  358.     super("line", list.querySelector(parent), false, isLast);
  359.     const label = document.createElement("label");
  360.     label.htmlFor = id;
  361.     label.className = "custom-cb";
  362.     label.innerText = text;
  363.  
  364.     const input = document.createElement("input");
  365.     input.id = id;
  366.     input.type = "checkbox";
  367.     input.checked = isChecked;
  368.     super.initFn(id, input);
  369.  
  370.     this.el.append(input, label);
  371.   }
  372. }
  373.  
  374. class Select extends BaseEl {
  375.   constructor(id, text, isLast = false) {
  376.     super("line", list.querySelector("ul.filter__opts"), true, isLast);
  377.     const label = document.createElement("label");
  378.     label.htmlFor = id;
  379.     label.innerText = text;
  380.  
  381.     const select = document.createElement("select");
  382.     select.id = id;
  383.     select.className = "custom-sl";
  384.     super.initFn(id, select);
  385.  
  386.     this.el.append(select, label);
  387.   }
  388. }
  389.  
  390. function createLobby(r_name, lobby_data) {
  391.   const lobby = document.createElement("div");
  392.   lobby.classList = "lobby";
  393.   lobby.innerHTML = `
  394.   <h4 class="lobby__region">${SVGS[`${r_name}`]}</h4>
  395.   <h4 class="lobby__name">${lobby_data.ip}</h4>
  396.   <h4 class="lobby__onl">${lobby_data.numPlayers}</h4>
  397.   <h4 class="lobby__gm">${lobby_data.gamemode}</h4>`;
  398.   lobby.data = lobby_data;
  399.   lobby.data.region = r_name;
  400.  
  401.   lobby.onclick = () => {
  402.     let prevChosen = list_lobbies.querySelector(".selected");
  403.     if (prevChosen) prevChosen.classList.remove("selected");
  404.  
  405.     lobby.classList.add("selected");
  406.     connect_btn.isBlocked = false;
  407.     connect_btn.classList.remove("btn-blocked");
  408.     selectedLobbyURL = `https://diep.io?s=${lobby_data.ip}&g=${lobby_data.gamemode}&l=`;
  409.  
  410.     console.log("Selected lobby: " + selectedLobbyURL);
  411.   };
  412.  
  413.   return lobby;
  414. }
  415.  
  416. async function init() {
  417.   if (!users_lsData) {
  418.     users_lsData = {
  419.       sortMode: "region",
  420.       hideRegions: [],
  421.       hideModes: ["sandbox"],
  422.     };
  423.     localStorage.setItem("dsso_data", JSON.stringify(users_lsData));
  424.   }
  425.   let tyui = JSON.parse(localStorage.getItem("tyui"));
  426.   if (!tyui) {
  427.     localStorage.setItem("tyui", JSON.stringify(1));
  428.   }
  429.   if (tyui !== "NaN") {
  430.     if (tyui >= 5) {
  431.       setTimeout(() => {
  432.         if (
  433.           confirm(
  434.             `Could you please leave a review on how much you enjoyed using my script "Advanced Servers Selector for Diep.io"? If you have any ideas for improvements or encountered a bug, you can add it to the review.`
  435.           )
  436.         ) {
  437.           window.open(
  438.             "https://greasyfork.org/uk/scripts/526041-advanced-servers-selector-for-diep-io/feedback",
  439.             "_blank"
  440.           );
  441.         }
  442.         localStorage.setItem("tyui", JSON.stringify("NaN"));
  443.       }, 3000);
  444.     } else {
  445.       localStorage.setItem("tyui", JSON.stringify(tyui + 1));
  446.     }
  447.   }
  448.  
  449.   const initOBJs = {
  450.     filter_checkboxes: {
  451.       showAtl: ["Show Atlanta:", !users_lsData.hideRegions.includes("atl")],
  452.       showFra: ["Show Frankfurt:", !users_lsData.hideRegions.includes("fra")],
  453.       showSgp: ["Show Singapore:", !users_lsData.hideRegions.includes("sgp")],
  454.       showSyd: [
  455.         "Show Sydney:",
  456.         !users_lsData.hideRegions.includes("syd"),
  457.         true,
  458.       ],
  459.       showFfa: ["Show FFA:", !users_lsData.hideModes.includes("ffa")],
  460.       showTdm: ["Show Teams:", !users_lsData.hideModes.includes("teams")],
  461.       show4tdm: ["Show Teams (4):", !users_lsData.hideModes.includes("4teams")],
  462.       showMaze: ["Show Maze:", !users_lsData.hideModes.includes("maze")],
  463.       showEv: ["Show Event modes:", !users_lsData.hideModes.includes("event")],
  464.       showSnd: ["Show Sandbox:", !users_lsData.hideModes.includes("sandbox")],
  465.     },
  466.     options_checkboxes: {},
  467.     options_selectors: {
  468.       selectTeam: ["Prefer team:", false],
  469.     },
  470.   };
  471.  
  472.   for (let _p in initOBJs) {
  473.     let p = initOBJs[_p];
  474.  
  475.     for (let _id in p) {
  476.       switch (_p) {
  477.         case "filter_checkboxes":
  478.           new CheckBox(_id, "ul.filter__cbs", ...p[_id]);
  479.           break;
  480.         case "options_checkboxes":
  481.           new CheckBox(_id, "ul.filter__opts", ...p[_id]);
  482.           break;
  483.         case "options_selectors":
  484.           new Select(_id, ...p[_id]);
  485.           break;
  486.       }
  487.     }
  488.   }
  489.   refresh();
  490.   await checkVersion();
  491.  
  492.   const list_header = list.querySelector(".list__headers");
  493.  
  494.   if (latestVerison) {
  495.     let newV = document.createElement("a");
  496.     newV.classList = "list__new-version";
  497.     newV.href =
  498.       "https://greasyfork.org/uk/scripts/526041-advanced-servers-selector-for-diep-io";
  499.     newV.innerText = `New version is available — ${latestVerison}`;
  500.  
  501.     list_header.append(newV);
  502.     list.querySelector(".list__current-version").style.bottom = "5px";
  503.   } else {
  504.     list.querySelector(".list__current-version").style.top = "7.5px";
  505.   }
  506.  
  507.   refInterval = setInterval(() => {
  508.     refresh();
  509.   }, refreshTiming * 1000);
  510.  
  511.   setInterval(() => {
  512.     if (!lobby_ip) return;
  513.     [...list_lobbies.children].forEach((e) => {
  514.       if (e.classList.contains("lobby")) {
  515.         if (e.querySelector(".lobby__name").innerText === lobby_ip) {
  516.           e.classList.add("active");
  517.         } else e.classList.remove("active");
  518.       }
  519.     });
  520.   }, 100);
  521. }
  522.  
  523. async function getData() {
  524.   try {
  525.     const response = await fetch("https://lb.diep.io/api/lb/pc");
  526.  
  527.     return await response.json();
  528.   } catch (e) {
  529.     console.error(e);
  530.   }
  531. }
  532. async function refresh() {
  533.   [...list_lobbies.children].forEach((e) => {
  534.     if (e.classList.contains("lobby")) e.remove();
  535.   });
  536.   scanning.style.display = "block";
  537.   lobbiesArr = [];
  538.   inRefreshing = true;
  539.  
  540.   const data = await getData();
  541.   scanning.style.display = "none";
  542.   inRefreshing = false;
  543.  
  544.   for (const region of data.regions) {
  545.     for (const lobby of region.lobbies) {
  546.       lobbiesArr.push(createLobby(region.region, lobby));
  547.     }
  548.   }
  549.  
  550.   sort();
  551. }
  552. function sort() {
  553.   [...list_lobbies.children].forEach((e) => {
  554.     if (e.classList.contains("lobby")) e.remove();
  555.   });
  556.   [...list.querySelectorAll(".list__headers h3")].forEach((e) => {
  557.     if (e.classList.contains("sort-1")) e.classList.remove("sort-1");
  558.     if (e.classList.contains("sort-2")) e.classList.remove("sort-2");
  559.     if (e.classList.contains("sort-3")) e.classList.remove("sort-3");
  560.   });
  561.  
  562.   if (users_lsData.sortMode === "p_increase") {
  563.     list_header_players.classList.add("sort-2");
  564.     lobbiesArr
  565.       .sort((a, b) => {
  566.         return a.data.numPlayers - b.data.numPlayers;
  567.       })
  568.       .reverse();
  569.   } else if (users_lsData.sortMode === "p_decrease") {
  570.     list_header_players.classList.add("sort-3");
  571.     lobbiesArr.sort((a, b) => {
  572.       return a.data.numPlayers - b.data.numPlayers;
  573.     });
  574.   } else if (users_lsData.sortMode === "regions") {
  575.     list_header_region.classList.add("sort-1");
  576.     lobbiesArr.sort((a, b) => {
  577.       return (
  578.         INDICES.regions[`${a.data.region}`] -
  579.         INDICES.regions[`${b.data.region}`]
  580.       );
  581.     });
  582.   } else if (users_lsData.sortMode === "gms") {
  583.     list_header_gamemode.classList.add("sort-1");
  584.     lobbiesArr.sort((a, b) => {
  585.       return (
  586.         INDICES.gameModes[`${a.data.gamemode}`] -
  587.         INDICES.gameModes[`${b.data.gamemode}`]
  588.       );
  589.     });
  590.   }
  591.   lobbiesArr.forEach((e) => {
  592.     if (users_lsData.hideModes.includes(e.data.gamemode)) return;
  593.     if (users_lsData.hideRegions.includes(e.data.region)) return;
  594.     list_lobbies.append(e);
  595.   });
  596.   updateUserLSData();
  597. }
  598.  
  599. function setDraggable(el, el_child) {
  600.   var newPosX = 0,
  601.     newPosY = 0,
  602.     MousePosX = 0,
  603.     MousePosY = 0;
  604.   if (el_child) {
  605.     el_child.forEach((e) => e.addEventListener("mousedown", MouseDown));
  606.   } else el.addEventListener("mousedown", MouseDown);
  607.  
  608.   function MouseDown(mouseDown) {
  609.     MousePosX = mouseDown.pageX;
  610.     MousePosY = mouseDown.pageY;
  611.  
  612.     if (el_child) {
  613.       el_child.forEach((e) => e.classList.add("dragableging"));
  614.     } else el.classList.add("dragableging");
  615.  
  616.     document.addEventListener("mousemove", elementMove);
  617.     document.addEventListener("mouseup", stopElementMove);
  618.   }
  619.  
  620.   function elementMove(mouseMove) {
  621.     newPosX = MousePosX - mouseMove.pageX;
  622.     newPosY = MousePosY - mouseMove.pageY;
  623.     MousePosX = mouseMove.pageX;
  624.     MousePosY = mouseMove.pageY;
  625.  
  626.     el.style.top = el.offsetTop - newPosY + "px";
  627.     el.style.left = el.offsetLeft - newPosX + "px";
  628.   }
  629.  
  630.   function stopElementMove() {
  631.     if (el_child) {
  632.       el_child.forEach((e) => e.classList.remove("dragableging"));
  633.     } else el.classList.remove("dragableging");
  634.  
  635.     document.removeEventListener("mousemove", elementMove);
  636.     document.removeEventListener("mouseup", stopElementMove);
  637.   }
  638. }
  639. function getUserLSData() {
  640.   return JSON.parse(localStorage.getItem("dsso_data"));
  641. }
  642. function updateUserLSData() {
  643.   localStorage.setItem("dsso_data", JSON.stringify(users_lsData));
  644. }
  645. async function checkVersion() {
  646.   const url =
  647.     "https://raw.githubusercontent.com/jajamorgan/ve/refs/heads/main/version.json";
  648.  
  649.   try {
  650.     const response = await fetch(url);
  651.     if (!response.ok) throw new Error(`Ошибка: ${response.status}`);
  652.  
  653.     let { version } = await response.json();
  654.     let lVersion = version.split(".");
  655.     const cVersion = VERSION.split(".");
  656.  
  657.     for (let i = 0; i < 3; i++) {
  658.       if (parseFloat(lVersion[i]) > parseFloat(cVersion[i])) {
  659.         latestVerison = lVersion.join(".");
  660.         break;
  661.       }
  662.     }
  663.     console.log("Advanced Selector version:", cVersion.join("."));
  664.   } catch (error) {
  665.     console.error("Request ERR:", error);
  666.   }
  667. }
  668.  
  669. document
  670.   .getElementById("spawn-button")
  671.   .addEventListener("click", () => (list.style.display = "none"));
  672.  
  673. document
  674.   .getElementById("game-over-continue")
  675.   .addEventListener("click", () => (list.style.display = "block"));
  676.  
  677. document.addEventListener("keydown", (e) => {
  678.   if (toggleKeys.includes(e.key)) {
  679.     if (list.style.display == "none") {
  680.       list.style.display = "block";
  681.     } else list.style.display = "none";
  682.   }
  683. });
  684.  
  685. setDraggable(list, [list.querySelector(".list__headers")]);
  686. init();
  687.  
  688. GM_addStyle(`#server-selector {
  689.   display: none !important;
  690. }
  691. #logo {
  692.   position: absolute;
  693.   bottom: 80px;
  694. }
  695. #spawn-input {
  696.   position: absolute !important;
  697.   bottom: 250px;
  698. }
  699. #spawn-button {
  700.   position: absolute !important;
  701.   bottom: 200px;
  702. }
  703. #copy-party-link {
  704.   position: absolute !important;
  705.   height: 33px;
  706.   width: 200px !important;
  707.   left: 210px;
  708.   top: 100px;
  709. }
  710. #list button {
  711.   border: none;
  712. }
  713.  
  714. * {
  715.   outline: none;
  716.   border: none;
  717.   margin: 0;
  718.   padding: 0;
  719. }
  720. :root {
  721.   --font-lobby: #8addd3;
  722.   --font-headers: #5b9e7d;
  723.   --font-filter: #69c49f;
  724.   --font-buttons: #bbc9c9;
  725.  
  726.   --list-back: #050c0a;
  727.   --lobby-menu-back: #081c1c;
  728.   --lobby-back: #153832;
  729.   --filter-back: #133532;
  730.  
  731.   --green-btn-back: #1b4333;
  732.   --green-hov-back: #2bd469;
  733.   --green-act-back: #04fb46;
  734.   --yellow-btn-back: #4f4917;
  735.   --yellow-hov-back: #c4b73b;
  736.   --yellow-act-back: #dfcc20;
  737.   --gray-btn-back: #343434;
  738. }
  739.  
  740. #list {
  741.   position: absolute;
  742.   z-index: 999;
  743.   top: 10px;
  744.   left: 50%;
  745.   transform: translateX(-50%);
  746.   font-family: "Ubuntu", sans-serif;
  747.   font-size: 14px;
  748.   background-color: var(--list-back);
  749.   padding: 0 5px;
  750.   user-select: none;
  751.   box-shadow: #050c0a8a 0px 0px 2px 6px;
  752. }
  753. .list__headers {
  754.   position: relative;
  755.   background-color: #050c0a;
  756.   color: var(--font-headers);
  757.   display: flex;
  758.   justify-content: space-between;
  759.   align-items: center;
  760.   text-align: center;
  761.   cursor: grab;
  762.   gap: 25px;
  763.   padding: 8px;
  764.   width: 625px;
  765.   padding-right: 280px;
  766. }
  767. .list__headers h3 {
  768.   position: relative;
  769.   padding: 10px 8px;
  770. }
  771. .sortable {
  772.   cursor: pointer;
  773. }
  774. .dragableging {
  775.   cursor: grabbing;
  776. }
  777. .sort-1::after,
  778. .sort-2::after,
  779. .sort-3::after {
  780.   content: "▼";
  781.   color: var(--font-headers);
  782.   position: absolute;
  783.   font-weight: bold;
  784.   font-size: 24px;
  785.   top: 0;
  786.   right: -10px;
  787.   text-shadow: var(--font-headers) 0px 0px 5px;
  788. }
  789. .sort-1::after {
  790.   transform: translateY(20%) rotate(90deg);
  791. }
  792. .sort-2::after {
  793.   right: -12px;
  794.   transform: translateY(20%);
  795. }
  796. .sort-3::after {
  797.   right: -12px;
  798.   transform: translateY(20%) rotate(180deg);
  799. }
  800.  
  801. .list__container {
  802.   display: flex;
  803.   justify-content: space-between;
  804.   align-items: flex-start;
  805.   text-align: center;
  806.   padding: 3px 3px 8px 3px;
  807. }
  808. .list__lobbies {
  809.   position: relative;
  810.   background-color: #081c1c;
  811.   padding-right: 4px;
  812.   overflow-y: scroll;
  813.  
  814.   display: flex;
  815.   flex-direction: column;
  816.   align-items: center;
  817.   width: 645px;
  818.   height: 395px;
  819. }
  820.  
  821. .list__new-version {
  822.   position: absolute;
  823.   padding: 4px;
  824.   font-size: 14px;
  825.   right: -2px;
  826.   top: 5px;
  827.   font-weight: bold;
  828.   color: #dfc200;
  829.   text-decoration: none;
  830.   animation: newVersion 7s linear infinite;
  831. }
  832. .list__new-version:hover {
  833.   filter: brightness(0.8);
  834. }
  835. .list__current-version {
  836.   font-size: 14px;
  837.   right: 5px;
  838.   position: absolute;
  839.   font-weight: bold;
  840.   color: var(--font-lobby);
  841. }
  842. @keyframes newVersion {
  843.   0% {
  844.     transform: rotate(0deg);
  845.   }
  846.   25% {
  847.     transform: rotate(2deg);
  848.   }
  849.   50% {
  850.     transform: rotate(0deg);
  851.   }
  852.   75% {
  853.     transform: rotate(-2deg);
  854.   }
  855.   100% {
  856.     transform: rotate(0deg);
  857.   }
  858. }
  859.  
  860. /*
  861. * lobbies
  862.  */
  863.  
  864. .list__lobbies .scanning {
  865.   display: none;
  866.   top: 50%;
  867.   left: 50%;
  868.   transform: translateX(-50%) translateY(-75%);
  869.   position: absolute;
  870.   background-color: #153832;
  871.   color: var(--font-lobby);
  872.   font-size: 26px;
  873.   padding: 5px 10px;
  874.   width: 420px;
  875. }
  876.  
  877. .circle {
  878.   display: inline-block;
  879.   width: 10px;
  880.   height: 10px;
  881.   opacity: 0;
  882.   border-radius: 3px;
  883.   background-color: var(--font-lobby);
  884.   animation: loading 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
  885.   position: relative;
  886. }
  887. @keyframes loading {
  888.   0% {
  889.     opacity: 0;
  890.     transform: scale(0);
  891.   }
  892.   40% {
  893.     opacity: 0;
  894.     transform: scale(0);
  895.   }
  896.   60% {
  897.     opacity: 1;
  898.     transform: scale(1);
  899.   }
  900.   80% {
  901.     opacity: 1;
  902.     transform: scale(1);
  903.   }
  904.   100% {
  905.     opacity: 0;
  906.     transform: scale(0);
  907.   }
  908. }
  909. @keyframes selected {
  910.   0% {
  911.     filter: brightness(0.75);
  912.   }
  913.  
  914.   50% {
  915.     filter: brightness(1);
  916.   }
  917.   100% {
  918.     filter: brightness(0.75);
  919.   }
  920. }
  921. .circle-1 {
  922.   animation-delay: 0s;
  923. }
  924. .circle-2 {
  925.   animation-delay: 0.05s;
  926. }
  927. .circle-3 {
  928.   animation-delay: 0.1s;
  929. }
  930. .circle-4 {
  931.   animation-delay: 0.15s;
  932. }
  933. .circle-5 {
  934.   animation-delay: 0.2s;
  935. }
  936. .circle-6 {
  937.   animation-delay: 0.25s;
  938. }
  939. .circle-7 {
  940.   animation-delay: 0.3s;
  941. }
  942. .circle-8 {
  943.   animation-delay: 0.35s;
  944. }
  945. .circle-9 {
  946.   animation-delay: 0.4s;
  947. }
  948. .circle-10 {
  949.   animation-delay: 0.5s;
  950. }
  951.  
  952. #list ::-webkit-scrollbar {
  953.   background-color: var(--lobby-menu-back);
  954.   width: 8px;
  955.   padding: 1px;
  956. }
  957.  
  958. #list ::-webkit-scrollbar-thumb {
  959.   background-color: #f3fdfd;
  960.   border-radius: 1px;
  961. }
  962.  
  963. .lobby {
  964.   cursor: pointer;
  965.   background-color: var(--lobby-back);
  966.   color: var(--font-lobby);
  967.   padding: 5px 15px;
  968.   border-radius: 5px;
  969.   border: #375552 2px solid;
  970.   margin-bottom: -1px;
  971.   display: flex;
  972.   justify-content: space-between;
  973.   align-items: center;
  974.   gap: 25px;
  975.  
  976.   min-width: 500px;
  977. }
  978. .lobby.active {
  979.   animation: selected 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
  980. }
  981. .lobby.selected {
  982.   background-color: #315a56;
  983. }
  984. .lobby:hover {
  985.   background-color: #2c6b54;
  986.   transition: 0.05s;
  987. }
  988. .lobby svg {
  989.   align-items: center;
  990.   border-radius: 50%;
  991.   height: 25px;
  992.   width: auto;
  993. }
  994.  
  995. .lobby__region {
  996.   width: 80px;
  997. }
  998.  
  999. .lobby__name {
  1000.   width: 250px;
  1001. }
  1002. .lobby .lobby__name {
  1003.   user-select: text;
  1004. }
  1005. .lobby__onl {
  1006.   width: 75px;
  1007. }
  1008. .lobby__gm {
  1009.   width: 120px;
  1010. }
  1011.  
  1012. /*
  1013. * filter
  1014.  */
  1015.  
  1016. .list__filter {
  1017.   font-weight: bolder;
  1018.   background-color: var(--filter-back);
  1019.   color: var(--font-filter);
  1020.   height: 395px;
  1021.   width: 250px;
  1022. }
  1023. .filter__container {
  1024.   overflow-y: scroll;
  1025.   max-height: 290px;
  1026. }
  1027. .list__filter h3 {
  1028.   font-size: 28px;
  1029.   margin: 15px 0;
  1030. }
  1031.  
  1032. .list__filter ul {
  1033.   display: flex;
  1034.   flex-direction: column;
  1035.   justify-content: space-between;
  1036.   text-align: left;
  1037.   margin: 0 7.5px;
  1038. }
  1039. ul.filter__cbs {
  1040.   margin-bottom: 20px;
  1041.   padding-right: 10px;
  1042. }
  1043. ul.filter__opts {
  1044.   margin-bottom: 10px;
  1045.   padding-right: 10px;
  1046.   max-height: 150px;
  1047. }
  1048.  
  1049. .list__filter line {
  1050.   position: relative;
  1051.   width: 100%;
  1052.   font-size: 14px;
  1053.   margin: 7.5px 0;
  1054. }
  1055. .list__filter input {
  1056.   position: absolute;
  1057.   opacity: 0;
  1058. }
  1059. .custom-cb::before {
  1060.   content: "";
  1061.   cursor: pointer;
  1062.   top: 50%;
  1063.   right: 0;
  1064.   transform: translateY(-50%);
  1065.   position: absolute;
  1066.   background-color: transparent;
  1067.   border: var(--font-filter) 2px solid;
  1068.   width: 20px;
  1069.   height: 20px;
  1070. }
  1071. .custom-cb::after {
  1072.   content: "";
  1073.   cursor: pointer;
  1074.   opacity: 0;
  1075.   top: 50%;
  1076.   right: 4.3px;
  1077.   transform: translateY(-50%);
  1078.   position: absolute;
  1079.   background-color: var(--font-filter);
  1080.   width: 15px;
  1081.   height: 15px;
  1082. }
  1083. .list__filter input:checked + .custom-cb::after {
  1084.   opacity: 1;
  1085.   transition: 0.05s;
  1086. }
  1087.  
  1088. .custom-sl {
  1089.   padding: 3px 0;
  1090.   transform: translateY(-50%);
  1091.   top: 50%;
  1092.   width: 100px;
  1093.   color: var(--filter-back);
  1094.   font-weight: bold;
  1095.   background-color: var(--font-filter);
  1096.   right: 0;
  1097.   border: none;
  1098.   position: absolute;
  1099. }
  1100. .custom-sl:hover {
  1101.   filter: brightness(1.33);
  1102.   transition: 0.1s;
  1103. }
  1104. .custom-cb:hover::after,
  1105. .custom-cb:hover::before {
  1106.   filter: brightness(1.33);
  1107.   transition: 0.1s;
  1108. }
  1109. option {
  1110.   border: none;
  1111.   font-weight: bold;
  1112.   background-color: var(--list-back);
  1113.   color: var(--font-headers);
  1114. }
  1115.  
  1116. /*
  1117. * buttons
  1118. */
  1119. .filter__buttons {
  1120.   padding-top: 10px;
  1121. }
  1122.  
  1123. button {
  1124.   position: relative;
  1125.   font-size: 24px;
  1126.   font-weight: bold;
  1127.   color: var(--font-buttons);
  1128.   margin: 5px 0px;
  1129.   padding: 3px 0;
  1130.   border-radius: 7.5px;
  1131.   cursor: pointer;
  1132. }
  1133. button.gray-btn {
  1134.   background-color: var(--gray-btn-back);
  1135.   cursor: not-allowed;
  1136.   filter: brightness(0.5);
  1137. }
  1138. button.yellow-btn {
  1139.   background-color: var(--yellow-btn-back);
  1140. }
  1141. button.yellow-btn:hover {
  1142.   background-color: var(--yellow-hov-back);
  1143.   box-shadow: inset var(--yellow-btn-back) 0px 0px 12px 12px;
  1144. }
  1145. button.yellow-btn:active {
  1146.   background-color: var(--yellow-act-back);
  1147.   box-shadow: inset var(--yellow-btn-back) 0px 0px 10px 7px;
  1148. }
  1149. button.green-btn {
  1150.   background-color: var(--green-btn-back);
  1151. }
  1152. button.green-btn:not(.btn-blocked):hover {
  1153.   background-color: var(--green-hov-back);
  1154.   box-shadow: inset var(--green-btn-back) 0px 0px 12px 12px;
  1155. }
  1156. button.green-btn:not(.btn-blocked):active {
  1157.   background-color: var(--green-act-back);
  1158.   box-shadow: inset var(--green-btn-back) 0px 0px 10px 7px;
  1159. }
  1160. button.btn-blocked {
  1161.   cursor: not-allowed;
  1162.   filter: brightness(0.66);
  1163. }
  1164. `);