// ==UserScript==
// @name         Geoguessr Better Menu
// @namespace    https://greasyfork.org/en/users/997484-aimee4737
// @version      1.0
// @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==

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

    // also shows ongoing games, activities, my maps, and liked maps in menu bar
    // change to false if you only want singplayer, multiplayer, party, and quiz
    const showProfileLinks = true

    const headers = document.getElementsByTagName("header")
    const header = headers[0]
    const divs = header.getElementsByTagName("div")
    let menu

    // header is different on home page
    if (window.location.href == "https://www.geoguessr.com/"){
        menu = divs[1]
    } else {
        menu = divs[19]
    }

    menu.style.display = "flex"
    let html

    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 multiPlayer = start + `<a href="/multiplayer" style="color:white">Multiplayer</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

    if (showProfileLinks == true) {
        const ongoing = 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
        html = singlePlayer + multiPlayer + party + quiz + ongoing + activities + myMaps + likedMaps
        menu.innerHTML = html
    } else {
        html = singlePlayer + multiPlayer + party + quiz
        menu.innerHTML = html
    }

    const url = window.location.href
    const items1 = menu.getElementsByClassName("slanted-wrapper_root__2eaEs") // idk how else to name these
    const items2 = menu.getElementsByClassName("label_sizeXSmall__mFnrR")

    // shows active page
    for (let i=0; i<items2.length; i++) {
        let links = items2[i].getElementsByTagName("a")
        let link = links[0]
        if (link.href == url) {
            link.style.color = ""
            items1[i].className = "slanted-wrapper_root__2eaEs slanted-wrapper_variantWhite__VKHvw"
            break
        }
    }

}, false);