Geoguessr Advanced Stats V5

// ==UserScript==
// @name         Geoguessr Advanced Stats V5
// @namespace    http://tampermonkey.net/
// @version      5.0
// @description  Fetches Geoguessr API data to get advanced stats for duel games and displays them on the profile page.
// @author       You
// @match        https://www.geoguessr.com/*/me/profile
// @match        https://www.geoguessr.com/me/profile
// @icon         https://www.geoguessr.com/_next/static/media/favicon.bffdd9d3.png

// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @require      https://unpkg.com/[email protected]/dist/axios.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/progressbar.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js
// @connect      https://game-server.geoguessr.com/
// ==/UserScript==

(function() {
    'use strict';

    // Constants
    const MAX_SCORE = 5000;
    const API_BASE_URL = 'https://game-server.geoguessr.com/api/duels';

    // Variables
    let playerId = '';

    // Inject custom styles
    function addCustomStyles() {
        GM_addStyle(`
            table { width:96%; border-collapse: collapse; color:black;}
            th { border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f2f2f2; cursor: pointer; }
            td { border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #ffffff; }
            .chart-container { margin: auto; width: 80%; height: 400px; }
        `);
    }

    // Utility functions for color interpolation
    function interpolateColor(color1, color2, factor) {
        factor = Math.min(1, Math.max(0, factor));
        const color1Parts = parseColor(color1);
        const color2Parts = parseColor(color2);

        return color1Parts.map((part, index) =>
            Math.round(part + (factor * (color2Parts[index] - part)))
        ).reduce((acc, val) => acc + ` ${val}`, 'rgb(').concat(')');
    }

    function parseColor(hex) {
        return [
            parseInt(hex.slice(1, 3), 16),
            parseInt(hex.slice(3, 5), 16),
            parseInt(hex.slice(5, 7), 16)
        ];
    }

    function getColor(value, min, max) {
        const mid = (max + min) / 2;
        return value < mid ?
            interpolateColor("#cd2941", "#ffffff", (value - min) / (mid - min))
            : interpolateColor("#ffffff", "#29cdb5", (value - mid) / (max - mid));
    }

    // Calculate global stats from countryData
    function calculateGlobalStats(countryData) {
        let totalScore = 0;
        let totalAccuracy = 0;
        let totalRounds = 0;
        let totalWins = 0;

        Object.values(countryData).forEach(data => {
            totalScore += data.totalScore;
            totalAccuracy += data.totalAccuracy;
            totalRounds += data.totalRounds;
            totalWins += data.wins;
        });

        const totalAverageScore = Math.floor(totalScore / totalRounds);
        const overallAccuracy = (totalAccuracy / totalRounds).toFixed(2);
        const totalWinRate = ((totalWins / totalRounds) * 100).toFixed(2);

        return { totalAverageScore, overallAccuracy, totalWinRate };
    }

    // Render circular gauges for global stats
    function renderGauges(container, globalStats) {
        if (!container) {
            console.error("Container element not found.");
            return;
        }
        const overallStatsWrapper = document.createElement('div');
        overallStatsWrapper.style.marginBottom = '40px';

        const titleElement = document.createElement('h2');
        titleElement.textContent = "Overall Stats";
        titleElement.style.color = "#ffa43d";
        titleElement.style.textAlign = 'center';
        titleElement.style.marginBottom = '15px';

        overallStatsWrapper.appendChild(titleElement);

        const statsWrapper = document.createElement('div');
        statsWrapper.style.display = 'flex';
        statsWrapper.style.justifyContent = 'space-around';
        statsWrapper.style.marginBottom = '20px';

        const gaugesData = [
            { label: 'Average Score', value: globalStats.totalAverageScore / MAX_SCORE, actualValue: globalStats.totalAverageScore, maxValue: MAX_SCORE },
            { label: 'Accuracy', value: globalStats.overallAccuracy / 100, actualValue: globalStats.overallAccuracy , maxValue : 100},
            { label: 'Win-Rate', value: globalStats.totalWinRate / 100, actualValue: globalStats.totalWinRate, maxValue : 100 }
        ];

        gaugesData.forEach(data => {
            const gaugeWrapper = document.createElement('div');
            gaugeWrapper.style.textAlign = 'center';

            if (typeof ProgressBar === 'undefined' || typeof ProgressBar.Circle === 'undefined') {
                console.error("ProgressBar.js library not found.");
                return;
            }
            const bar = new ProgressBar.Circle(gaugeWrapper, {
                trailColor: 'hsla(0,0%,100%,.6)',
                trailWidth: 15,
                strokeWidth: 15,
                text: {
                    value: '',
                    style: {
                        color: '#FFF',
                        position: 'absolute',
                        top: '45%',
                        left: '50%',
                        padding: 0,
                        margin: 0,
                        transform: 'translate(-50%, -50%)',
                    }
                },
            });

            bar.text.style.fontSize = '2rem';
            bar.path.setAttribute('stroke', getColor(data.actualValue, 0, data.maxValue));
            bar.animate(data.value);
            bar.setText(`${data.actualValue}${data.maxValue == 100 ? '%' : ''}`);

            const label = document.createElement('div');
            label.style.marginTop = '10px';
            label.style.color = '#ffa43d';
            label.textContent = data.label;

            gaugeWrapper.appendChild(label);
            statsWrapper.appendChild(gaugeWrapper);
        });

        overallStatsWrapper.appendChild(statsWrapper);

        if (overallStatsWrapper.children.length > 0) {
            container.append(overallStatsWrapper);
        }
    }

    // Geoguessr API interactions
    async function fetchDuels(session, gameIds) {
        console.log(`Try to fetch ${gameIds.length} games`);
        const results = await Promise.all(gameIds.map(async (gameId) => {
            try {
                const response = await session.get(`${API_BASE_URL}/${gameId}`);
                return response.data;
            } catch (error) {
                console.error(`Failed to fetch data for game ID ${gameId}:`, error);
                return null;
            }
        }));
        console.log(`Fetched ${results.filter(Boolean).length} games`);
        return results.filter(Boolean);
    }

    async function getGameIds(session) {
        const gameIds = [];
        let paginationToken = null;

        try {
            while (true) {
                const response = await session.get('https://www.geoguessr.com/api/v4/feed/private', { params: { paginationToken } });
                const data = response.data;
                paginationToken = data.paginationToken;

                if (!playerId && data.entries.length > 0) {
                    playerId = data.entries[0].user.id;
                }

                data.entries.forEach(entry => {
                    try {
                        extractGameIds(entry, gameIds);
                    } catch (error) {
                        console.error(error);
                    }
                });

                if (!paginationToken) break;
            }
        } catch (error) {
            console.error("An error occurred while fetching game IDs:", error);
        }

        return gameIds;
    }

    function extractGameIds(entry, gameIds) {
        const payloadJson = JSON.parse(entry.payload);
        const time = entry.time
        const payloadArray = Array.isArray(payloadJson) ? payloadJson : [payloadJson];
        payloadArray.forEach(payload => {
            // Test if partyId is undefined
            if (payload.gameMode === 'Duels' && payload.partyId === undefined) {
                gameIds.push({ id: payload.gameId, time: time });
            } else if (payload.payload && payload.payload.gameMode === 'Duels' && payload.payload.partyId === undefined) {
                gameIds.push({ id: payload.payload.gameId, time: time });
            }
        });
    }

    // Table rendering logic
    async function renderTable(session, gameIds) {
        try {
            const dataList = await fetchDuels(session, gameIds.map(game => game.id));
            const weeklyStats = calculateWeeklyStats(dataList, gameIds);
            const countryData = processGameData(dataList);
            const globalStats = calculateGlobalStats(countryData);

            const tableData = transformCountryData(countryData);
            const container = document.querySelectorAll("[class^='container_content']")[document.querySelectorAll("[class^='container_content']").length - 1];
            console.log("Global Stats:", globalStats);
            renderGauges(container, globalStats);
            renderHistogram(container, weeklyStats);
            createCountryTable(container, tableData);
        } catch (error) {
            console.error("Error fetching or processing data:", error);
        } finally {
            console.timeEnd('loading_games');
        }
    }

    function calculateWeeklyStats(dataList, gameTimeData) {
        const weeklyStats = {};

        dataList.forEach((data, index) => {
            const gameTime = new Date(gameTimeData[index].time);
            const weekYear = `${gameTime.getFullYear()}-W${Math.ceil((((gameTime - new Date(gameTime.getFullYear(),0,1)) / 86400000) + gameTime.getDay() + 1)/7)}`;
            if (!weeklyStats[weekYear]) {
                weeklyStats[weekYear] = { totalAccuracy: 0, totalRounds: 0 };
            }
            const player = data.teams.flatMap(team => team.players).find(player => player.playerId === playerId);
            if (!player) return;

            data.rounds.forEach(round => {
                const playerGuess = player.guesses.find(g => g.roundNumber === round.roundNumber);
                if (playerGuess) {
                    weeklyStats[weekYear].totalAccuracy += (playerGuess.score * 100) / MAX_SCORE;
                    weeklyStats[weekYear].totalRounds++;
                }
            });
        });

        return Object.keys(weeklyStats).map(week => ({
            week,
            accuracy: (weeklyStats[week].totalAccuracy / weeklyStats[week].totalRounds).toFixed(2)
        }));
    }

    function processGameData(dataList) {
        const countryData = {};

        dataList.forEach(data => {
            const player = data.teams.flatMap(team => team.players).find(player => player.playerId === playerId);
            if (!player) return;

            data.rounds.forEach(round => aggregateRoundData(countryData, round, player, data.teams));
        });

        return countryData;
    }

    function aggregateRoundData(countryData, round, player, teams) {
        const countryCode = round.panorama.countryCode;
        const playerGuess = player.guesses.find(g => g.roundNumber === round.roundNumber);

        if (playerGuess) {
            if (!countryData[countryCode]) {
                countryData[countryCode] = { totalRounds: 0, totalScore: 0, totalPointDiff: 0, wins: 0, totalAccuracy: 0 };
            }
            let sumPointDiff = 0;

            countryData[countryCode].totalRounds++;
            countryData[countryCode].totalScore += playerGuess.score;
            countryData[countryCode].totalAccuracy += (playerGuess.score * 100) / MAX_SCORE;

            teams.forEach(team => {
                team.players.forEach(opponent => {
                    if (opponent.playerId !== playerId) {
                        const opponentGuess = opponent.guesses.find(g => g.roundNumber === round.roundNumber);
                        if (opponentGuess) {
                            let pointDiff = playerGuess.score - opponentGuess.score;
                            sumPointDiff += pointDiff;
                            if (playerGuess.score > opponentGuess.score) {
                                countryData[countryCode].wins++;
                            }
                        }
                    }
                });
            });

            countryData[countryCode].totalPointDiff += sumPointDiff;
        }
    }

    function transformCountryData(countryData) {
        return Object.keys(countryData).map(countryCode => {
            const totalRounds = countryData[countryCode].totalRounds;
            return {
                country: countryCode,
                totalRounds: totalRounds,
                averageScore: (countryData[countryCode].totalScore / totalRounds).toFixed(2),
                winRate: ((countryData[countryCode].wins / totalRounds) * 100).toFixed(2),
                totalPointDiff: countryData[countryCode].totalPointDiff,
                averagePointDiff: (countryData[countryCode].totalPointDiff / totalRounds).toFixed(2),
                countryAccuracy: (countryData[countryCode].totalAccuracy / totalRounds).toFixed(2)
            };
        });
    }

    function createCountryTable(container, tableData) {
        const countryNames = getCountryNames();
        const overallCountryStatsWrapper = document.createElement('div');
        const titleElement = document.createElement('h2');
        titleElement.textContent = "Country Stats";
        titleElement.style.color = "#ffa43d";
        titleElement.style.textAlign = 'center';
        titleElement.style.marginBottom = '15px';

        overallCountryStatsWrapper.appendChild(titleElement);

        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const headers = ['Country', 'Total Rounds', 'Average Score', 'Win Rate (%)', 'Total Point Diff', 'Average Point Diff', 'Country Accuracy (%)'];
        const headerRow = document.createElement('tr');

        headers.forEach((header, index) => {
            const th = document.createElement('th');
            th.textContent = header;
            th.addEventListener('click', () => sortTable(table, index));
            headerRow.appendChild(th);
        });

        thead.appendChild(headerRow);
        table.appendChild(thead);

        const tbody = document.createElement('tbody');
        tableData.forEach(row => {
            const countryNameWithFlag = countryNames[row.country] || row.country;
            const urlFriendlyName = countryNameWithFlag
                .replace(/[\u{1F1E6}-\u{1F1FF}]/gu, '')
                .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
                .trim().toLowerCase().replace(/ /g, '-');
            const countryLink = `<a href="https://www.plonkit.net/${urlFriendlyName}" target="_blank">${countryNameWithFlag}</a>`;

            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${countryLink}</td>
                <td>${row.totalRounds}</td>
                <td style="background-color:${getColor(row.averageScore, 0, MAX_SCORE)};">${row.averageScore}</td>
                <td style="background-color:${getColor(row.winRate, 0, 100)};">${row.winRate}</td>
                <td style="background-color:${getColor(row.totalPointDiff, -MAX_SCORE, MAX_SCORE)};">${row.totalPointDiff}</td>
                <td style="background-color:${getColor(row.averagePointDiff, -1000, 1000)};">${row.averagePointDiff}</td>
                <td style="background-color:${getColor(row.countryAccuracy, 0, 100)};">${row.countryAccuracy}</td>
            `;
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);

        overallCountryStatsWrapper.appendChild(table);
        container.appendChild(overallCountryStatsWrapper);
    }

    function sortTable(table, columnIndex) {
        const tbody = table.querySelector('tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));
        const isAsc = table.getAttribute('data-sort-direction') === 'asc';

        table.setAttribute('data-sort-direction', isAsc ? 'desc' : 'asc');

        rows.sort((a, b) => {
            const aText = a.querySelectorAll('td')[columnIndex].textContent.trim();
            const bText = b.querySelectorAll('td')[columnIndex].textContent.trim();
            return !isNaN(aText) && !isNaN(bText) ?
                (isAsc ? aText - bText : bText - aText)
                : (isAsc ? aText.localeCompare(bText) : bText.localeCompare(aText));
        });

        rows.forEach(row => tbody.appendChild(row));
    }

    function getCountryNames() {
        // Return a mapping object for country codes to country names
        return {
            'ad': 'Andorra 🇦🇩',
            'ae': 'United Arab Emirates 🇦🇪',
            'af': 'Afghanistan 🇦🇫',
            'ag': 'Antigua and Barbuda 🇦🇬',
            'ai': 'Anguilla 🇦🇮',
            'al': 'Albania 🇦🇱',
            'am': 'Armenia 🇦🇲',
            'ao': 'Angola 🇦🇴',
            'aq': 'Antarctica 🇦🇶',
            'ar': 'Argentina 🇦🇷',
            'as': 'American Samoa 🇦🇸',
            'at': 'Austria 🇦🇹',
            'au': 'Australia 🇦🇺',
            'aw': 'Aruba 🇦🇼',
            'ax': 'Åland Islands 🇦🇽',
            'az': 'Azerbaijan 🇦🇿',
            'ba': 'Bosnia and Herzegovina 🇧🇦',
            'bb': 'Barbados 🇧🇧',
            'bd': 'Bangladesh 🇧🇩',
            'be': 'Belgium 🇧🇪',
            'bf': 'Burkina Faso 🇧🇫',
            'bg': 'Bulgaria 🇧🇬',
            'bh': 'Bahrain 🇧🇭',
            'bi': 'Burundi 🇧🇮',
            'bj': 'Benin 🇧🇯',
            'bl': 'Saint Barthélemy 🇧🇱',
            'bm': 'Bermuda 🇧🇲',
            'bn': 'Brunei Darussalam 🇧🇳',
            'bo': 'Bolivia 🇧🇴',
            'bq': 'Bonaire, Sint Eustatius and Saba 🇧🇶',
            'br': 'Brazil 🇧🇷',
            'bs': 'Bahamas 🇧🇸',
            'bt': 'Bhutan 🇧🇹',
            'bv': 'Bouvet Island 🇧🇻',
            'bw': 'Botswana 🇧🇼',
            'by': 'Belarus 🇧🇾',
            'bz': 'Belize 🇧🇿',
            'ca': 'Canada 🇨🇦',
            'cc': 'Cocos (Keeling) Islands 🇨🇨',
            'cd': 'Congo (Democratic Republic of the) 🇨🇩',
            'cf': 'Central African Republic 🇨🇫',
            'cg': 'Congo 🇨🇬',
            'ch': 'Switzerland 🇨🇭',
            'ci': 'Côte d\'Ivoire 🇨🇮',
            'ck': 'Cook Islands 🇨🇰',
            'cl': 'Chile 🇨🇱',
            'cm': 'Cameroon 🇨🇲',
            'cn': 'China 🇨🇳',
            'co': 'Colombia 🇨🇴',
            'cr': 'Costa Rica 🇨🇷',
            'cu': 'Cuba 🇨🇺',
            'cv': 'Cabo Verde 🇨🇻',
            'cw': 'Curaçao 🇨🇼',
            'cx': 'Christmas Island 🇨🇽',
            'cy': 'Cyprus 🇨🇾',
            'cz': 'Czechia 🇨🇿',
            'de': 'Germany 🇩🇪',
            'dj': 'Djibouti 🇩🇯',
            'dk': 'Denmark 🇩🇰',
            'dm': 'Dominica 🇩🇲',
            'do': 'Dominican Republic 🇩🇴',
            'dz': 'Algeria 🇩🇿',
            'ec': 'Ecuador 🇪🇨',
            'ee': 'Estonia 🇪🇪',
            'eg': 'Egypt 🇪🇬',
            'eh': 'Western Sahara 🇪🇭',
            'er': 'Eritrea 🇪🇷',
            'es': 'Spain 🇪🇸',
            'et': 'Ethiopia 🇪🇹',
            'fi': 'Finland 🇫🇮',
            'fj': 'Fiji 🇫🇯',
            'fk': 'Falkland Islands (Malvinas) 🇫🇰',
            'fm': 'Micronesia (Federated States of) 🇫🇲',
            'fo': 'Faroe Islands 🇫🇴',
            'fr': 'France 🇫🇷',
            'ga': 'Gabon 🇬🇦',
            'gb': 'United Kingdom 🇬🇧',
            'gd': 'Grenada 🇬🇩',
            'ge': 'Georgia 🇬🇪',
            'gf': 'French Guiana 🇬🇫',
            'gg': 'Guernsey 🇬🇬',
            'gh': 'Ghana 🇬🇭',
            'gi': 'Gibraltar 🇬🇮',
            'gl': 'Greenland 🇬🇱',
            'gm': 'Gambia 🇬🇲',
            'gn': 'Guinea 🇬🇳',
            'gp': 'Guadeloupe 🇬🇵',
            'gq': 'Equatorial Guinea 🇬🇶',
            'gr': 'Greece 🇬🇷',
            'gs': 'South Georgia and the South Sandwich Islands 🇬🇸',
            'gt': 'Guatemala 🇬🇹',
            'gu': 'Guam 🇬🇺',
            'gw': 'Guinea-Bissau 🇬🇼',
            'gy': 'Guyana 🇬🇾',
            'hk': 'Hong Kong 🇭🇰',
            'hm': 'Heard Island and McDonald Islands 🇭🇲',
            'hn': 'Honduras 🇭🇳',
            'hr': 'Croatia 🇭🇷',
            'ht': 'Haiti 🇭🇹',
            'hu': 'Hungary 🇭🇺',
            'id': 'Indonesia 🇮🇩',
            'ie': 'Ireland 🇮🇪',
            'il': 'Israel 🇮🇱',
            'im': 'Isle of Man 🇮🇲',
            'in': 'India 🇮🇳',
            'io': 'British Indian Ocean Territory 🇮🇴',
            'iq': 'Iraq 🇮🇶',
            'ir': 'Iran 🇮🇷',
            'is': 'Iceland 🇮🇸',
            'it': 'Italy 🇮🇹',
            'je': 'Jersey 🇯🇪',
            'jm': 'Jamaica 🇯🇲',
            'jo': 'Jordan 🇯🇴',
            'jp': 'Japan 🇯🇵',
            'ke': 'Kenya 🇰🇪',
            'kg': 'Kyrgyzstan 🇰🇬',
            'kh': 'Cambodia 🇰🇭',
            'ki': 'Kiribati 🇰🇮',
            'km': 'Comoros 🇰🇲',
            'kn': 'Saint Kitts and Nevis 🇰🇳',
            'kp': 'North Korea 🇰🇵',
            'kr': 'South Korea 🇰🇷',
            'kw': 'Kuwait 🇰🇼',
            'ky': 'Cayman Islands 🇰🇾',
            'kz': 'Kazakhstan 🇰🇿',
            'la': 'Laos 🇱🇦',
            'lb': 'Lebanon 🇱🇧',
            'lc': 'Saint Lucia 🇱🇨',
            'li': 'Liechtenstein 🇱🇮',
            'lk': 'Sri Lanka 🇱🇰',
            'lr': 'Liberia 🇱🇷',
            'ls': 'Lesotho 🇱🇸',
            'lt': 'Lithuania 🇱🇹',
            'lu': 'Luxembourg 🇱🇺',
            'lv': 'Latvia 🇱🇻',
            'ly': 'Libya 🇱🇾',
            'ma': 'Morocco 🇲🇦',
            'mc': 'Monaco 🇲🇨',
            'md': 'Moldova 🇲🇩',
            'me': 'Montenegro 🇲🇪',
            'mf': 'Saint Martin 🇲🇫',
            'mg': 'Madagascar 🇲🇬',
            'mh': 'Marshall Islands 🇲🇭',
            'mk': 'North Macedonia 🇲🇰',
            'ml': 'Mali 🇲🇱',
            'mm': 'Myanmar 🇲🇲',
            'mn': 'Mongolia 🇲🇳',
            'mo': 'Macao 🇲🇴',
            'mp': 'Northern Mariana Islands 🇲🇵',
            'mq': 'Martinique 🇲🇶',
            'mr': 'Mauritania 🇲🇷',
            'ms': 'Montserrat 🇲🇸',
            'mt': 'Malta 🇲🇹',
            'mu': 'Mauritius 🇲🇺',
            'mv': 'Maldives 🇲🇻',
            'mw': 'Malawi 🇲🇼',
            'mx': 'Mexico 🇲🇽',
            'my': 'Malaysia 🇲🇾',
            'mz': 'Mozambique 🇲🇿',
            'na': 'Namibia 🇳🇦',
            'nc': 'New Caledonia 🇳🇨',
            'ne': 'Niger 🇳🇪',
            'nf': 'Norfolk Island 🇳🇫',
            'ng': 'Nigeria 🇳🇬',
            'ni': 'Nicaragua 🇳🇮',
            'nl': 'Netherlands 🇳🇱',
            'no': 'Norway 🇳🇴',
            'np': 'Nepal 🇳🇵',
            'nr': 'Nauru 🇳🇷',
            'nu': 'Niue 🇳🇺',
            'nz': 'New Zealand 🇳🇿',
            'om': 'Oman 🇴🇲',
            'pa': 'Panama 🇵🇦',
            'pe': 'Peru 🇵🇪',
            'pf': 'French Polynesia 🇵🇫',
            'pg': 'Papua New Guinea 🇵🇬',
            'ph': 'Philippines 🇵🇭',
            'pk': 'Pakistan 🇵🇰',
            'pl': 'Poland 🇵🇱',
            'pm': 'Saint Pierre and Miquelon 🇵🇲',
            'pn': 'Pitcairn 🇵🇳',
            'pr': 'Puerto Rico 🇵🇷',
            'ps': 'Palestine 🇵🇸',
            'pt': 'Portugal 🇵🇹',
            'pw': 'Palau 🇵🇼',
            'py': 'Paraguay 🇵🇾',
            'qa': 'Qatar 🇶🇦',
            're': 'Réunion 🇷🇪',
            'ro': 'Romania 🇷🇴',
            'rs': 'Serbia 🇷🇸',
            'ru': 'Russia 🇷🇺',
            'rw': 'Rwanda 🇷🇼',
            'sa': 'Saudi Arabia 🇸🇦',
            'sb': 'Solomon Islands 🇸🇧',
            'sc': 'Seychelles 🇸🇨',
            'sd': 'Sudan 🇸🇩',
            'se': 'Sweden 🇸🇪',
            'sg': 'Singapore 🇸🇬',
            'sh': 'Saint Helena 🇸🇭',
            'si': 'Slovenia 🇸🇮',
            'sj': 'Svalbard and Jan Mayen 🇸🇯',
            'sk': 'Slovakia 🇸🇰',
            'sl': 'Sierra Leone 🇸🇱',
            'sm': 'San Marino 🇸🇲',
            'sn': 'Senegal 🇸🇳',
            'so': 'Somalia 🇸🇴',
            'sr': 'Suriname 🇸🇷',
            'ss': 'South Sudan 🇸🇸',
            'st': 'Sao Tome and Principe 🇸🇹',
            'sv': 'El Salvador 🇸🇻',
            'sx': 'Sint Maarten 🇸🇽',
            'sy': 'Syria 🇸🇾',
            'sz': 'Eswatini 🇸🇿',
            'tc': 'Turks and Caicos Islands 🇹🇨',
            'td': 'Chad 🇹🇩',
            'tf': 'French Southern Territories 🇹🇫',
            'tg': 'Togo 🇹🇬',
            'th': 'Thailand 🇹🇭',
            'tj': 'Tajikistan 🇹🇯',
            'tk': 'Tokelau 🇹🇰',
            'tl': 'Timor-Leste 🇹🇱',
            'tm': 'Turkmenistan 🇹🇲',
            'tn': 'Tunisia 🇹🇳',
            'to': 'Tonga 🇹🇴',
            'tr': 'Turkey 🇹🇷',
            'tt': 'Trinidad and Tobago 🇹🇹',
            'tv': 'Tuvalu 🇹🇻',
            'tw': 'Taiwan 🇹🇼',
            'tz': 'Tanzania 🇹🇿',
            'ua': 'Ukraine 🇺🇦',
            'ug': 'Uganda 🇺🇬',
            'um': 'United States Minor Outlying Islands 🇺🇲',
            'us': 'United States 🇺🇸',
            'uy': 'Uruguay 🇺🇾',
            'uz': 'Uzbekistan 🇺🇿',
            'va': 'Vatican City 🇻🇦',
            'vc': 'Saint Vincent and the Grenadines 🇻🇨',
            've': 'Venezuela 🇻🇪',
            'vg': 'British Virgin Islands 🇻🇬',
            'vi': 'U.S. Virgin Islands 🇻🇮',
            'vn': 'Vietnam 🇻🇳',
            'vu': 'Vanuatu 🇻🇺',
            'wf': 'Wallis and Futuna 🇼🇫',
            'ws': 'Samoa 🇼🇸',
            'xk': 'Kosovo 🇽🇰',
            'ye': 'Yemen 🇾🇪',
            'yt': 'Mayotte 🇾🇹',
            'za': 'South Africa 🇿🇦',
            'zm': 'Zambia 🇿🇲',
            'zw': 'Zimbabwe 🇿🇼',
        };
    }

    // Function to render a histogram showing weekly accuracy
    function renderHistogram(container, weeklyStats) {
        // reverse the array to show the most recent week last
        weeklyStats.reverse();
        const histogramWrapper = document.createElement('div');
        const titleElement = document.createElement('h2');
        titleElement.textContent = "Weekly Accuracy";
        titleElement.style.color = "#ffa43d";
        titleElement.style.textAlign = 'center';
        titleElement.style.marginBottom = '15px';

        histogramWrapper.appendChild(titleElement);

        const chartCanvas = document.createElement('canvas');
        histogramWrapper.appendChild(chartCanvas);
        histogramWrapper.classList.add('chart-container');
        histogramWrapper.style.marginBottom = '60px';

        container.appendChild(histogramWrapper);

        const ctx = chartCanvas.getContext('2d');
        const chartData = {
            labels: weeklyStats.map(stat => stat.week),
            datasets: [{
                label: 'Accuracy (%)',
                data: weeklyStats.map(stat => stat.accuracy),
                backgroundColor: 'rgba(41, 205, 181, 0.5)',
                borderColor: '#29cdb5',
                borderWidth: 1,
                fill: true,
                tension: 0.1
            }]
        };

        new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#ffffff',
                        }
                    },
                    title: {
                        display: true,
                        text: 'Weekly Accuracy',
                        color: '#ffa43d'
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Week',
                            color: '#ffffff'
                        },
                        ticks: {
                            color: '#ffffff'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: 'Accuracy (%)',
                            color: '#ffffff'
                        },
                        ticks: {
                            color: '#ffffff'
                        }
                    }
                }
            }
        });
    }

    // Initialization
    function init() {
        console.time('loading_games');
        addCustomStyles();

        const session = axios.create({
            withCredentials: true
        });
        // gameIds.splice(0,100) to get only your last 100 games. Change the number to get more or less games
        getGameIds(session).then(gameIds => renderTable(session, gameIds.splice(0,100)));
    }

    $(document).ready(init);

})();