// ==UserScript==
// @name Rainbow UI 🌈 | Ad Block 🛑 | Better Map 🗺 | Show Ping 🏓 | MooMoo.io
// @namespace -
// @version 1.1.1
// @description Rainbow UI, ad block, better map, always show ping for moomoo.io.
// @author NotYou
// @include *://moomoo.io/*
// @include *://*.moomoo.io/*
// @run-at document-body
// @license GPL-3.0-or-later
// @grant none
// @downloadURL none
// ==/UserScript==

let style = document.createElement('style')
style.appendChild(document.createTextNode(`
:root {
  --w: rgb(255, 255, 255);
  --b: rgb(19, 19, 19);
  --f: rgb(9, 9, 9);
  --b-t: rgba(0, 0, 0, 0.6);
  --f-t: rgba(0, 0, 0, 0.8);
}

/* AD BLOCK */

#adCard, #menuContainer > :last-child, #promoImgHolder, #pre-content-container, #ot-sdk-btn-floating, #moomooio_728x90_home {
  display: none !important;
}

/* RGB UI */

#serverBrowser, .menuCard, #linksContainer2 {
  background-color: var(--b);
}

#loadingText, #diedText, #gameName, #partyButton, #youtuberOf, #pingDisplay, #ageText, #linksContainer2, #enterGame span, #nameInput, .material-icons {
  color: var(--f);
}

#ageBody, #actionBar *, #resDisplay *, #upgradeHolder *, #mapDisplay, #topInfoHolder, #killCounter, .uiElement, #ageBar, #storeHolder, .storeTab, #allianceHolder, #allianceManager *, #chatBox, .notifButton {
  background-color: var(--f-t);
}

.uiElement.gameButton:hover, #actionBar *:hover, #upgradeHolder *:hover, .storeTab:hover, .notifButton:hover {
  background-color: var(--b-t);
}

#menuCardHolder[style*="block"] {
  display: grid !important;
}

#rightCardHolder, #guideCard {
  height: 147px;
}

.menuCard {
  box-shadow: var(--f) 0 7px;
}

.menuCard * {
  color: var(--w);
}

#serverBrowser {
  border: 1px solid var(--f);
}

#gameName {
  text-shadow: var(--b) 0px 1px 0px, var(--b) 0px 2px 0px, var(--b) 0px 3px 0px, var(--b) 0px 4px 0px, var(--b) 0px 5px 0px, var(--b) 0px 6px 0px, var(--b) 0px 7px 0px, var(--b) 0px 8px 0px, var(--b) 0px 9px 0px;
}

#ageBarBody {
  background-color: red;
}

#gameUI .material-icons, .joinAlBtn {
  color: red !important;
}

#enterGame, #joinPartyButton, #ageBarBody, #gameUI .material-icons, .joinAlBtn, a {
  animation: 5s infinite linear both normal rainbow;
}

@keyframes rainbow {
  0% { filter: hue-rotate(0deg) }
  100% { filter: hue-rotate(360deg) }
}

/* MORE */

#mapDisplay {
  background-image: url(https://ksw2-center.glitch.me/users/fzb/map.png);
  background-size: contain;
}

#topInfoHolder {
  border-radius: 3px;
}

`))
document.head.appendChild(style)

window.addEventListener('DOMContentLoaded', () => {
    document.querySelector('#mainMenu').insertAdjacentElement('beforebegin', document.querySelector('#pingDisplay'))
})