// ==UserScript==
// @name Embedded diep lobby selector
// @namespace http://tampermonkey.net/
// @version 1
// @description Embed diep lobby selector into diep.io page
// @author discord@celestial_raccoon_80621
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @match diep.io/*
// @license MIT
// @grant none
// ==/UserScript==
/*
This script (unless in TypeScript form) is the result of
transpiling TypeScript into JavaScript, hence why this
code looks so messy. This is because i want types with
TypeScript, but tampermonkey doesn't support TypeScript
so i have to transpile my TypeScript code with the `tsc`
compiler, then put it here, if you want the TypeScript
source, DM on discord and i'll likely respond
in a few hours or less, discord username is in the
author field below or in any gui of the script
*/
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
/*
TODO:
make the inner div contained in a space
then update the version number
edit css of buttons
add a way to choose a team in teams and 4teams
update the script (code-wise)
stop execution if display is none // done
*/
(() => {
'use strict';
// Top level variables, change TOGGLE_KEYBIND to whatever you want (to change display visibility)
const TOGGLE_KEYBIND = 'q';
const UPDATE_DELAY = 1000; // miliseconds
const storageKey = "diepioLobbyselect_";
const API = "https://lb.diep.io/api/lb/pc";
// todo: add these in accurately
let colors = {
fra: "rgba(255, 0, 0, 0.5)",
atl: "rgba(255, 255, 0, 0.5)",
sgp: "rgba(50, 50, 200, 0.5)",
syd: "rgba(0, 255, 0, 0.5)"
};
let data = [];
// local storage management
const storage = {
get(key, defaultValue = null) {
return localStorage.getItem(storageKey + key) || defaultValue;
},
set(key, value) {
return __awaiter(this, void 0, void 0, function* () {
localStorage.setItem(storageKey + key, value);
});
},
getBool(key, defaultValue) {
let value = this.get(key);
return value === null ? defaultValue : value === "true";
}
};
let showUI = storage.getBool('showUI', false);
// update the values in the UI every second
function update() {
return __awaiter(this, void 0, void 0, function* () {
let response = yield fetch(API);
let value = yield response.json();
data = value.regions;
let count = 0;
for (let region of data) {
count += region.numPlayers;
}
numPlayers.textContent = `Players Active: ${count}`;
// https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
buttons.textContent = "";
for (let region of data) {
for (let lobby of region.lobbies) {
let button = document.createElement('button');
button.textContent = `${region.region} ${lobby.gamemode} ${lobby.numPlayers}p`;
button.addEventListener('click', () => {
// TODO: add team integer
window.open(`https://diep.io/?ip=${lobby.ip}&g=${lobby.gamemode}&l=0x${0}`);
});
button.style.padding = "5px";
button.style.border = "1px solid black";
button.style.backgroundColor = colors[region.region] || "rgba(255, 255, 255, 0.5)";
buttons.appendChild(button);
}
let br = document.createElement('br');
buttons.appendChild(br);
}
});
}
update();
let IntervalID = setInterval(update, UPDATE_DELAY);
// toggle display visibility
function toggle() {
return __awaiter(this, void 0, void 0, function* () {
let display = container.style.display;
container.style.display = display === 'block' ? 'none' : 'block';
showUI = !showUI;
storage.set('showUI', showUI);
console.log("ShowUI is: ", showUI);
if (showUI) {
update();
IntervalID = setInterval(update, UPDATE_DELAY);
}
else {
clearInterval(IntervalID);
}
});
}
// handle display visibility update
document.addEventListener('keydown', (ev) => {
if (ev.key === TOGGLE_KEYBIND) {
toggle();
}
});
const container = document.createElement('div');
let style = container.style;
style.position = 'absolute';
style.left = '0%';
style.top = '0';
style.zIndex = '999999';
style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
style.padding = '5px';
style.border = '1px solid black';
style.borderRadius = '5px';
style.display = 'block';
document.body.append(container);
const title = document.createElement('p');
title.textContent = 'Diep lobby selector by EclipSyS';
title.style.position = 'relative';
title.style.zIndex = '999999';
title.style.padding = '0px';
title.style.margin = '0px';
container.appendChild(title);
const numPlayers = document.createElement('p');
numPlayers.textContent = "Players Active: ?";
numPlayers.style.position = 'relative';
numPlayers.style.zIndex = '999999';
numPlayers.style.padding = '0px';
numPlayers.style.margin = '0px';
numPlayers.style.marginBottom = "3px";
container.appendChild(numPlayers);
const buttons = document.createElement('div');
let btnStyle = buttons.style;
btnStyle.right = '0%';
btnStyle.top = '0';
btnStyle.zIndex = '999999';
btnStyle.backgroundColor = 'rgb(141, 24, 187)';
btnStyle.padding = '5px';
btnStyle.border = '1px solid black';
btnStyle.borderRadius = '5px';
btnStyle.display = 'block';
container.appendChild(buttons);
console.log("Initial showUi is", showUI);
if (!showUI) {
// by default the div is not invisible, we set this here to synchronize the values
showUI = true;
toggle();
}
})();
