// ==UserScript==
// @name         Geoguessr duel guess times
// @version      1.1.3
// @description  Display guess times and rating changes to the summary page of duels
// @match        https://www.geoguessr.com/*
// @author       victheturtle#5159
// @grant        none
// @license      MIT
// @icon         https://www.svgrepo.com/show/139928/katana.svg
// @namespace https://greasyfork.org/users/967692
// @downloadURL none
// ==/UserScript==

let game = {};
let done = false;

let green = "game-summary_healing__qWCZd";
let red = "game-summary_damage__XQS1o";
let grey = "game-summary_smallText__SBEuX";
let big_white = "game-summary_text__AMDNt";
let summary_table = "game-summary_playedRounds__QLFcJ";
let summary_line = "game-summary_playedRound__zFmlo";
let color = (diff) => (diff>=0) ? ((diff==0)?grey:green) : red;

function checkURL() {
    return location.pathname.startsWith("/duels") && location.pathname.endsWith("/summary") && document.getElementsByClassName(summary_table)[0] != null;
};

function addGuessTimesSummary() {
    if (checkURL() && game != {} && !done) {
        done = true;
        let result_lines = document.getElementsByClassName(summary_line);
        let player2_link = document.getElementsByClassName("game-summary_playedRoundsHeader__86HiG")[0].children[2].firstChild.href;
        let player2_id = player2_link.slice(player2_link.lastIndexOf("/")+1);
        let inversion = game.teams[1].players[0].playerId != player2_id;
        let player1 = game.teams[inversion ? 1 : 0].players[0];
        let player2 = game.teams[inversion ? 0 : 1].players[0];
        let guesses1 = player1.guesses;
        let guesses2 = player2.guesses;
        for (let i=0; i<result_lines.length; i++) {
            let time0 = game.rounds[i].startTime;
            if (guesses1.length <= i || guesses1[i].roundNumber != i+1) guesses1.splice(i, 0, {created:NaN});
            let time1 = guesses1[i].created;
            if (guesses2.length <= i || guesses2[i].roundNumber != i+1) guesses2.splice(i, 0, {created:NaN});
            let time2 = guesses2[i].created;

            let text1 = document.createElement("div");
            text1.classList.add(isNaN(time2) ? green : color(time2-time1));
            text1.innerText = isNaN(time1) ? "-" : (time1-time0)/1000. + " s";
            result_lines[i].childNodes[1].appendChild(text1);

            let text2 = document.createElement("div");
            text2.classList.add(isNaN(time1) ? green : color(time1-time2));
            text2.innerText = isNaN(time2) ? "-" : (time2-time0)/1000. + " s";
            result_lines[i].childNodes[2].appendChild(text2);
        }

        let summary = document.getElementsByClassName(summary_table)[0];
        let newRatingLine = document.createElement("div");
        newRatingLine.classList.add(summary_line);
        try {
            let oldRating1 = player1.progressChange.competitiveProgress.ratingBefore;
            let newRating1 = player1.progressChange.competitiveProgress.ratingAfter;
            let oldRating2 = player2.progressChange.competitiveProgress.ratingBefore;
            let newRating2 = player2.progressChange.competitiveProgress.ratingAfter;
            newRatingLine.innerHTML = `
            <div><span><div class="${grey}">Rating change</div><div class="${big_white}">New rating</div></span></div>
            <div><div class="${color(newRating1-oldRating1)}">${newRating1-oldRating1}</div><div class="${big_white}">${newRating1}</div></div>
            <div><div class="${color(newRating2-oldRating2)}">${newRating2-oldRating2}</div><div class="${big_white}">${newRating2}</div></div>
            <div><div class="${big_white}"> </div></div>
            <div><div class="${big_white}"> </div></div>`;
        } catch {
            let oldRating1 = player1.rating;
            let oldRating2 = player2.rating;
            newRatingLine.innerHTML = `
            <div><span><div class="${grey}">Rating change</div><div class="${big_white}">New rating</div></span></div>
            <div><div class="${grey}">0</div><div class="${big_white}">${oldRating1}</div></div>
            <div><div class="${grey}">0</div><div class="${big_white}">${oldRating2}</div></div>
            <div><div class="${big_white}"> </div></div>
            <div><div class="${big_white}"> </div></div>`;
        };
        summary.appendChild(newRatingLine);
    };
};

function check() {
    let game_url = window.location.href;
    fetch(game_url)
    .then(res => res.text())
    .then(str => {
        let parser = new DOMParser();
        let html = parser.parseFromString(str, "text/html");
        let dataHTML = html.getElementById("__NEXT_DATA__");
        let dataJson = JSON.parse(dataHTML.innerHTML);
        game = dataJson.props.pageProps.game;
        addGuessTimesSummary();
    }).catch(err => {throw(err);});
};

function doCheck() {
    if (!checkURL()) {
        done = false;
    } else if (game != {} && !done) {
        check();
    }
};

function tryAddGuessTimesOnRefresh() {
    setTimeout(doCheck, 50);
    setTimeout(doCheck, 300);
};

function tryAddGuessTimes() {
    doCheck();
    for (let timeout of [250,500,1200,2000]) {
        setTimeout(doCheck, timeout);
    }
};

document.addEventListener('click', tryAddGuessTimes, false);
document.addEventListener('load', tryAddGuessTimesOnRefresh(), false);
window.addEventListener('popstate', tryAddGuessTimes, false);