☰

Advanced Servers Selector for Diep.io

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

当前为 2025-02-20 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Advanced Servers Selector for Diep.io
  3. // @version      1.0.0
  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 hotKeys = ["t", "е"]; // toggle hotKeys
  13. const refreshTiming = 60; // autoRefresing in seconds
  14.  
  15. const SVGS = {
  16.   sgp: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sg" viewBox="0 0 512 512">
  17.   <defs>
  18.     <clipPath id="sg-a">
  19.       <path fill-opacity=".7" d="M27.7 0h708.6v708.7H27.7z"></path>
  20.     </clipPath>
  21.   </defs>
  22.   <g fill-rule="evenodd" clip-path="url(#sg-a)" transform="translate(-20) scale(.72249)">
  23.     <path fill="#fff" d="M0 0h1063v708.7H0z"></path>
  24.     <path fill="#df0000" d="M0 0h1063v354.3H0z"></path>
  25.     <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>
  26.     <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>
  27.   </g>
  28. </svg>`,
  29.   fra: `<svg
  30.                 xmlns="http://www.w3.org/2000/svg"
  31.                 id="flag-icons-de"
  32.                 viewBox="0 0 512 512"
  33.               >
  34.                 <path fill="#ffce00" d="M0 341.3h512V512H0z"></path>
  35.                 <path fill="#000" d="M0 0h512v170.7H0z"></path>
  36.                 <path fill="#d00" d="M0 170.7h512v170.6H0z"></path>
  37.               </svg>`,
  38.   atl: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 512 512">
  39.   <g fill-rule="evenodd">
  40.     <g stroke-width="1pt">
  41.       <path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"></path>
  42.       <path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"></path>
  43.     </g>
  44.     <path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"></path>
  45.     <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>
  46.   </g>
  47. </svg>`,
  48.   //   itm: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-jp" viewBox="0 0 512 512">
  49.   //   <defs>
  50.   //     <clipPath id="jp-a">
  51.   //       <path fill-opacity=".7" d="M177.2 0h708.6v708.7H177.2z"></path>
  52.   //     </clipPath>
  53.   //   </defs>
  54.   //   <g fill-rule="evenodd" stroke-width="1pt" clip-path="url(#jp-a)" transform="translate(-128) scale(.72249)">
  55.   //     <path fill="#fff" d="M0 0h1063v708.7H0z"></path>
  56.   //     <circle cx="523.1" cy="344.1" r="194.9" fill="#d30000" transform="translate(-59.7 -34.5) scale(1.1302)"></circle>
  57.   //   </g>
  58.   // </svg>
  59.   // `,
  60.   syd: ` <svg
  61.                 xmlns="http://www.w3.org/2000/svg"
  62.                 id="flag-icons-au"
  63.                 viewBox="0 0 512 512"
  64.               >
  65.                 <path
  66.                   id="path598"
  67.                   fill="#006"
  68.                   stroke-width="1.3"
  69.                   d="M0 0h512v512H0z"
  70.                 ></path>
  71.                 <path
  72.                   id="path606"
  73.                   fill="#fff"
  74.                   fill-rule="evenodd"
  75.                   stroke-width="1.3"
  76.                   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"
  77.                 ></path>
  78.                 <g id="g1582" transform="scale(.5)">
  79.                   <path id="path1560" fill="#006" d="M0 0h512v512H0z"></path>
  80.                   <path
  81.                     id="path1562"
  82.                     fill="#fff"
  83.                     d="M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z"
  84.                   ></path>
  85.                   <path
  86.                     id="path1564"
  87.                     fill="#c8102e"
  88.                     d="m184 324 11 34L42 512H0v-3zm124-12 54 8 150 147v45zM512 0 320 196l-4-44L466 0zM0 1l193 189-59-8L0 49z"
  89.                   ></path>
  90.                   <path
  91.                     id="path1566"
  92.                     fill="#fff"
  93.                     d="M176 0v512h160V0zM0 176v160h512V176z"
  94.                   ></path>
  95.                   <path
  96.                     id="path1568"
  97.                     fill="#c8102e"
  98.                     d="M0 208v96h512v-96zM208 0v512h96V0z"
  99.                   ></path>
  100.                 </g>
  101.               </svg>`,
  102. };
  103. const INDICES = {
  104.   regions: {
  105.     fra: 2,
  106.     atl: 1,
  107.     // itm: 3,
  108.     sgp: 3,
  109.     syd: 4,
  110.   },
  111.   gameModes: {
  112.     ffa: 1,
  113.     teams: 2,
  114.     "4teams": 3,
  115.     maze: 4,
  116.     event: 5,
  117.     sandbox: 6,
  118.   },
  119. };
  120. let lobbiesArr = [];
  121. let inRefreshing = false;
  122. let selectedLobbyURL = null;
  123. let preferTeam = "";
  124.  
  125. let users_lsData = getUserLSData();
  126.  
  127. if (!users_lsData) {
  128.   users_lsData = {
  129.     sortMode: "region",
  130.     hideRegions: [],
  131.     hideModes: ["sandbox"],
  132.   };
  133.   localStorage.setItem("dsso_data", JSON.stringify(users_lsData));
  134. }
  135.  
  136. const list = document.createElement("div");
  137. list.id = "list";
  138. // list.style.display = "none";
  139. list.innerHTML = `<div class="list__headers ">
  140.     <h3 class="lobby__region  sortable">Region</h3>
  141.     <h3 class="lobby__name ">IP</h3>
  142.     <h3 class="lobby__onl  sortable">Players</h3>
  143.     <h3 class="lobby__gm  sortable">Game Mode</h3>
  144.   </div>
  145. <div class="list__container">
  146.   <div class="list__lobbies">
  147.     <div class="scanning">
  148.       <div>SCANNING ALL FREQUENCIES</div>
  149.       <div>
  150.         <span class="circle circle-1"></span>
  151.         <span class="circle circle-2"></span>
  152.         <span class="circle circle-3"></span>
  153.         <span class="circle circle-4"></span>
  154.         <span class="circle circle-5"></span>
  155.         <span class="circle circle-6"></span>
  156.         <span class="circle circle-7"></span>
  157.         <span class="circle circle-8"></span>
  158.         <span class="circle circle-9"></span>
  159.         <span class="circle circle-10"></span>
  160.       </div>
  161.     </div>
  162.   </div>
  163.   <div class="list__filter">
  164.   <div class="filter__container">
  165.     <h3>Filter</h3>
  166.     <ul class="filter__cbs"></ul>
  167.     <h3>Options</h3>
  168.     <ul class="filter__opts"></ul>
  169.     </div>
  170.     <ul class="filter__buttons">
  171.       <button class="green-btn btn-blocked">Connect</button>
  172.       <button class="yellow-btn">Refresh</button>
  173.     </ul>
  174.   </div>
  175. </div>`;
  176. if (!!JSON.parse(localStorage.getItem("recon"))) {
  177.   list.style.display = "block";
  178.   localStorage.setItem("recon", "false");
  179. }
  180. document.body.append(list);
  181.  
  182. setDraggable(list, [list.querySelector(".list__headers")]);
  183.  
  184. const list_header_players = document.body.querySelector(
  185.   ".list__headers .lobby__onl"
  186. );
  187. const list_header_region = document.body.querySelector(
  188.   ".list__headers .lobby__region"
  189. );
  190. const list_header_gamemode = document.body.querySelector(
  191.   ".list__headers .lobby__gm"
  192. );
  193. list_header_players.onclick = () => {
  194.   if (users_lsData.sortMode !== "p_increase") {
  195.     users_lsData.sortMode = "p_increase";
  196.   } else {
  197.     users_lsData.sortMode = "p_decrease";
  198.   }
  199.   sort();
  200. };
  201. list_header_region.onclick = () => {
  202.   if (users_lsData.sortMode !== "regions") {
  203.     users_lsData.sortMode = "regions";
  204.     sort();
  205.   }
  206. };
  207. list_header_gamemode.onclick = () => {
  208.   if (users_lsData.sortMode !== "gms") {
  209.     users_lsData.sortMode = "gms";
  210.     sort();
  211.   }
  212. };
  213.  
  214. const list_lobbies = document.body.querySelector(".list__lobbies");
  215. const scanning = document.body.querySelector(".list__lobbies .scanning");
  216.  
  217. document.addEventListener("keydown", (e) => {
  218.   if (hotKeys.includes(e.key)) {
  219.     if (list.style.display == "none") {
  220.       list.style.display = "block";
  221.     } else list.style.display = "none";
  222.   }
  223. });
  224.  
  225. checking();
  226. let chkInt = setInterval(() => {
  227.   checking();
  228. }, refreshTiming * 1000);
  229.  
  230. setInterval(() => {
  231.   if (!lobby_ip) return;
  232.   [...list_lobbies.children].forEach((e) => {
  233.     if (e.classList.contains("lobby")) {
  234.       if (e.querySelector(".lobby__name").innerText === lobby_ip) {
  235.         e.classList.add("active");
  236.       } else e.classList.remove("active");
  237.     }
  238.   });
  239. }, 100);
  240.  
  241. const refresh_btn = document.body.querySelector("button.yellow-btn");
  242. refresh_btn.onclick = () => {
  243.   if (inRefreshing) return;
  244.  
  245.   clearInterval(chkInt);
  246.   checking();
  247.   chkInt = setInterval(() => {
  248.     checking();
  249.   }, refreshTiming * 1000);
  250. };
  251. const connect_btn = document.body.querySelector("button.green-btn");
  252. connect_btn.isBlocked = true;
  253. connect_btn.onclick = () => {
  254.   if (connect_btn.isBlocked) return;
  255.   localStorage.setItem("recon", "true");
  256.   if (["teams", "4teams", "event"].includes(lobby_gamemode)) {
  257.     selectedLobbyURL = selectedLobbyURL + preferTeam;
  258.   }
  259.   window.location.href = selectedLobbyURL;
  260. };
  261. function createLobby(r_name, lobby_data) {
  262.   const lobby = document.createElement("div");
  263.   lobby.classList = "lobby";
  264.  
  265.   const lobby_region = document.createElement("h4");
  266.   lobby_region.classList = "lobby__region";
  267.   lobby_region.innerHTML = SVGS[`${r_name}`];
  268.   lobby.region = r_name;
  269.  
  270.   const lobby_name = document.createElement("h4");
  271.   lobby_name.classList = "lobby__name";
  272.   lobby_name.innerText = `${lobby_data.ip}`;
  273.   lobby.ip = lobby_data.ip;
  274.  
  275.   const lobby_onl = document.createElement("h4");
  276.   lobby_onl.classList = "lobby__onl";
  277.   lobby_onl.innerText = `${lobby_data.numPlayers}`;
  278.   lobby.plrsCount = lobby_data.numPlayers;
  279.  
  280.   const lobby_gm = document.createElement("h4");
  281.   lobby_gm.classList = "lobby__gm";
  282.   lobby_gm.innerText = `${lobby_data.gamemode}`;
  283.   lobby.mode = lobby_data.gamemode;
  284.  
  285.   lobby.onclick = () => {
  286.     let prevChosen = list_lobbies.querySelector(".selected");
  287.     if (prevChosen) prevChosen.classList.remove("selected");
  288.  
  289.     lobby.classList.add("selected");
  290.     connect_btn.isBlocked = false;
  291.     connect_btn.classList.remove("btn-blocked");
  292.     selectedLobbyURL = `https://diep.io?s=${lobby_data.ip}&g=${lobby_data.gamemode}&l=`;
  293.  
  294.     console.log("Selected lobby: " + selectedLobbyURL);
  295.     console.log("Prefer team code: " + preferTeam);
  296.   };
  297.  
  298.   lobby.append(lobby_region, lobby_name, lobby_onl, lobby_gm);
  299.   return lobby;
  300. }
  301. createCB(
  302.   "showAtl",
  303.   "Show Atlanta:",
  304.   !users_lsData.hideRegions.includes("atl"),
  305.   "filter",
  306.   "input"
  307. );
  308. createCB(
  309.   "showFra",
  310.   "Show Frankfurt:",
  311.   !users_lsData.hideRegions.includes("fra"),
  312.   "filter",
  313.   "input"
  314. );
  315. createCB(
  316.   "showSgp",
  317.   "Show Singapore:",
  318.   !users_lsData.hideRegions.includes("sgp"),
  319.   "filter",
  320.   "input"
  321. );
  322. // createCB(
  323. //   "showItm",
  324. //   "Show Osaka:",
  325. //   !users_lsData.hideRegions.includes("itm"), "filter", "input"
  326. // );
  327. createCB(
  328.   "showSyd",
  329.   "Show Sydney:",
  330.   !users_lsData.hideRegions.includes("syd"),
  331.   "filter",
  332.   "input",
  333.   true
  334. );
  335. createCB(
  336.   "showFfa",
  337.   "Show FFA:",
  338.   !users_lsData.hideModes.includes("ffa"),
  339.   "filter",
  340.   "input"
  341. );
  342. createCB(
  343.   "showTdm",
  344.   "Show Teams:",
  345.   !users_lsData.hideModes.includes("teams"),
  346.   "filter",
  347.   "input"
  348. );
  349. createCB(
  350.   "show4tdm",
  351.   "Show Teams (4):",
  352.   !users_lsData.hideModes.includes("4teams"),
  353.   "filter",
  354.   "input"
  355. );
  356. createCB(
  357.   "showMaze",
  358.   "Show Maze:",
  359.   !users_lsData.hideModes.includes("maze"),
  360.   "filter",
  361.   "input"
  362. );
  363. createCB(
  364.   "showEv",
  365.   "Show Event modes:",
  366.   !users_lsData.hideModes.includes("event"),
  367.   "filter",
  368.   "input"
  369. );
  370. createCB(
  371.   "showSnd",
  372.   "Show Sandbox:",
  373.   !users_lsData.hideModes.includes("sandbox"),
  374.   "filter",
  375.   "input"
  376. );
  377. createCB(
  378.   "selectTeam",
  379.   "Prefer team:",
  380.   !users_lsData.hideModes.includes("sandbox"),
  381.   "options",
  382.   "select"
  383. );
  384. function createCB(id, text, isChecked, parent, type, isLast = false) {
  385.   let ln = document.createElement("line");
  386.   if (isLast) ln.style.marginBottom = "30px";
  387.   let el = document.createElement(type);
  388.   el.id = id;
  389.  
  390.   let lb = document.createElement("label");
  391.   lb.htmlFor = id;
  392.   lb.innerText = text;
  393.  
  394.   if (type === "input") {
  395.     el.type = "checkbox";
  396.     el.checked = isChecked;
  397.  
  398.     lb.className = "custom-cb";
  399.  
  400.     switch (id) {
  401.       case "showFra":
  402.         el.onclick = () => {
  403.           if (!el.checked) {
  404.             users_lsData.hideRegions.push("fra");
  405.           } else
  406.             users_lsData.hideRegions = users_lsData.hideRegions.filter(
  407.               (e) => e !== "fra"
  408.             );
  409.           sort();
  410.         };
  411.         break;
  412.       case "showAtl":
  413.         el.onclick = () => {
  414.           if (!el.checked) {
  415.             users_lsData.hideRegions.push("atl");
  416.           } else
  417.             users_lsData.hideRegions = users_lsData.hideRegions.filter(
  418.               (e) => e !== "atl"
  419.             );
  420.           sort();
  421.         };
  422.         break;
  423.       case "showSgp":
  424.         el.onclick = () => {
  425.           if (!el.checked) {
  426.             users_lsData.hideRegions.push("sgp");
  427.           } else
  428.             users_lsData.hideRegions = users_lsData.hideRegions.filter(
  429.               (e) => e !== "sgp"
  430.             );
  431.           sort();
  432.         };
  433.         break;
  434.       // case "showItm":
  435.       //   el.onclick = () => {
  436.       //     if (!el.checked) {
  437.       //       users_lsData.hideRegions.push("itm");
  438.       //     } else
  439.       //       users_lsData.hideRegions = users_lsData.hideRegions.filter(
  440.       //         (e) => e !== "itm"
  441.       //       );
  442.       //     sort();
  443.       //   };
  444.       //   break;
  445.       case "showSyd":
  446.         el.onclick = () => {
  447.           if (!el.checked) {
  448.             users_lsData.hideRegions.push("syd");
  449.           } else
  450.             users_lsData.hideRegions = users_lsData.hideRegions.filter(
  451.               (e) => e !== "syd"
  452.             );
  453.           sort();
  454.         };
  455.  
  456.         break;
  457.       case "showFfa":
  458.         el.onclick = () => {
  459.           if (!el.checked) {
  460.             users_lsData.hideModes.push("ffa");
  461.           } else
  462.             users_lsData.hideModes = users_lsData.hideModes.filter(
  463.               (e) => e !== "ffa"
  464.             );
  465.           sort();
  466.         };
  467.  
  468.         break;
  469.       case "showTdm":
  470.         el.onclick = () => {
  471.           if (!el.checked) {
  472.             users_lsData.hideModes.push("teams");
  473.           } else
  474.             users_lsData.hideModes = users_lsData.hideModes.filter(
  475.               (e) => e !== "teams"
  476.             );
  477.           sort();
  478.         };
  479.  
  480.         break;
  481.       case "show4tdm":
  482.         el.onclick = () => {
  483.           if (!el.checked) {
  484.             users_lsData.hideModes.push("4teams");
  485.           } else
  486.             users_lsData.hideModes = users_lsData.hideModes.filter(
  487.               (e) => e !== "4teams"
  488.             );
  489.           sort();
  490.         };
  491.  
  492.         break;
  493.       case "showMaze":
  494.         el.onclick = () => {
  495.           if (!el.checked) {
  496.             users_lsData.hideModes.push("maze");
  497.           } else
  498.             users_lsData.hideModes = users_lsData.hideModes.filter(
  499.               (e) => e !== "maze"
  500.             );
  501.           sort();
  502.         };
  503.  
  504.         break;
  505.       case "showEv":
  506.         el.onclick = () => {
  507.           if (!el.checked) {
  508.             users_lsData.hideModes.push("event");
  509.           } else
  510.             users_lsData.hideModes = users_lsData.hideModes.filter(
  511.               (e) => e !== "event"
  512.             );
  513.           sort();
  514.         };
  515.  
  516.         break;
  517.       case "showSnd":
  518.         el.onclick = () => {
  519.           if (!el.checked) {
  520.             users_lsData.hideModes.push("sandbox");
  521.           } else
  522.             users_lsData.hideModes = users_lsData.hideModes.filter(
  523.               (e) => e !== "sandbox"
  524.             );
  525.           sort();
  526.         };
  527.  
  528.         break;
  529.     }
  530.   } else if (type === "select") {
  531.     switch (id) {
  532.       case "selectTeam":
  533.         el.innerHTML = `
  534.         <option value="" selected>Random</option>
  535.         <option value="0x0">Blue</option>
  536.         <option value="0x1">Red</option>
  537.         <option value="0x2">Purple</option>
  538.         <option value="0x3">Green</option>`;
  539.  
  540.         el.className = "custom-sl";
  541.         el.onchange = () => {
  542.           preferTeam = el.value;
  543.         };
  544.         el.onchange();
  545.         break;
  546.     }
  547.   }
  548.   ln.append(el, lb);
  549.   if (parent === "filter")
  550.     document.body.querySelector(".list__filter ul.filter__cbs").append(ln);
  551.   if (parent === "options")
  552.     document.body.querySelector(".list__filter ul.filter__opts").append(ln);
  553. }
  554.  
  555. async function getData() {
  556.   try {
  557.     const response = await fetch("https://lb.diep.io/api/lb/pc");
  558.  
  559.     return await response.json();
  560.   } catch (e) {
  561.     console.error(e);
  562.   }
  563. }
  564. async function checking() {
  565.   [...list_lobbies.children].forEach((e) => {
  566.     if (e.classList.contains("lobby")) e.remove();
  567.   });
  568.   scanning.style.display = "block";
  569.   lobbiesArr = [];
  570.   inRefreshing = true;
  571.  
  572.   const data = await getData();
  573.   scanning.style.display = "none";
  574.   inRefreshing = false;
  575.  
  576.   for (const region of data.regions) {
  577.     for (const lobby of region.lobbies) {
  578.       lobbiesArr.push(createLobby(region.region, lobby));
  579.     }
  580.   }
  581.  
  582.   sort();
  583. }
  584. function sort() {
  585.   [...list_lobbies.children].forEach((e) => {
  586.     if (e.classList.contains("lobby")) e.remove();
  587.   });
  588.   [...list.querySelectorAll(".list__headers h3")].forEach((e) => {
  589.     if (e.classList.contains("sort-1")) e.classList.remove("sort-1");
  590.     if (e.classList.contains("sort-2")) e.classList.remove("sort-2");
  591.     if (e.classList.contains("sort-3")) e.classList.remove("sort-3");
  592.   });
  593.  
  594.   if (users_lsData.sortMode === "p_increase") {
  595.     list_header_players.classList.add("sort-2");
  596.     lobbiesArr
  597.       .sort((a, b) => {
  598.         return a.plrsCount - b.plrsCount;
  599.       })
  600.       .reverse();
  601.   } else if (users_lsData.sortMode === "p_decrease") {
  602.     list_header_players.classList.add("sort-3");
  603.     lobbiesArr.sort((a, b) => {
  604.       return a.plrsCount - b.plrsCount;
  605.     });
  606.   } else if (users_lsData.sortMode === "regions") {
  607.     list_header_region.classList.add("sort-1");
  608.     lobbiesArr.sort((a, b) => {
  609.       return INDICES.regions[`${a.region}`] - INDICES.regions[`${b.region}`];
  610.     });
  611.   } else if (users_lsData.sortMode === "gms") {
  612.     list_header_gamemode.classList.add("sort-1");
  613.     lobbiesArr.sort((a, b) => {
  614.       return INDICES.gameModes[`${a.mode}`] - INDICES.gameModes[`${b.mode}`];
  615.     });
  616.   }
  617.   lobbiesArr.forEach((e) => {
  618.     if (users_lsData.hideModes.includes(e.mode)) return;
  619.     if (users_lsData.hideRegions.includes(e.region)) return;
  620.     list_lobbies.append(e);
  621.   });
  622.   updateUserLSData();
  623. }
  624.  
  625. function setDraggable(el, el_child) {
  626.   var newPosX = 0,
  627.     newPosY = 0,
  628.     MousePosX = 0,
  629.     MousePosY = 0;
  630.   if (el_child) {
  631.     el_child.forEach((e) => e.addEventListener("mousedown", MouseDown));
  632.   } else el.addEventListener("mousedown", MouseDown);
  633.  
  634.   function MouseDown(mouseDown) {
  635.     MousePosX = mouseDown.pageX;
  636.     MousePosY = mouseDown.pageY;
  637.  
  638.     if (el_child) {
  639.       el_child.forEach((e) => e.classList.add("dragableging"));
  640.     } else el.classList.add("dragableging");
  641.  
  642.     document.addEventListener("mousemove", elementMove);
  643.     document.addEventListener("mouseup", stopElementMove);
  644.   }
  645.  
  646.   function elementMove(mouseMove) {
  647.     newPosX = MousePosX - mouseMove.pageX;
  648.     newPosY = MousePosY - mouseMove.pageY;
  649.     MousePosX = mouseMove.pageX;
  650.     MousePosY = mouseMove.pageY;
  651.  
  652.     el.style.top = el.offsetTop - newPosY + "px";
  653.     el.style.left = el.offsetLeft - newPosX + "px";
  654.   }
  655.  
  656.   function stopElementMove() {
  657.     if (el_child) {
  658.       el_child.forEach((e) => e.classList.remove("dragableging"));
  659.     } else el.classList.remove("dragableging");
  660.  
  661.     document.removeEventListener("mousemove", elementMove);
  662.     document.removeEventListener("mouseup", stopElementMove);
  663.   }
  664. }
  665. function getUserLSData() {
  666.   return JSON.parse(localStorage.getItem("dsso_data"));
  667. }
  668. function updateUserLSData() {
  669.   localStorage.setItem("dsso_data", JSON.stringify(users_lsData));
  670. }
  671.  
  672. GM_addStyle(`* {
  673.   outline: none;
  674.   border: none;
  675.   margin: 0;
  676.   padding: 0;
  677. }
  678.  
  679. #list {
  680.   position: absolute;
  681.   z-index: 999;
  682.   top: 50px;
  683.   left: 50%;
  684.   transform: translateX(-50%);
  685.   color: white;
  686.   font-family: "Ubuntu", sans-serif;
  687.   font-size: 14px;
  688.   background-color: #050c0a;
  689.   padding: 0 5px;
  690.   user-select: none;
  691.   box-shadow: #050c0a8a 0px 0px 2px 6px;
  692. }
  693. .list__headers {
  694.   background-color: #050c0a;
  695.   color: #5b9e7d;
  696.   display: flex;
  697.   justify-content: space-between;
  698.   align-items: center;
  699.   text-align: center;
  700.   cursor: grab;
  701.   gap: 25px;
  702.   padding: 8px;
  703.   width: 625px;
  704.   padding-right: 280px;
  705. }
  706. .list__headers h3 {
  707.   position: relative;
  708.   padding: 10px 8px;
  709. }
  710. .sortable {
  711.   cursor: pointer;
  712. }
  713. .dragableging {
  714.   cursor: grabbing;
  715. }
  716. .sort-1::after,
  717. .sort-2::after,
  718. .sort-3::after {
  719.   content: "▼";
  720.   color: #5b9e7d;
  721.   position: absolute;
  722.   font-weight: bold;
  723.   font-size: 24px;
  724.   top: 0;
  725.   right: -10px;
  726.   text-shadow: #5b9e7d 0px 0px 5px;
  727. }
  728. .sort-1::after {
  729.   transform: translateY(20%) rotate(90deg);
  730. }
  731. .sort-2::after {
  732.   right: -12px;
  733.   transform: translateY(20%);
  734. }
  735. .sort-3::after {
  736.   right: -12px;
  737.   transform: translateY(20%) rotate(180deg);
  738. }
  739.  
  740. .list__container {
  741.   display: flex;
  742.   justify-content: space-between;
  743.   align-items: flex-start;
  744.   text-align: center;
  745.   padding: 3px 3px 8px 3px;
  746. }
  747. .list__lobbies {
  748.   position: relative;
  749.   background-color: #081c1c;
  750.   padding-right: 4px;
  751.   overflow-y: scroll;
  752.  
  753.   display: flex;
  754.   flex-direction: column;
  755.   align-items: center;
  756.   width: 645px;
  757.   height: 395px;
  758. }
  759.  
  760. /*
  761. * lobbies
  762.  */
  763.  
  764. .list__lobbies .scanning {
  765.   display: none;
  766.   top: 50%;
  767.   left: 50%;
  768.   transform: translateX(-50%) translateY(-75%);
  769.   position: absolute;
  770.   background-color: #153832;
  771.   color: #8addd3;
  772.   font-size: 26px;
  773.   padding: 5px 10px;
  774.   width: 420px;
  775. }
  776.  
  777. .circle {
  778.   display: inline-block;
  779.   width: 10px;
  780.   height: 10px;
  781.   opacity: 0;
  782.   border-radius: 3px;
  783.   background-color: #8addd3;
  784.   animation: loading 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
  785.   position: relative;
  786. }
  787. @keyframes loading {
  788.   0% {
  789.     opacity: 0;
  790.     transform: scale(0);
  791.   }
  792.   40% {
  793.     opacity: 0;
  794.     transform: scale(0);
  795.   }
  796.   60% {
  797.     opacity: 1;
  798.     transform: scale(1);
  799.   }
  800.   80% {
  801.     opacity: 1;
  802.     transform: scale(1);
  803.   }
  804.   100% {
  805.     opacity: 0;
  806.     transform: scale(0);
  807.   }
  808. }
  809. @keyframes selected {
  810.   0% {
  811.     filter: brightness(0.75);
  812.   }
  813.  
  814.   50% {
  815.     filter: brightness(1);
  816.   }
  817.   100% {
  818.     filter: brightness(0.75);
  819.   }
  820. }
  821. .circle-1 {
  822.   animation-delay: 0s;
  823. }
  824. .circle-2 {
  825.   animation-delay: 0.05s;
  826. }
  827. .circle-3 {
  828.   animation-delay: 0.1s;
  829. }
  830. .circle-4 {
  831.   animation-delay: 0.15s;
  832. }
  833. .circle-5 {
  834.   animation-delay: 0.2s;
  835. }
  836. .circle-6 {
  837.   animation-delay: 0.25s;
  838. }
  839. .circle-7 {
  840.   animation-delay: 0.3s;
  841. }
  842. .circle-8 {
  843.   animation-delay: 0.35s;
  844. }
  845. .circle-9 {
  846.   animation-delay: 0.4s;
  847. }
  848. .circle-10 {
  849.   animation-delay: 0.5s;
  850. }
  851.  
  852. #list ::-webkit-scrollbar {
  853.   background-color: #0a2120;
  854.   width: 8px;
  855.   padding: 1px;
  856. }
  857.  
  858. #list ::-webkit-scrollbar-thumb {
  859.   background-color: #f3fdfd;
  860.   border-radius: 1px;
  861. }
  862.  
  863. .lobby {
  864.   cursor: pointer;
  865.   background-color: #153832;
  866.   color: #8addd3;
  867.   padding: 5px 15px;
  868.   border-radius: 5px;
  869.   border: #375552 2px solid;
  870.   margin-bottom: -1px;
  871.   display: flex;
  872.   justify-content: space-between;
  873.   align-items: center;
  874.   gap: 25px;
  875.  
  876.   min-width: 500px;
  877. }
  878. .lobby.active {
  879.   animation: selected 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
  880. }
  881. .lobby.selected {
  882.   background-color: #315a56;
  883. }
  884. .lobby:hover {
  885.   background-color: #2c6b54;
  886.   transition: 0.05s;
  887. }
  888. .lobby svg {
  889.   align-items: center;
  890.   border-radius: 50%;
  891.   height: 25px;
  892.   width: auto;
  893. }
  894.  
  895. .lobby__region {
  896.   width: 80px;
  897. }
  898.  
  899. .lobby__name {
  900.   width: 250px;
  901. }
  902. .lobby .lobby__name {
  903.   user-select: text;
  904. }
  905. .lobby__onl {
  906.   width: 75px;
  907. }
  908. .lobby__gm {
  909.   width: 120px;
  910. }
  911.  
  912. /*
  913. * filter
  914.  */
  915.  
  916. .list__filter {
  917.   font-weight: bolder;
  918.   background-color: #133532;
  919.   color: #69c49f;
  920.   height: 395px;
  921.   width: 250px;
  922. }
  923. .filter__container {
  924.   overflow-y: scroll;
  925.   max-height: 290px;
  926. }
  927. .list__filter h3 {
  928.   font-size: 28px;
  929.   margin: 15px 0;
  930. }
  931.  
  932. .list__filter ul {
  933.   display: flex;
  934.   flex-direction: column;
  935.   justify-content: space-between;
  936.   text-align: left;
  937.   margin: 0 7.5px;
  938. }
  939. ul.filter__cbs {
  940.   margin-bottom: 20px;
  941.   padding-right: 10px;
  942. }
  943. ul.filter__opts {
  944.   margin-bottom: 10px;
  945.   padding-right: 10px;
  946.   max-height: 150px;
  947. }
  948.  
  949. .list__filter line {
  950.   position: relative;
  951.   width: 100%;
  952.   font-size: 14px;
  953.   margin: 7.5px 0;
  954. }
  955. .list__filter input {
  956.   position: absolute;
  957.   opacity: 0;
  958. }
  959. .custom-cb::before {
  960.   content: "";
  961.   cursor: pointer;
  962.   top: 50%;
  963.   right: 0;
  964.   transform: translateY(-50%);
  965.   position: absolute;
  966.   background-color: transparent;
  967.   border: #69c49f 2px solid;
  968.   width: 20px;
  969.   height: 20px;
  970. }
  971. .custom-cb::after {
  972.   content: "";
  973.   cursor: pointer;
  974.   opacity: 0;
  975.   top: 50%;
  976.   right: 4.3px;
  977.   transform: translateY(-50%);
  978.   position: absolute;
  979.   background-color: #69c49f;
  980.   width: 15px;
  981.   height: 15px;
  982. }
  983. .list__filter input:checked + .custom-cb::after {
  984.   opacity: 1;
  985.   transition: 0.05s;
  986. }
  987.  
  988. .custom-sl {
  989.   padding: 3px 0;
  990.   transform: translateY(-50%);
  991.   top: 50%;
  992.   width: 100px;
  993.   color: #133532;
  994.   font-weight: bold;
  995.   background-color: #69c49f;
  996.   right: 0;
  997.   border: none;
  998.   position: absolute;
  999. }
  1000. .custom-sl:hover {
  1001.   filter: brightness(1.33);
  1002.   transition: 0.1s;
  1003. }
  1004. .custom-cb:hover::after,
  1005. .custom-cb:hover::before {
  1006.   filter: brightness(1.33);
  1007.   transition: 0.1s;
  1008. }
  1009. option {
  1010.   border: none;
  1011.   font-weight: bold;
  1012.   background-color: #191919;
  1013.   color: #5c9d7b;
  1014. }
  1015.  
  1016. /*
  1017. * buttons
  1018. */
  1019. .filter__buttons {
  1020.   padding-top: 10px;
  1021. }
  1022.  
  1023. button {
  1024.   position: relative;
  1025.   font-size: 24px;
  1026.   font-weight: bold;
  1027.   color: #bbc9c9;
  1028.   margin: 5px 0px;
  1029.   padding: 3px 0;
  1030.   border-radius: 7.5px;
  1031.   cursor: pointer;
  1032. }
  1033. button.gray-btn {
  1034.   background-color: #343434;
  1035.   cursor: not-allowed;
  1036.   filter: brightness(0.5);
  1037. }
  1038. button.yellow-btn {
  1039.   background-color: #4f4917;
  1040. }
  1041. button.yellow-btn:hover {
  1042.   background-color: #c4b73b;
  1043.   box-shadow: inset #4f4917 0px 0px 12px 12px;
  1044. }
  1045. button.yellow-btn:active {
  1046.   background-color: hsl(54, 75%, 50%);
  1047.   box-shadow: inset #4f4917 0px 0px 10px 7px;
  1048. }
  1049. button.green-btn {
  1050.   background-color: #1b4333;
  1051. }
  1052. button.green-btn:not(.btn-blocked):hover {
  1053.   background-color: #2bd469;
  1054.   box-shadow: inset #1d4937 0px 0px 12px 12px;
  1055. }
  1056. button.green-btn:not(.btn-blocked):active {
  1057.   background-color: hsl(136, 97%, 50%);
  1058.   box-shadow: inset #1d4937 0px 0px 10px 7px;
  1059. }
  1060. button.btn-blocked {
  1061.   cursor: not-allowed;
  1062.   filter: brightness(0.66);
  1063. }
  1064. `);