// ==UserScript==
// @name         Geoguessr Custom Emotes
// @description  Allows you to use many custom emotes in the Geoguessr chat
// @version      2.0.1
// @author       victheturtle#5159
// @license      MIT
// @match        https://www.geoguessr.com/*
// @icon         https://www.geoguessr.com/_next/static/images/emote-gg-cf17a1f5d51d0ed53f01c65e941beb6d.png
// @namespace    https://greasyfork.org/users/967692-victheturtle
// @downloadURL none
// ==/UserScript==

let geoguessrCustomEmotes = [];

const customEmotesInjectedClass = "custom-emotes-injected";
const getAllNewMessages = () => document.querySelectorAll(`div[class*="chat-message_messageContent__"]:not([class*="${customEmotesInjectedClass}"])`);

const _cndic = {};
const hrefset = new Set();
async function scanStyles() {
    for (let node of document.querySelectorAll('head link[rel="preload"], head style[data-n-href*=".css"]')) {
        const href = node.href || location.origin+node.dataset.nHref;
        if (hrefset.has(href)) continue;
        hrefset.add(href);
        await fetch(href)
        .then(res => res.text())
        .then(stylesheet => {
            for (let className of stylesheet.split(".")) {
                const ind = className.indexOf("__");
                if (ind != -1) _cndic[className.substr(0, ind+2)] = className.substr(0, ind+7);
            };
        });
    };
}
const cn = (classNameStart) => _cndic[classNameStart]; // cn("status_section__") -> "status_section__8uP8o"

const emoteInjectionTemplate = (emoteSrc) => `</span>
<span class="${cn("chat-message_emoteWrapper__")}"><img src="${emoteSrc}" class="${cn("chat-message_messageEmote__")}"></span>
<span class="${cn("chat-message_messageText__")}">`;

let observer = new MutationObserver((mutations) => {
    let newMessages = getAllNewMessages();
    if (newMessages.length == 0) return;
    scanStyles().then(() => {
    for (let message of newMessages) {
        let innerHTML = message.innerHTML;
        for (let emoteName in geoguessrCustomEmotes) {
            innerHTML = innerHTML.replaceAll(emoteName, emoteInjectionTemplate(geoguessrCustomEmotes[emoteName]));
            innerHTML = innerHTML.replaceAll(emoteName.toLowerCase(), emoteInjectionTemplate(geoguessrCustomEmotes[emoteName]));
        }
        message.innerHTML = innerHTML;
        message.classList.add(customEmotesInjectedClass);
    }})
});

(() => {
    fetch("https://api.github.com/gists/7e5046589b0f020c1ec80629c582cca6")
    .then(it => it.json())
    .then(it => {
        geoguessrCustomEmotes = JSON.parse(it.files["GeoguessrCustomEmotesRepository.json"].content);
        observer.observe(document.body, {
            characterDataOldValue: false,
            subtree: true,
            childList: true,
            characterData: false
        });
    }).catch(err => console.log(err));
})();