Let you to see Diep.io online and select servers!
当前为
// ==UserScript==
// @name Advanced Servers Selector for Diep.io
// @version 1.0.1
// @description Let you to see Diep.io online and select servers!
// @author @jaja.morgan
// @match https://diep.io/*
// @grant GM_addStyle
// @license MIT
// @namespace *://diep.io/
// ==/UserScript==
const hotKeys = ["t", "е"]; // toggle hotKeys
const refreshTiming = 60; // autoRefresing in seconds
const SVGS = {
sgp: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sg" viewBox="0 0 512 512">
<defs>
<clipPath id="sg-a">
<path fill-opacity=".7" d="M27.7 0h708.6v708.7H27.7z"></path>
</clipPath>
</defs>
<g fill-rule="evenodd" clip-path="url(#sg-a)" transform="translate(-20) scale(.72249)">
<path fill="#fff" d="M0 0h1063v708.7H0z"></path>
<path fill="#df0000" d="M0 0h1063v354.3H0z"></path>
<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>
<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>
</g>
</svg>`,
fra: `<svg
xmlns="http://www.w3.org/2000/svg"
id="flag-icons-de"
viewBox="0 0 512 512"
>
<path fill="#ffce00" d="M0 341.3h512V512H0z"></path>
<path fill="#000" d="M0 0h512v170.7H0z"></path>
<path fill="#d00" d="M0 170.7h512v170.6H0z"></path>
</svg>`,
atl: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 512 512">
<g fill-rule="evenodd">
<g stroke-width="1pt">
<path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"></path>
<path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"></path>
</g>
<path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"></path>
<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>
</g>
</svg>`,
// itm: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-jp" viewBox="0 0 512 512">
// <defs>
// <clipPath id="jp-a">
// <path fill-opacity=".7" d="M177.2 0h708.6v708.7H177.2z"></path>
// </clipPath>
// </defs>
// <g fill-rule="evenodd" stroke-width="1pt" clip-path="url(#jp-a)" transform="translate(-128) scale(.72249)">
// <path fill="#fff" d="M0 0h1063v708.7H0z"></path>
// <circle cx="523.1" cy="344.1" r="194.9" fill="#d30000" transform="translate(-59.7 -34.5) scale(1.1302)"></circle>
// </g>
// </svg>
// `,
syd: ` <svg
xmlns="http://www.w3.org/2000/svg"
id="flag-icons-au"
viewBox="0 0 512 512"
>
<path
id="path598"
fill="#006"
stroke-width="1.3"
d="M0 0h512v512H0z"
></path>
<path
id="path606"
fill="#fff"
fill-rule="evenodd"
stroke-width="1.3"
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"
></path>
<g id="g1582" transform="scale(.5)">
<path id="path1560" fill="#006" d="M0 0h512v512H0z"></path>
<path
id="path1562"
fill="#fff"
d="M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z"
></path>
<path
id="path1564"
fill="#c8102e"
d="m184 324 11 34L42 512H0v-3zm124-12 54 8 150 147v45zM512 0 320 196l-4-44L466 0zM0 1l193 189-59-8L0 49z"
></path>
<path
id="path1566"
fill="#fff"
d="M176 0v512h160V0zM0 176v160h512V176z"
></path>
<path
id="path1568"
fill="#c8102e"
d="M0 208v96h512v-96zM208 0v512h96V0z"
></path>
</g>
</svg>`,
};
const INDICES = {
regions: {
fra: 2,
atl: 1,
// itm: 3,
sgp: 3,
syd: 4,
},
gameModes: {
ffa: 1,
teams: 2,
"4teams": 3,
maze: 4,
event: 5,
sandbox: 6,
},
};
let lobbiesArr = [];
let inRefreshing = false;
let selectedLobbyURL = null;
let preferTeam = "";
let users_lsData = getUserLSData();
if (!users_lsData) {
users_lsData = {
sortMode: "region",
hideRegions: [],
hideModes: ["sandbox"],
};
localStorage.setItem("dsso_data", JSON.stringify(users_lsData));
}
const list = document.createElement("div");
list.id = "list";
list.style.display = "none";
list.innerHTML = `<div class="list__headers ">
<h3 class="lobby__region sortable">Region</h3>
<h3 class="lobby__name ">IP</h3>
<h3 class="lobby__onl sortable">Players</h3>
<h3 class="lobby__gm sortable">Game Mode</h3>
</div>
<div class="list__container">
<div class="list__lobbies">
<div class="scanning">
<div>SCANNING ALL FREQUENCIES</div>
<div>
<span class="circle circle-1"></span>
<span class="circle circle-2"></span>
<span class="circle circle-3"></span>
<span class="circle circle-4"></span>
<span class="circle circle-5"></span>
<span class="circle circle-6"></span>
<span class="circle circle-7"></span>
<span class="circle circle-8"></span>
<span class="circle circle-9"></span>
<span class="circle circle-10"></span>
</div>
</div>
</div>
<div class="list__filter">
<div class="filter__container">
<h3>Filter</h3>
<ul class="filter__cbs"></ul>
<h3>Options</h3>
<ul class="filter__opts"></ul>
</div>
<ul class="filter__buttons">
<button class="green-btn btn-blocked">Connect</button>
<button class="yellow-btn">Refresh</button>
</ul>
</div>
</div>`;
if (!!JSON.parse(localStorage.getItem("recon"))) {
list.style.display = "block";
localStorage.setItem("recon", "false");
}
document.body.append(list);
setDraggable(list, [list.querySelector(".list__headers")]);
const list_header_players = document.body.querySelector(
".list__headers .lobby__onl"
);
const list_header_region = document.body.querySelector(
".list__headers .lobby__region"
);
const list_header_gamemode = document.body.querySelector(
".list__headers .lobby__gm"
);
list_header_players.onclick = () => {
if (users_lsData.sortMode !== "p_increase") {
users_lsData.sortMode = "p_increase";
} else {
users_lsData.sortMode = "p_decrease";
}
sort();
};
list_header_region.onclick = () => {
if (users_lsData.sortMode !== "regions") {
users_lsData.sortMode = "regions";
sort();
}
};
list_header_gamemode.onclick = () => {
if (users_lsData.sortMode !== "gms") {
users_lsData.sortMode = "gms";
sort();
}
};
const list_lobbies = document.body.querySelector(".list__lobbies");
const scanning = document.body.querySelector(".list__lobbies .scanning");
document.addEventListener("keydown", (e) => {
if (hotKeys.includes(e.key)) {
if (list.style.display == "none") {
list.style.display = "block";
} else list.style.display = "none";
}
});
checking();
let chkInt = setInterval(() => {
checking();
}, refreshTiming * 1000);
setInterval(() => {
if (!lobby_ip) return;
[...list_lobbies.children].forEach((e) => {
if (e.classList.contains("lobby")) {
if (e.querySelector(".lobby__name").innerText === lobby_ip) {
e.classList.add("active");
} else e.classList.remove("active");
}
});
}, 100);
const refresh_btn = document.body.querySelector("button.yellow-btn");
refresh_btn.onclick = () => {
if (inRefreshing) return;
clearInterval(chkInt);
checking();
chkInt = setInterval(() => {
checking();
}, refreshTiming * 1000);
};
const connect_btn = document.body.querySelector("button.green-btn");
connect_btn.isBlocked = true;
connect_btn.onclick = () => {
if (connect_btn.isBlocked) return;
localStorage.setItem("recon", "true");
if (["teams", "4teams", "event"].includes(lobby_gamemode)) {
selectedLobbyURL = selectedLobbyURL + preferTeam;
}
window.location.href = selectedLobbyURL;
};
function createLobby(r_name, lobby_data) {
const lobby = document.createElement("div");
lobby.classList = "lobby";
const lobby_region = document.createElement("h4");
lobby_region.classList = "lobby__region";
lobby_region.innerHTML = SVGS[`${r_name}`];
lobby.region = r_name;
const lobby_name = document.createElement("h4");
lobby_name.classList = "lobby__name";
lobby_name.innerText = `${lobby_data.ip}`;
lobby.ip = lobby_data.ip;
const lobby_onl = document.createElement("h4");
lobby_onl.classList = "lobby__onl";
lobby_onl.innerText = `${lobby_data.numPlayers}`;
lobby.plrsCount = lobby_data.numPlayers;
const lobby_gm = document.createElement("h4");
lobby_gm.classList = "lobby__gm";
lobby_gm.innerText = `${lobby_data.gamemode}`;
lobby.mode = lobby_data.gamemode;
lobby.onclick = () => {
let prevChosen = list_lobbies.querySelector(".selected");
if (prevChosen) prevChosen.classList.remove("selected");
lobby.classList.add("selected");
connect_btn.isBlocked = false;
connect_btn.classList.remove("btn-blocked");
selectedLobbyURL = `https://diep.io?s=${lobby_data.ip}&g=${lobby_data.gamemode}&l=`;
console.log("Selected lobby: " + selectedLobbyURL);
console.log("Prefer team code: " + preferTeam);
};
lobby.append(lobby_region, lobby_name, lobby_onl, lobby_gm);
return lobby;
}
createCB(
"showAtl",
"Show Atlanta:",
!users_lsData.hideRegions.includes("atl"),
"filter",
"input"
);
createCB(
"showFra",
"Show Frankfurt:",
!users_lsData.hideRegions.includes("fra"),
"filter",
"input"
);
createCB(
"showSgp",
"Show Singapore:",
!users_lsData.hideRegions.includes("sgp"),
"filter",
"input"
);
// createCB(
// "showItm",
// "Show Osaka:",
// !users_lsData.hideRegions.includes("itm"), "filter", "input"
// );
createCB(
"showSyd",
"Show Sydney:",
!users_lsData.hideRegions.includes("syd"),
"filter",
"input",
true
);
createCB(
"showFfa",
"Show FFA:",
!users_lsData.hideModes.includes("ffa"),
"filter",
"input"
);
createCB(
"showTdm",
"Show Teams:",
!users_lsData.hideModes.includes("teams"),
"filter",
"input"
);
createCB(
"show4tdm",
"Show Teams (4):",
!users_lsData.hideModes.includes("4teams"),
"filter",
"input"
);
createCB(
"showMaze",
"Show Maze:",
!users_lsData.hideModes.includes("maze"),
"filter",
"input"
);
createCB(
"showEv",
"Show Event modes:",
!users_lsData.hideModes.includes("event"),
"filter",
"input"
);
createCB(
"showSnd",
"Show Sandbox:",
!users_lsData.hideModes.includes("sandbox"),
"filter",
"input"
);
createCB(
"selectTeam",
"Prefer team:",
!users_lsData.hideModes.includes("sandbox"),
"options",
"select"
);
function createCB(id, text, isChecked, parent, type, isLast = false) {
let ln = document.createElement("line");
if (isLast) ln.style.marginBottom = "30px";
let el = document.createElement(type);
el.id = id;
let lb = document.createElement("label");
lb.htmlFor = id;
lb.innerText = text;
if (type === "input") {
el.type = "checkbox";
el.checked = isChecked;
lb.className = "custom-cb";
switch (id) {
case "showFra":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideRegions.push("fra");
} else
users_lsData.hideRegions = users_lsData.hideRegions.filter(
(e) => e !== "fra"
);
sort();
};
break;
case "showAtl":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideRegions.push("atl");
} else
users_lsData.hideRegions = users_lsData.hideRegions.filter(
(e) => e !== "atl"
);
sort();
};
break;
case "showSgp":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideRegions.push("sgp");
} else
users_lsData.hideRegions = users_lsData.hideRegions.filter(
(e) => e !== "sgp"
);
sort();
};
break;
// case "showItm":
// el.onclick = () => {
// if (!el.checked) {
// users_lsData.hideRegions.push("itm");
// } else
// users_lsData.hideRegions = users_lsData.hideRegions.filter(
// (e) => e !== "itm"
// );
// sort();
// };
// break;
case "showSyd":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideRegions.push("syd");
} else
users_lsData.hideRegions = users_lsData.hideRegions.filter(
(e) => e !== "syd"
);
sort();
};
break;
case "showFfa":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideModes.push("ffa");
} else
users_lsData.hideModes = users_lsData.hideModes.filter(
(e) => e !== "ffa"
);
sort();
};
break;
case "showTdm":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideModes.push("teams");
} else
users_lsData.hideModes = users_lsData.hideModes.filter(
(e) => e !== "teams"
);
sort();
};
break;
case "show4tdm":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideModes.push("4teams");
} else
users_lsData.hideModes = users_lsData.hideModes.filter(
(e) => e !== "4teams"
);
sort();
};
break;
case "showMaze":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideModes.push("maze");
} else
users_lsData.hideModes = users_lsData.hideModes.filter(
(e) => e !== "maze"
);
sort();
};
break;
case "showEv":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideModes.push("event");
} else
users_lsData.hideModes = users_lsData.hideModes.filter(
(e) => e !== "event"
);
sort();
};
break;
case "showSnd":
el.onclick = () => {
if (!el.checked) {
users_lsData.hideModes.push("sandbox");
} else
users_lsData.hideModes = users_lsData.hideModes.filter(
(e) => e !== "sandbox"
);
sort();
};
break;
}
} else if (type === "select") {
switch (id) {
case "selectTeam":
el.innerHTML = `
<option value="" selected>Random</option>
<option value="0x0">Blue</option>
<option value="0x1">Red</option>
<option value="0x2">Purple</option>
<option value="0x3">Green</option>`;
el.className = "custom-sl";
el.onchange = () => {
preferTeam = el.value;
};
el.onchange();
break;
}
}
ln.append(el, lb);
if (parent === "filter")
document.body.querySelector(".list__filter ul.filter__cbs").append(ln);
if (parent === "options")
document.body.querySelector(".list__filter ul.filter__opts").append(ln);
}
async function getData() {
try {
const response = await fetch("https://lb.diep.io/api/lb/pc");
return await response.json();
} catch (e) {
console.error(e);
}
}
async function checking() {
[...list_lobbies.children].forEach((e) => {
if (e.classList.contains("lobby")) e.remove();
});
scanning.style.display = "block";
lobbiesArr = [];
inRefreshing = true;
const data = await getData();
scanning.style.display = "none";
inRefreshing = false;
for (const region of data.regions) {
for (const lobby of region.lobbies) {
lobbiesArr.push(createLobby(region.region, lobby));
}
}
sort();
}
function sort() {
[...list_lobbies.children].forEach((e) => {
if (e.classList.contains("lobby")) e.remove();
});
[...list.querySelectorAll(".list__headers h3")].forEach((e) => {
if (e.classList.contains("sort-1")) e.classList.remove("sort-1");
if (e.classList.contains("sort-2")) e.classList.remove("sort-2");
if (e.classList.contains("sort-3")) e.classList.remove("sort-3");
});
if (users_lsData.sortMode === "p_increase") {
list_header_players.classList.add("sort-2");
lobbiesArr
.sort((a, b) => {
return a.plrsCount - b.plrsCount;
})
.reverse();
} else if (users_lsData.sortMode === "p_decrease") {
list_header_players.classList.add("sort-3");
lobbiesArr.sort((a, b) => {
return a.plrsCount - b.plrsCount;
});
} else if (users_lsData.sortMode === "regions") {
list_header_region.classList.add("sort-1");
lobbiesArr.sort((a, b) => {
return INDICES.regions[`${a.region}`] - INDICES.regions[`${b.region}`];
});
} else if (users_lsData.sortMode === "gms") {
list_header_gamemode.classList.add("sort-1");
lobbiesArr.sort((a, b) => {
return INDICES.gameModes[`${a.mode}`] - INDICES.gameModes[`${b.mode}`];
});
}
lobbiesArr.forEach((e) => {
if (users_lsData.hideModes.includes(e.mode)) return;
if (users_lsData.hideRegions.includes(e.region)) return;
list_lobbies.append(e);
});
updateUserLSData();
}
function setDraggable(el, el_child) {
var newPosX = 0,
newPosY = 0,
MousePosX = 0,
MousePosY = 0;
if (el_child) {
el_child.forEach((e) => e.addEventListener("mousedown", MouseDown));
} else el.addEventListener("mousedown", MouseDown);
function MouseDown(mouseDown) {
MousePosX = mouseDown.pageX;
MousePosY = mouseDown.pageY;
if (el_child) {
el_child.forEach((e) => e.classList.add("dragableging"));
} else el.classList.add("dragableging");
document.addEventListener("mousemove", elementMove);
document.addEventListener("mouseup", stopElementMove);
}
function elementMove(mouseMove) {
newPosX = MousePosX - mouseMove.pageX;
newPosY = MousePosY - mouseMove.pageY;
MousePosX = mouseMove.pageX;
MousePosY = mouseMove.pageY;
el.style.top = el.offsetTop - newPosY + "px";
el.style.left = el.offsetLeft - newPosX + "px";
}
function stopElementMove() {
if (el_child) {
el_child.forEach((e) => e.classList.remove("dragableging"));
} else el.classList.remove("dragableging");
document.removeEventListener("mousemove", elementMove);
document.removeEventListener("mouseup", stopElementMove);
}
}
function getUserLSData() {
return JSON.parse(localStorage.getItem("dsso_data"));
}
function updateUserLSData() {
localStorage.setItem("dsso_data", JSON.stringify(users_lsData));
}
GM_addStyle(`* {
outline: none;
border: none;
margin: 0;
padding: 0;
}
#list {
position: absolute;
z-index: 999;
top: 50px;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: "Ubuntu", sans-serif;
font-size: 14px;
background-color: #050c0a;
padding: 0 5px;
user-select: none;
box-shadow: #050c0a8a 0px 0px 2px 6px;
}
.list__headers {
background-color: #050c0a;
color: #5b9e7d;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
cursor: grab;
gap: 25px;
padding: 8px;
width: 625px;
padding-right: 280px;
}
.list__headers h3 {
position: relative;
padding: 10px 8px;
}
.sortable {
cursor: pointer;
}
.dragableging {
cursor: grabbing;
}
.sort-1::after,
.sort-2::after,
.sort-3::after {
content: "▼";
color: #5b9e7d;
position: absolute;
font-weight: bold;
font-size: 24px;
top: 0;
right: -10px;
text-shadow: #5b9e7d 0px 0px 5px;
}
.sort-1::after {
transform: translateY(20%) rotate(90deg);
}
.sort-2::after {
right: -12px;
transform: translateY(20%);
}
.sort-3::after {
right: -12px;
transform: translateY(20%) rotate(180deg);
}
.list__container {
display: flex;
justify-content: space-between;
align-items: flex-start;
text-align: center;
padding: 3px 3px 8px 3px;
}
.list__lobbies {
position: relative;
background-color: #081c1c;
padding-right: 4px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
width: 645px;
height: 395px;
}
/*
* lobbies
*/
.list__lobbies .scanning {
display: none;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-75%);
position: absolute;
background-color: #153832;
color: #8addd3;
font-size: 26px;
padding: 5px 10px;
width: 420px;
}
.circle {
display: inline-block;
width: 10px;
height: 10px;
opacity: 0;
border-radius: 3px;
background-color: #8addd3;
animation: loading 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
position: relative;
}
@keyframes loading {
0% {
opacity: 0;
transform: scale(0);
}
40% {
opacity: 0;
transform: scale(0);
}
60% {
opacity: 1;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
@keyframes selected {
0% {
filter: brightness(0.75);
}
50% {
filter: brightness(1);
}
100% {
filter: brightness(0.75);
}
}
.circle-1 {
animation-delay: 0s;
}
.circle-2 {
animation-delay: 0.05s;
}
.circle-3 {
animation-delay: 0.1s;
}
.circle-4 {
animation-delay: 0.15s;
}
.circle-5 {
animation-delay: 0.2s;
}
.circle-6 {
animation-delay: 0.25s;
}
.circle-7 {
animation-delay: 0.3s;
}
.circle-8 {
animation-delay: 0.35s;
}
.circle-9 {
animation-delay: 0.4s;
}
.circle-10 {
animation-delay: 0.5s;
}
#list ::-webkit-scrollbar {
background-color: #0a2120;
width: 8px;
padding: 1px;
}
#list ::-webkit-scrollbar-thumb {
background-color: #f3fdfd;
border-radius: 1px;
}
.lobby {
cursor: pointer;
background-color: #153832;
color: #8addd3;
padding: 5px 15px;
border-radius: 5px;
border: #375552 2px solid;
margin-bottom: -1px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
min-width: 500px;
}
.lobby.active {
animation: selected 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
}
.lobby.selected {
background-color: #315a56;
}
.lobby:hover {
background-color: #2c6b54;
transition: 0.05s;
}
.lobby svg {
align-items: center;
border-radius: 50%;
height: 25px;
width: auto;
}
.lobby__region {
width: 80px;
}
.lobby__name {
width: 250px;
}
.lobby .lobby__name {
user-select: text;
}
.lobby__onl {
width: 75px;
}
.lobby__gm {
width: 120px;
}
/*
* filter
*/
.list__filter {
font-weight: bolder;
background-color: #133532;
color: #69c49f;
height: 395px;
width: 250px;
}
.filter__container {
overflow-y: scroll;
max-height: 290px;
}
.list__filter h3 {
font-size: 28px;
margin: 15px 0;
}
.list__filter ul {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: left;
margin: 0 7.5px;
}
ul.filter__cbs {
margin-bottom: 20px;
padding-right: 10px;
}
ul.filter__opts {
margin-bottom: 10px;
padding-right: 10px;
max-height: 150px;
}
.list__filter line {
position: relative;
width: 100%;
font-size: 14px;
margin: 7.5px 0;
}
.list__filter input {
position: absolute;
opacity: 0;
}
.custom-cb::before {
content: "";
cursor: pointer;
top: 50%;
right: 0;
transform: translateY(-50%);
position: absolute;
background-color: transparent;
border: #69c49f 2px solid;
width: 20px;
height: 20px;
}
.custom-cb::after {
content: "";
cursor: pointer;
opacity: 0;
top: 50%;
right: 4.3px;
transform: translateY(-50%);
position: absolute;
background-color: #69c49f;
width: 15px;
height: 15px;
}
.list__filter input:checked + .custom-cb::after {
opacity: 1;
transition: 0.05s;
}
.custom-sl {
padding: 3px 0;
transform: translateY(-50%);
top: 50%;
width: 100px;
color: #133532;
font-weight: bold;
background-color: #69c49f;
right: 0;
border: none;
position: absolute;
}
.custom-sl:hover {
filter: brightness(1.33);
transition: 0.1s;
}
.custom-cb:hover::after,
.custom-cb:hover::before {
filter: brightness(1.33);
transition: 0.1s;
}
option {
border: none;
font-weight: bold;
background-color: #191919;
color: #5c9d7b;
}
/*
* buttons
*/
.filter__buttons {
padding-top: 10px;
}
button {
position: relative;
font-size: 24px;
font-weight: bold;
color: #bbc9c9;
margin: 5px 0px;
padding: 3px 0;
border-radius: 7.5px;
cursor: pointer;
}
button.gray-btn {
background-color: #343434;
cursor: not-allowed;
filter: brightness(0.5);
}
button.yellow-btn {
background-color: #4f4917;
}
button.yellow-btn:hover {
background-color: #c4b73b;
box-shadow: inset #4f4917 0px 0px 12px 12px;
}
button.yellow-btn:active {
background-color: hsl(54, 75%, 50%);
box-shadow: inset #4f4917 0px 0px 10px 7px;
}
button.green-btn {
background-color: #1b4333;
}
button.green-btn:not(.btn-blocked):hover {
background-color: #2bd469;
box-shadow: inset #1d4937 0px 0px 12px 12px;
}
button.green-btn:not(.btn-blocked):active {
background-color: hsl(136, 97%, 50%);
box-shadow: inset #1d4937 0px 0px 10px 7px;
}
button.btn-blocked {
cursor: not-allowed;
filter: brightness(0.66);
}
`);