// ==UserScript==

// @name [P] Server Selector [P]

// @namespace http://tampermonkey.net/
// @version 3.1.4
// @description Adds an enhanced server selector to Diep.io with region, gamemode,
server, and team options
// @author canada
// @match https://diep.io/*
// @grant GM_xmlhttpRequest
// @connect lb.diep.io
// @require https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

(function () {
'use strict';

const TOGGLE_KEY = 'p'; // Key to toggle the server selector menu

const panelStyle = {
position: 'fixed',
top: '50%',
right: '20px', // Floating away from the side
transform: 'translateY(-50%)', // Center vertically
width: '320px',
backgroundColor: 'rgba(0, 0, 0, 0.9)',
color: '#fff',
padding: '20px',
overflowY: 'auto',
zIndex: '10000',
maxHeight: '80%',
borderRadius: '8px',
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.7)',
transition: 'all 0.3s ease',
display: 'none'
};

// Create button style for uniformity

const buttonStyle = {
width: '100%',
marginBottom: '10px',
padding: '10px',
backgroundColor: '#333',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
};

const teamMap = {
'Blue': '0x0',
'Red': '0x1',
'Purple': '0x2',
'Green': '0x3'
};

// Create the server selector side panel with buttons

function createSidePanel() {
const panel = document.createElement('div');
panel.id = 'server-selector';
Object.assign(panel.style, panelStyle);
 panel.innerHTML = `
<h3 style="font-size: 18px; font-weight: 600; margin-bottom:
10px;">Server Selector</h3>
<div id="region-buttons" style="margin-bottom: 15px;">
<h4>Select Region:</h4>
</div>
<div id="gamemode-buttons" style="margin-bottom: 15px; display: none;">
<h4>Select Gamemode:</h4>
</div>
<div id="server-buttons" style="margin-bottom: 15px; display: none;">
<h4>Select Server:</h4>
</div>
<div id="team-buttons" style="margin-top: 15px; display: none;">
<h4>Select Team:</h4>
</div>
`;
document.body.appendChild(panel);

// Add a keydown event listener for the 'P' key to toggle the server
selector visibility
window.addEventListener('keydown', (event) => {
if (event.key.toLowerCase() === TOGGLE_KEY) { // Listen for 'P' key
press
togglePanel(panel);
}
});
}

// Toggle visibility of the server selector panel

function togglePanel(panel) {
if (panel.style.display === 'none') {
panel.style.display = 'block'; // Show the server selector
disableGameInteraction();
} else {
panel.style.display = 'none'; // Hide the server selector
enableGameInteraction();
}
}

// Disable game interaction by blocking canvas interactions

function disableGameInteraction() {
const gameElements = document.querySelectorAll('canvas, .game-container');
gameElements.forEach(element => {
element.style.pointerEvents = 'none';
});
}

// Re-enable game interaction after hiding the panel

function enableGameInteraction() {
const gameElements = document.querySelectorAll('canvas, .game-container');
gameElements.forEach(element => {
element.style.pointerEvents = 'auto';
});
}

// Create and apply button for repeated styles

function createButton(text, callback) {
const button = document.createElement('button');
Object.assign(button.style, buttonStyle);
 button.textContent = text;
button.addEventListener('click', callback);
return button;
}

// Populate region, gamemode, server, and team buttons dynamically

function populateButtons(data) {
const regionButtons = document.getElementById('region-buttons');
const gamemodeButtons = document.getElementById('gamemode-buttons');
const serverButtons = document.getElementById('server-buttons');
const teamButtons = document.getElementById('team-buttons');

// Create region buttons

data.regions.forEach(region => {
const regionButton = createButton(`${region.regionName} ($
{region.numPlayers} players)`, () => handleRegionSelection(region));
regionButtons.appendChild(regionButton);
});

// Handle region selection

function handleRegionSelection(region) {
gamemodeButtons.style.display = 'block';
serverButtons.style.display = 'none';
teamButtons.style.display = 'none';

// Create gamemode buttons

gamemodeButtons.innerHTML = '<h4>Select Gamemode:</h4>';
const gamemodes = new Set(region.lobbies.map(lobby => lobby.gamemode));
gamemodes.forEach(gamemode => {
const gamemodeButton = createButton(gamemode, () =>
handleGamemodeSelection(region, gamemode));
gamemodeButtons.appendChild(gamemodeButton);
});
}

// Handle gamemode selection

function handleGamemodeSelection(region, gamemode) {
serverButtons.style.display = 'block';
teamButtons.style.display = 'none';

// Create server buttons for the selected gamemode

serverButtons.innerHTML = '<h4>Select Server:</h4>';
const servers = region.lobbies.filter(lobby => lobby.gamemode ===
gamemode);
servers.forEach(server => {
const serverButton = createButton(`${server.ip} - $
{server.numPlayers} players`, () => handleServerSelection(server, gamemode));
serverButtons.appendChild(serverButton);
});
}

// Handle server selection

function handleServerSelection(server, gamemode) {
teamButtons.style.display = 'block';

// If gamemode is FFA or Maze, skip team selection and go to the server

directly
if (gamemode === 'ffa' || gamemode === 'maze') {
redirectToServer(server, gamemode); // Go directly to server
 return;
}

// Create team buttons

teamButtons.innerHTML = '<h4>Select Team:</h4>';

// Show teams based on gamemode

if (gamemode === 'deathmatch' || gamemode === '2team') {
// Only Blue and Red teams for 2-team modes
['Blue', 'Red'].forEach(team => {
const teamButton = createButton(team, () =>
handleTeamSelection(server, team, gamemode));
teamButtons.appendChild(teamButton);
});
} else {
// Show all four teams for 4-team modes
Object.keys(teamMap).forEach(team => {
const teamButton = createButton(team, () =>
handleTeamSelection(server, team, gamemode));
teamButtons.appendChild(teamButton);
});
}
}

// Handle team selection and construct URL

function handleTeamSelection(server, team, gamemode) {
const teamCode = teamMap[team];
redirectToServer(server, gamemode, teamCode);
}

// Redirect to the server URL

function redirectToServer(server, gamemode, teamCode = '') {
let url = `https://diep.io/?p=${server.ip}&g=${gamemode}`;

// Skip team code for Maze and FFA gamemodes

if (gamemode !== 'maze' && gamemode !== 'ffa' && teamCode) {
url += `&l=${teamCode}`;
}

// Redirect immediately to the selected server

window.location.href = url;
}
}

// Fetch server data from the API

function fetchServers() {
GM_xmlhttpRequest({
method: 'GET',
url: 'https://lb.diep.io/api/lb/pc',
onload: function (response) {
try {
const data = JSON.parse(response.responseText);
populateButtons(data);
} catch (error) {
console.error('Error parsing server data:', error);
alert('Failed to load servers. Please try again later.');
}
},
onerror: function () {
 alert('Error fetching server data. Please try again later.');
}
});
}

// Initialize the side panel and fetch server data

createSidePanel();
fetchServers();
})();