// ==UserScript==
// @name         Country Flag Displayer
// @version      1.0.0
// @description  Add a flag of the user country after username and/or a coat of arms under the username on Geoguessr user profile pages.
// @match        https://www.geoguessr.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=geoguessr.com
// @namespace	 https://pastebin.com/5wbjjwwr
// @downloadURL none
// ==/UserScript==

//You can check the full list of flags and coat of arms looks on this website : https://simplecountrypedia.netlify.app/
//Be aware that some countries have no coat of arms available, u can check the full list here also : https://mainfacts.com/coat-of-arms-countries-world

//Replace true or false after '=' to enable or disable the set of  flags

//You can choose between 2 sets of flag wich will be displayed next to the username, make sure to replace the = value to true on only one between these 2 sets
const type_flag_normalflag_from_flagpedia = true   //flag from flagpedia api
const type_flag_normalflag_from_geoguessr = false  //flag from geoguessr api (similar to flagpedia)

//You can also choose to diplay a coat of arms of the country under the username. The width image size can be set and height is automatic to not disproportionate images. Replace value to false or true to disable or enable it. :)
const type_flag_coat_of_arms = true                //coat of arms from mainfacts.com

//If u want to change the size of the coat of arms, u can lower or higher the value below (some coat of arms have height bigger than others because their shape differ). I found 120 value was the best overall look for me.
let size_coat_of_arm = 120


//Begin Code
let chosen_normal_flag = 'null'
let chosen_coat_of_arms = 'null'

function check_normal_flag() {
    if (type_flag_normalflag_from_flagpedia === true && type_flag_normalflag_from_geoguessr === false){
        chosen_normal_flag = 'https://flagcdn.com';
    }
    else if (type_flag_normalflag_from_geoguessr === true && type_flag_normalflag_from_flagpedia === false){
        chosen_normal_flag = 'https://www.geoguessr.com/static/flags';
    }
    else {
        window.alert("Make sure to check that only one type of normal flag is set to true on Country Flag Displayer script :)");
    }
}

function check_coat_of_arms_flag() {
    if (type_flag_coat_of_arms === true){
       chosen_coat_of_arms = 'https://mainfacts.com/media/images/coats_of_arms';
    }
    else {
        chosen_coat_of_arms = 'null';
    }
}

let lastUrl = location.href;
new MutationObserver(() => {
  const url = location.href;
  if (url !== lastUrl && url.startsWith("https://www.geoguessr.com/user/") || url !== lastUrl && url.startsWith("https://www.geoguessr.com/me/")) {
    lastUrl = url;
    on_profile_page_change();
  }
}).observe(document, {subtree: true, childList: true});

function on_profile_page_change() {
    //console.log('Profile page detected!');
    location.reload();
}

window.onload = function() {
    check_normal_flag();
    check_coat_of_arms_flag();
    if (lastUrl.startsWith("https://www.geoguessr.com/user/")){
    const data = document.querySelectorAll("#__NEXT_DATA__")[0].text;
    const json = JSON.parse(data);
    const code_country = json.props.pageProps.user.countryCode;
    add_flag(code_country);
    }
    if (lastUrl.startsWith("https://www.geoguessr.com/me/")){
    const data = document.querySelectorAll("#__NEXT_DATA__")[0].text;
    const json = JSON.parse(data);
    const code_country = json.props.middlewareResults[0].account.user.countryCode;
    add_flag(code_country);
    }

    function add_flag(code_iso) {
    const img = document.createElement('img');
        if (chosen_normal_flag === 'https://www.geoguessr.com/static/flags'){
            img.setAttribute('src', chosen_normal_flag+`/${code_iso.toUpperCase()}.svg`);
        }
        else{
            img.setAttribute('src', chosen_normal_flag+`/${code_iso}.svg`);
        }
    img.id = "flag";
    img.setAttribute('style', `margin-left:0.4rem;vertical-align: middle;`);
    img.setAttribute('alt', `country code : ${code_iso}`);
    img.setAttribute('width', 30);
    const svg_flag_location = document.querySelectorAll('h2[class="headline_heading__c6HiU headline_variantYellow__N_sDa"]')[0].firstChild;
    svg_flag_location.appendChild(img);
        if (chosen_coat_of_arms === 'https://mainfacts.com/media/images/coats_of_arms'){
            let newDiv = document.createElement("div");
            newDiv.setAttribute("id", "coat_of_arms");
            newDiv.setAttribute('style', `height:auto;margin-bottom:1rem;`);
               if (lastUrl.startsWith("https://www.geoguessr.com/me/")){
                   const reference_node = document.querySelectorAll('div[class="profile_rank__i2Wyf"]')[0];
                   reference_node.before(newDiv);
               }
               if (lastUrl.startsWith("https://www.geoguessr.com/user/")){
                   const reference_node = document.querySelectorAll('div[class="slug_rankText__w4BvR"]')[0];
                   reference_node.before(newDiv);
               }
            const img_coat_of_arms = document.createElement('img');
            img_coat_of_arms.setAttribute('src', chosen_coat_of_arms+`/${code_iso}.svg`);
            img_coat_of_arms.setAttribute('width', size_coat_of_arm);
            img_coat_of_arms.setAttribute("onerror", "this.onerror=null; this.remove();");
            const svg_coat_of_arms_location = document.querySelector("#coat_of_arms");;
            svg_coat_of_arms_location.appendChild(img_coat_of_arms);
        }
    }
}