Agar Dark Theme

Improves the aesthetic and layout of agar.io
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name          Agar Dark Theme
// @description   Improves the aesthetic and layout of agar.io
// @include       *agar.io/*
// @grant         none
// @run-at        document-start
// @version       1.14
// @author        Tom Burris
// @namespace     https://greasyfork.org/en/users/46159
// @icon          http://bit.ly/2oT4wRk
// @compatible    chrome
// ==/UserScript==

"use strict";

const qs = sel => document.querySelector(sel);
const observe = (target, options, callback) => {
	(new MutationObserver(callback)).observe(target, options);
};

let css = "";

// ** Block Advertisements
const scripts = document.getElementsByTagName("script");
const adRegex = /adinplay|amazon-adsystem|doubleclick\.net/;
for (const script of scripts) {
	if (adRegex.test(script.src)) {
		script.parentNode.removeChild(script);
		console.log("removed script", script.src);
	}
}

addEventListener("DOMContentLoaded", () => {
	const mainPanel = qs("#mainPanel");
	const playContainer = qs(".play-container");
	const playElm = qs("#mainui-play");
	const settingsBtn = qs("#settingsButton");
	let settingsElm = null;

	// ** Darken Stuff
	css += `
		#mainui-ads, #mainui-features, #mainui-modes, #mainui-offers,
			#mainui-party, #mainui-play, #mainui-promo, #mainui-user,
			#mainui-settings > .dialog, .tosBox, .agario-party-dialog
		{
			background: #000 !important;
			color: #ddd !important;
			outline: 1.5px solid #ddd;
			border-radius: 0;
		}
		.options, #region, #nick, .potion-slot-container,
			.potion-slot-container > .cover-up, .token > .party-token,
			.party-icon-back,
			#mode_ffa:not(.active):not(:hover),
			#mode_battleroyale:not(.active):not(:hover),
			#mode_teams:not(.active):not(:hover),
			#mode_experimental:not(.active):not(:hover)
		{
			background-color: #000 !important;
			color: #ddd !important;
		}
		#nick::selection, .party-token::selection {
			paddding: 2px;
			background-color: rgba(0, 255, 0, 0.5);
		}
		#mainui-grid > div {
			overflow: visible;
		}
		.label, .progress-bar-text {
			color: #fff !important;
			font-weight: 400;
		}
		@import url('https://fonts.googleapis.com/css?family=Ubuntu');
		body {
			font-family: 'Ubuntu', sans-serif !important;
		}
		#title {
			margin-top: 0 !important;
		}
		#playnick {
			margin-bottom: 40px !important;
		}
		#instructions {
			position: static !important;
			border-top: 1px solid grey;
			border-bottom: 1px solid grey;
			padding: 5px 10px;
		}
		#mainui-play {
			height: auto !important;
		}
		.play-blocker {
			display: none;
		}
		#stats span {
			color: rgba(255, 255, 255, 0.8) !important;
		}
		header {
			top: auto;
			bottom: 0;
		}
	`;
	const lb = qs("#statsTimeLeaderboardContainer");
	lb.lastElementChild.innerText = "Leaderboard";

	// ** Hide Static Ads
	css += `
		#adsTop, #adsBottom, #adsRight, #adsLeft,
			#mainui-ads, #mainui-promo, #socialButtons, .adsbygoogle,
			#agar-io_300x250, #agar-io_970x90
		{
			display: none !important;
		}
	`;

	// ** Canvas Height Correction
	// Really weird that the miniclip dev put the style on the html:
	document.body.parentElement.style = "--bottom-banner-height:0px;";

	// ** Move Settings Back To Center Column
	addEventListener("load", () => {
		settingsBtn.click();
		settingsBtn.parentElement.removeChild(settingsBtn);
		observe(mainPanel, {childList: true}, (mutationList, me) => {
			settingsElm = qs("#mainui-settings");
			if (!settingsElm) return;
			me.disconnect();

			for (const elm of [qs(".actions"), qs("#region"),
				qs("#quality"), qs(".options"), qs("#instructions"),
				qs(".versions")])
			{
				mainPanel.appendChild(elm);
			}
			settingsElm.parentElement.removeChild(settingsElm);
		});
	});
	css += `
		#mainui-settings > .dialog {
			position: static;
			left: 0;
			top: 0;
			transform: translate(0, 0);
			width: 295px;
		}
		.options {
			padding: 0 !important;
		}
		.options label {
			width: auto !important;
		}
		.actions > button {
			width: 130px !important;
		}
		.actions {
			margin-bottom: 15px;
		}
	`;

	// ** Append CSS To DOM
	const style = document.createElement("style");
	style.id = "agarExtras";
	style.innerHTML = css;
	document.head.appendChild(style);
});