// ==UserScript==
// @name         Geoguessr Better Menu Test
// @namespace    https://greasyfork.org/en/users/997484-aimee4737
// @version      1.3
// @description  Adds a menu bar to Geoguessr's new UI
// @author       aimee
// @match        https://www.geoguessr.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=geoguessr.com
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

// edit line 34 for custom menu items

window.addEventListener("load", function() {

    const start = `<div class="slanted-wrapper_root__2eaEs slanted-wrapper_variantGrayTransparent__aufaF">
    <div class="slanted-wrapper_start__Kl7rv slanted-wrapper_right__G0JWR"></div>
    <div class="page-label_labelWrapper__o1vpe">
    <div class="label_sizeXSmall__mFnrR">`

    const end = `</div></div><div class="slanted-wrapper_end__cD1Qu slanted-wrapper_right__G0JWR"></div></div>`

    const singleplayer = start + `<a href="/singleplayer" style="color:white">Singleplayer</a>` + end
    const competitive = start + `<a href="/competitive" style="color:white">Competitive</a>` + end
    const party = start + `<a href="/play-with-friends" style="color:white">Party</a>` + end
    const quiz = start + `<a href="/quiz" style="color:white">Quiz</a>` + end
    const ongoingGames = start + `<a href="/me/current" style="color:white">Ongoing Games</a>` + end
    const activities = start + `<a href="/me/activities" style="color:white">Activities</a>` + end
    const myMaps = start + `<a href="/me/maps" style="color:white">My Maps</a>` + end
    const likedMaps = start + `<a href="/me/likes" style="color:white">Liked Maps</a>` + end

    // const html = singleplayer + competitive + party + quiz + ongoingGames + activities + myMaps + likedMaps
    const html = singleplayer + competitive + party + quiz + ongoingGames + activities + myMaps + likedMaps

    const headers = document.getElementsByTagName("header")
    const header = headers[0]
    const menu = header.childNodes[1]

    menu.style.display = "flex"

    const newItems = document.createElement("div")
    newItems.innerHTML = html
    newItems.style.display = "flex"
    menu.prepend(newItems) // keeping the original labels fixes issues with "crashes" links on pages are clicked

    const newDivs = newItems.getElementsByClassName("slanted-wrapper_root__2eaEs")
    const menuItems = menu.getElementsByClassName("slanted-wrapper_root__2eaEs")
    const menuLinks = menu.getElementsByClassName("label_sizeXSmall__mFnrR")

    // hides original label
    if (menuItems.length > newDivs.length) {
        menuItems[menuItems.length-1].style.display = "none"
    }

    // shows active page
    const url = window.location.href
    for (let i=0; i<menuItems.length; i++) {
        let links = menuLinks[i].getElementsByTagName("a")
        if (links == null) continue
        let link = links[0]
        if (link == null) continue

        if (link.href == url) {
            link.style.color = ""
            menuItems[i].className = "slanted-wrapper_root__2eaEs slanted-wrapper_variantWhite__VKHvw"
            break
        } else {
            link.style.color = "white"
            menuItems[i].className = "slanted-wrapper_root__2eaEs slanted-wrapper_variantGrayTransparent__aufaF"
        }
    }

}, false)