// ==UserScript==
// @name         Geoguessr Custom Emotes
// @description  Allows you to use many custom emotes in the Geoguessr chat
// @version      2.0.0
// @author       victheturtle#5159
// @license      MIT
// @match        https://www.geoguessr.com/*
// @require      https://greasyfork.org/scripts/453368-geoguessr-custom-emotes-repository/code/Geoguessr%20Custom%20Emotes%20Repository.js
// @grant        GM_addStyle
// @icon         https://www.geoguessr.com/_next/static/images/emote-gg-cf17a1f5d51d0ed53f01c65e941beb6d.png
// @namespace    https://greasyfork.org/users/967692-victheturtle
// @downloadURL none
// ==/UserScript==

const geoguessrCustomEmotes = window.geoguessrCustomEmotes // Imported from the @require link

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]));
        }
        message.innerHTML = innerHTML;
        message.classList.add(customEmotesInjectedClass);
    }})
});

observer.observe(document.body, {
  characterDataOldValue: false,
  subtree: true,
  childList: true,
  characterData: false
});